:root {
   --navy: #071b45;
   --navy2: #0b2865;
   --blue: #155eef;
   --electric: #2f80ff;
   --violet: #6c4dff;
   --purple: #8b5cf6;
   --ink: #0b1736;
   --muted: #667085;
   --line: #dbe5f5;
   --bg: #f6f9ff;
   --white: #fff;
   --shadow: 0 22px 60px rgba(18, 54, 110, .12);
   --radius: 24px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter, Arial, sans-serif;
   color: var(--ink);
   background: var(--white);
   line-height: 1.6;
   overflow-x: hidden
}

body:before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   opacity: .025;
   background-image: radial-gradient(#071b45 1px, transparent 1px);
   background-size: 22px 22px;
   z-index: -1
}

.container {
   width: min(1180px, calc(100% - 40px));
   margin: auto
}

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 16px 0;
   transition: .3s
}

.site-header.scrolled {
   background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(18px);
   box-shadow: 0 8px 30px rgba(7, 27, 69, .08)
}

.nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-decoration: none;
   color: inherit;
   font-weight: 800;
   font-family: Manrope, sans-serif
}

.brand-mark {
   width: 36px;
   height: 36px;
   border-radius: 50% 42% 55% 45%;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--electric), var(--violet));
   color: white;
   font-weight: 900;
   box-shadow: 0 8px 24px rgba(47, 128, 255, .3)
}

.brand-name {
   font-size: 20px
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 25px
}

.nav-link {
   border: 0;
   background: none;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   padding: 8px 0
}

.site-header.scrolled .nav-link {
   color: var(--ink)
}

.nav-dropdown {
   position: relative
}

.nav-drop-button {
   font: inherit
}

.dropdown-menu {
   position: absolute;
   top: 42px;
   left: 50%;
   transform: translate(-50%, 8px);
   width: 260px;
   padding: 10px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 18px;
   box-shadow: var(--shadow);
   opacity: 0;
   visibility: hidden;
   transition: .2s
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.dropdown-menu a {
   display: block;
   padding: 10px 12px;
   color: var(--ink);
   text-decoration: none;
   border-radius: 10px;
   font-size: 13px
}

.dropdown-menu a:hover {
   background: #eef4ff;
   color: var(--blue)
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 13px 20px;
   border-radius: 999px;
   text-decoration: none;
   font-weight: 700;
   font-size: 14px;
   border: 1px solid transparent;
   transition: .25s;
   cursor: pointer
}

.btn-primary {
   color: #fff;
   background: linear-gradient(135deg, var(--blue), var(--violet));
   box-shadow: 0 12px 25px rgba(47, 128, 255, .25)
}

.btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 35px rgba(47, 128, 255, .3)
}

.btn-light {
   background: #fff;
   color: var(--ink)
}

.btn-outline {
   border-color: rgba(255, 255, 255, .55);
   color: #fff;
   background: rgba(255, 255, 255, .04)
}

.site-header.scrolled .btn-outline {
   border-color: var(--line);
   color: var(--ink)
}

.btn-outline:hover {
   transform: translateY(-3px);
   background: #fff;
   color: var(--ink)
}

.menu-toggle {
   display: none;
   border: 0;
   background: transparent
}

.menu-toggle span {
   display: block;
   width: 25px;
   height: 2px;
   background: #fff;
   margin: 5px;
   border-radius: 2px
}

.site-header.scrolled .menu-toggle span {
   background: var(--ink)
}

h1,
h2,
h3 {
   font-family: Manrope, Arial, sans-serif;
   line-height: 1.08;
   margin: 0 0 18px;
   letter-spacing: -.035em
}

p {
   color: var(--muted);
   margin: 0 0 18px
}

.hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #071b45 0%, #0b3182 52%, #155eef 100%);
   color: #fff
}

.hero-home {
   min-height: 650px;
   padding: 145px 0 105px
}

.hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 30px;
   position: relative;
   z-index: 2
}

.eyebrow {
   font-size: 11px;
   letter-spacing: .13em;
   font-weight: 800;
   color: var(--blue);
   margin-bottom: 14px
}

.hero .eyebrow {
   color: #8dc4ff
}

.hero h1 {
   font-size: clamp(42px, 5.4vw, 72px);
   max-width: 720px
}

.hero h1 span,
.section-heading h2 span,
.why-copy h2 span {
   color: #5ca7ff
}

.hero-copy>p {
   max-width: 600px;
   color: rgba(255, 255, 255, .78);
   font-size: 16px
}

.hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 25px
}

.hero-pills {
   display: flex;
   gap: 18px;
   margin-top: 35px
}

.hero-pills span {
   display: grid;
   grid-template-columns: 28px auto;
   column-gap: 7px;
   align-items: center;
   font-size: 17px;
   color: #9fc8ff
}

.hero-pills b {
   font-size: 11px;
   color: #fff
}

.hero-pills small {
   grid-column: 2;
   font-size: 10px;
   color: #9eb1d4
}

.hero-art {
   min-height: 440px;
   position: relative
}

.art-glow {
   position: absolute;
   width: 440px;
   height: 440px;
   right: 5%;
   top: 0;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(111, 77, 255, .65), rgba(47, 128, 255, .08) 62%, transparent 70%);
   filter: blur(4px)
}

.art-ring {
   position: absolute;
   border: 1px solid rgba(153, 206, 255, .35);
   border-radius: 50%;
   transform: rotate(-18deg)
}

.ring-1 {
   width: 430px;
   height: 170px;
   right: 2%;
   top: 140px
}

.ring-2 {
   width: 330px;
   height: 120px;
   right: 14%;
   top: 165px
}

.mock-person {
   position: absolute;
   width: 270px;
   height: 310px;
   right: 20%;
   top: 80px
}

.head {
   position: absolute;
   width: 75px;
   height: 75px;
   border-radius: 48%;
   background: linear-gradient(135deg, #ffd0b0, #f39a7e);
   top: 35px;
   left: 98px;
   box-shadow: inset -9px -7px 0 rgba(92, 51, 65, .12)
}

.body {
   position: absolute;
   width: 140px;
   height: 165px;
   border-radius: 55px 55px 30px 30px;
   background: linear-gradient(135deg, #1b74ff, #6848ef);
   top: 105px;
   left: 63px;
   transform: rotate(-4deg)
}

.laptop {
   position: absolute;
   width: 225px;
   height: 130px;
   border: 8px solid #c7d9ff;
   border-radius: 14px;
   bottom: 20px;
   left: 20px;
   transform: rotate(-6deg);
   background: #13295c;
   box-shadow: 0 25px 40px rgba(0, 0, 0, .28)
}

.screen {
   height: 100%;
   display: grid;
   place-items: center;
   font: 700 38px Space Grotesk;
   color: #67b7ff;
   background: linear-gradient(135deg, #0c1d47, #173e88)
}

.floating-tag {
   position: absolute;
   padding: 10px 14px;
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 999px;
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(12px);
   font-size: 11px;
   font-weight: 800;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .14)
}

.tag-web {
   top: 40px;
   right: 28%
}

.tag-app {
   top: 115px;
   right: 0
}

.tag-software {
   bottom: 75px;
   left: 5%
}

.floating-sphere {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 25%, #b9e2ff, #4d68ff 50%, #4322aa);
   box-shadow: 0 20px 40px rgba(31, 53, 172, .35)
}

.sphere-1 {
   width: 36px;
   height: 36px;
   right: 4%;
   top: 30px
}

.sphere-2 {
   width: 23px;
   height: 23px;
   left: 7%;
   top: 80px
}

.floating-cube {
   position: absolute;
   width: 42px;
   height: 42px;
   background: linear-gradient(135deg, rgba(91, 181, 255, .7), rgba(123, 61, 255, .75));
   transform: rotate(30deg);
   box-shadow: 0 20px 40px rgba(42, 73, 180, .3)
}

.cube-1 {
   left: 0;
   bottom: 65px
}

.cube-2 {
   right: 7%;
   bottom: 5px;
   width: 25px;
   height: 25px
}

.idea-note {
   position: absolute;
   right: 0;
   bottom: 15px;
   font: 700 13px Space Grotesk;
   color: #c5d9ff;
   transform: rotate(-5deg)
}

.wave {
   position: absolute;
   bottom: -2px;
   left: -5%;
   width: 110%;
   height: 95px;
   background: #fff;
   border-radius: 50% 50% 0 0/70% 70% 0 0
}

.stats-strip {
   margin-top: -1px;
   background: #fff;
   position: relative;
   z-index: 4
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 0 0 28px 28px;
   box-shadow: 0 18px 40px rgba(8, 39, 89, .06);
   overflow: hidden
}

.stats-grid div {
   text-align: center;
   padding: 25px;
   border-right: 1px solid var(--line)
}

.stats-grid div:last-child {
   border: 0
}

.stats-grid strong {
   display: block;
   font: 800 30px Manrope;
   color: var(--blue)
}

.stats-grid span {
   font-size: 12px;
   color: var(--muted)
}

.section {
   padding: 105px 0
}

.section-heading {
   text-align: center;
   max-width: 720px;
   margin: 0 auto 48px
}

.section-heading h2 {
   font-size: clamp(34px, 4vw, 52px)
}

.section-heading p {
   font-size: 15px
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.service-card {
   padding: 28px 22px;
   border: 1px solid var(--line);
   border-radius: 22px;
   background: #fff;
   box-shadow: 0 12px 35px rgba(20, 54, 105, .06);
   transition: .28s
}

.service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 22px 50px rgba(20, 54, 105, .12);
   border-color: #c6d9ff
}

.service-icon {
   width: 54px;
   height: 54px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, #e7f0ff, #efe8ff);
   color: var(--violet);
   font-size: 25px;
   margin-bottom: 20px
}

.service-card h3 {
   font-size: 18px
}

.service-card p {
   font-size: 13px
}

.service-card a {
   color: var(--blue);
   font-size: 12px;
   font-weight: 800;
   text-decoration: none
}

.why-section {
   background: var(--bg)
}

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center
}

.why-art {
   height: 430px;
   position: relative;
   background: radial-gradient(circle at 50% 50%, #fff, #e7f0ff 62%, transparent 63%)
}

.giant-c {
   font: 900 420px Manrope;
   line-height: .8;
   left: 50px;
   top: 20px;
   color: transparent;
   -webkit-text-stroke: 20px #4d8dff;
   filter: drop-shadow(0 25px 30px rgba(46, 94, 197, .2))
}

.mini-card {
   position: absolute;
   padding: 14px 18px;
   border-radius: 16px;
   background: rgba(255, 255, 255, .86);
   box-shadow: var(--shadow);
   font-size: 11px;
   color: var(--muted);
   backdrop-filter: blur(10px)
}

.mini-one {
   top: 45px;
   right: 20px
}

.mini-two {
   bottom: 70px;
   right: 70px;
   font-size: 28px
}

.mini-person {
   position: absolute;
   width: 110px;
   height: 150px;
   background: linear-gradient(135deg, #1c72ff, #7345ef);
   border-radius: 50px 50px 25px 25px;
   bottom: 45px;
   left: 42%;
   transform: rotate(-7deg);
   opacity: 0.35;
}

.why-copy h2 {
   font-size: clamp(34px, 4vw, 52px)
}

.benefits {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 30px
}

.benefits div {
   padding: 14px;
   border: 1px solid var(--line);
   border-radius: 15px;
   background: #fff;
   font-size: 12px;
   color: var(--muted)
}

.benefits b {
   color: var(--ink);
   margin-left: 6px
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 35px
}

.portfolio-card {
   border: 1px solid var(--line);
   border-radius: 22px;
   overflow: hidden;
   background: #fff;
   transition: .25s
}

.portfolio-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow)
}

.project-placeholder {
   height: 190px;
   background: linear-gradient(135deg, #dcecff, #eee5ff);
   display: grid;
   place-items: center;
   position: relative
}

.project-placeholder i {
   font-size: 60px;
   color: var(--blue);
   font-style: normal
}

.project-placeholder span {
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 6px 9px;
   border-radius: 99px;
   background: #fff;
   font-size: 10px;
   font-weight: 800;
   color: var(--blue)
}

.portfolio-card>div:last-child {
   padding: 20px
}

.portfolio-card small {
   color: var(--blue);
   font-weight: 800
}

.portfolio-card h3 {
   font-size: 18px;
   margin: 6px 0
}

.portfolio-card p {
   font-size: 12px
}

.center {
   text-align: center
}

.process-preview {
   padding: 100px 0;
   background: linear-gradient(135deg, #071b45, #123e92);
   color: #fff
}

.light .eyebrow {
   color: #8dc4ff
}

.light h2 {
   color: #fff
}

.light p {
   color: #b9cae9
}

.process-line {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   position: relative
}

.process-line:before {
   content: "";
   position: absolute;
   top: 26px;
   left: 9%;
   right: 9%;
   border-top: 1px dashed rgba(255, 255, 255, .35)
}

.process-line>div {
   text-align: center;
   position: relative;
   z-index: 1
}

.process-line b {
   width: 52px;
   height: 52px;
   display: grid;
   place-items: center;
   margin: 0 auto 16px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--blue), var(--violet));
   border: 4px solid #173c86
}

.process-line h3 {
   font-size: 17px
}

.process-line p {
   font-size: 12px;
   color: #b9cae9
}

.cta-section {
   padding-top: 90px
}

.cta-box {
   border-radius: 30px;
   padding: 55px 60px;
   background: linear-gradient(135deg, #071b45, #174aa4);
   color: #fff;
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   align-items: center;
   overflow: hidden;
   position: relative
}

.cta-box h2 {
   font-size: clamp(32px, 4vw, 50px)
}

.cta-box p {
   color: #bfd0ed
}

.cta-rocket {
   height: 220px;
   position: relative
}

.rocket {
   font-size: 120px;
   position: absolute;
   right: 15%;
   top: 25px;
   transform: rotate(-28deg);
   filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .25))
}

.cloud {
   position: absolute;
   width: 260px;
   height: 70px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .13);
   bottom: 15px;
   right: 0;
   filter: blur(3px)
}

.site-footer {
   margin-top: 90px;
   background: #071b45;
   color: #c4d0e8;
   padding: 65px 0 25px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.3fr 1fr 1.5fr 1fr;
   gap: 40px
}

.site-footer .brand {
   color: #fff
}

.site-footer h3 {
   font-size: 14px;
   color: #fff
}

.site-footer a {
   display: block;
   color: #b8c6e1;
   text-decoration: none;
   font-size: 12px;
   margin: 7px 0
}

.site-footer a:hover {
   color: #fff
}

.site-footer p {
   font-size: 12px
}

.socials {
   display: flex;
   gap: 8px
}

.socials a {
   width: 30px;
   height: 30px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 50%;
   display: grid;
   place-items: center
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .12);
   margin-top: 45px;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   font-size: 11px
}

.page-hero {
   padding: 145px 0 95px;
   min-height: 360px
}

.page-hero .container {
   position: relative;
   z-index: 2
}

.page-hero h1 {
   font-size: clamp(42px, 5vw, 66px);
   max-width: 760px
}

.page-hero p {
   color: #c3d2ec;
   max-width: 680px
}

.page-hero-art {
   position: absolute;
   right: 8%;
   top: 80px;
   width: 300px;
   height: 240px
}

.page-hero-art .sphere {
   position: absolute;
   width: 150px;
   height: 150px;
   border-radius: 50%;
   right: 35px;
   top: 20px;
   background: radial-gradient(circle at 30% 25%, #d5ecff, #5c7cff 50%, #4823ae);
   box-shadow: 0 25px 50px rgba(0, 0, 0, .25)
}

.page-hero-art .ring {
   position: absolute;
   width: 280px;
   height: 80px;
   border: 2px solid rgba(162, 211, 255, .4);
   border-radius: 50%;
   top: 70px;
   right: 0;
   transform: rotate(-20deg)
}

.breadcrumb {
   font-size: 11px;
   color: #9fb7dc;
   margin-bottom: 20px
}

.detail-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 60px;
   align-items: center
}

.detail-visual {
   min-height: 390px;
   border-radius: 30px;
   background: linear-gradient(135deg, #e8f2ff, #f0eaff);
   position: relative;
   overflow: hidden
}

.detail-visual:before {
   content: "";
   position: absolute;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: radial-gradient(circle, #8aaeff, #6948f4);
   left: 25%;
   top: 50px;
   filter: blur(1px);
   box-shadow: 0 30px 80px rgba(80, 81, 210, .3);
   opacity: 0.50;
}

.detail-visual:after {
   content: "</>";
   position: absolute;
   left: 36%;
   top: 120px;
   font: 800 60px Space Grotesk;
   color: #fff
}

.detail-copy h2 {
   font-size: clamp(32px, 4vw, 50px)
}

.feature-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin: 25px 0
}

.feature-list div {
   padding: 13px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: #fff;
   font-size: 12px
}

.feature-list div:before {
   content: "✓";
   color: var(--blue);
   font-weight: 900;
   margin-right: 8px
}

.content-section {
   padding: 90px 0
}

.content-section.alt {
   background: var(--bg)
}

.tech-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.tech {
   padding: 10px 14px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: #fff;
   font-size: 12px;
   font-weight: 700
}

.faq {
   max-width: 850px;
   margin: auto
}

.faq-item {
   border: 1px solid var(--line);
   border-radius: 16px;
   margin-bottom: 12px;
   overflow: hidden;
   background: #fff
}

.faq-q {
   width: 100%;
   border: 0;
   background: #fff;
   padding: 18px 20px;
   text-align: left;
   font: 700 14px Manrope;
   color: var(--ink);
   cursor: pointer;
   display: flex;
   justify-content: space-between
}

.faq-a {
   padding: 0 20px 18px;
   color: var(--muted);
   font-size: 13px
}

.service-mini-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.service-mini {
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: #fff;
   text-decoration: none;
   color: var(--ink)
}

.service-mini strong {
   display: block;
   font-size: 13px
}

.service-mini span {
   font-size: 11px;
   color: var(--muted)
}

.page-card {
   border: 1px solid var(--line);
   border-radius: 24px;
   background: #fff;
   padding: 30px;
   box-shadow: 0 12px 35px rgba(20, 54, 105, .06)
}

.story-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.value-card {
   padding: 25px;
   border: 1px solid var(--line);
   border-radius: 20px;
   text-align: center
}

.value-icon {
   width: 50px;
   height: 50px;
   margin: 0 auto 15px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #eef4ff;
   color: var(--blue)
}

.team-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.team-card {
   text-align: center;
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: 20px
}

.team-avatar {
   width: 90px;
   height: 90px;
   margin: 0 auto 15px;
   border-radius: 50%;
   background: linear-gradient(135deg, #cfe2ff, #dbcaff);
   display: grid;
   place-items: center;
   font: 800 28px Manrope;
   color: var(--blue)
}

.team-card h3 {
   font-size: 16px;
   margin-bottom: 4px
}

.team-card p {
   font-size: 11px
}

.service-overview {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px
}

.service-overview .service-card {
   display: grid;
   grid-template-columns: 65px 1fr;
   gap: 16px
}

.service-overview .service-icon {
   margin: 0
}

.process-steps {
   max-width: 900px;
   margin: auto
}

.process-step {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 25px;
   padding: 25px 0;
   border-bottom: 1px solid var(--line)
}

.process-number {
   width: 58px;
   height: 58px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--blue), var(--violet));
   color: #fff;
   font-weight: 800
}

.process-step h3 {
   font-size: 21px
}

.process-step p {
   font-size: 13px
}

.notice {
   padding: 16px;
   border-radius: 14px;
   background: #eef5ff;
   color: #274b84;
   font-size: 12px
}

.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: .65s ease
}

.reveal.in-view {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .reveal {
      opacity: 1;
      transform: none;
      transition: none
   }

   .service-card,
   .portfolio-card {
      transition: none
   }
}

.nav-link.active {
   color: #fff;
   position: relative
}

.site-header.scrolled .nav-link.active {
   color: var(--blue)
}

.nav-link.active:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   border-radius: 2px;
   background: currentColor
}

/* =========================================================
   PHASE 03 — PORTFOLIO / CASE STUDY / PROCESS VISUAL SYSTEM
   ========================================================= */
.gradient-text {
   background: linear-gradient(135deg, #2F80FF 0%, #7B5CFF 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.portfolio-hero-grid,
.case-hero-grid,
.page-hero-grid {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 56px;
   align-items: center
}

.portfolio-hero,
.case-hero {
   padding: 132px 0 110px;
   position: relative;
   overflow: hidden
}

.portfolio-hero h1,
.case-hero h1,
.page-hero h1 {
   max-width: 820px
}

.portfolio-hero p,
.case-hero p,
.page-hero p {
   max-width: 680px
}

.portfolio-hero-art,
.case-hero-preview {
   min-height: 430px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
}

.screen-stack {
   position: relative;
   width: 390px;
   height: 300px;
   transform: rotate(-6deg) rotateY(-14deg);
   transform-style: preserve-3d
}

.screen {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: 22px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
   box-shadow: 0 35px 80px rgba(2, 12, 42, .38);
   backdrop-filter: blur(12px)
}

.screen-back {
   width: 280px;
   height: 190px;
   right: 0;
   top: 0;
   opacity: .45;
   transform: translateZ(-40px) rotate(4deg)
}

.screen-mid {
   width: 335px;
   height: 225px;
   left: 22px;
   top: 25px;
   opacity: .72;
   transform: translateZ(-20px)
}

.screen-front {
   width: 390px;
   height: 260px;
   left: 0;
   top: 55px;
   padding: 28px;
   background: linear-gradient(145deg, #102c72, #183f98 50%, #5d4aff)
}

.screen-dot {
   display: block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #9bc4ff;
   box-shadow: 22px 0 #b79dff, 44px 0 #fff;
   opacity: .9
}

.screen-line {
   display: block;
   width: 160px;
   height: 12px;
   border-radius: 8px;
   background: rgba(255, 255, 255, .86);
   margin-top: 42px;
   box-shadow: 0 25px rgba(255, 255, 255, .25), 0 50px rgba(255, 255, 255, .14)
}

.screen-chart {
   display: block;
   position: absolute;
   right: 30px;
   bottom: 28px;
   width: 105px;
   height: 78px;
   border-radius: 18px;
   background: linear-gradient(135deg, rgba(72, 144, 255, .9), rgba(143, 91, 255, .9));
   box-shadow: 0 0 45px rgba(72, 144, 255, .4)
}

.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(.2px)
}

.orb-a {
   width: 120px;
   height: 120px;
   background: radial-gradient(circle at 30% 25%, #fff, #4e9dff 24%, #5d38d9 65%, transparent 70%);
   right: 0;
   top: 50px;
   animation: float 5s ease-in-out infinite
}

.orb-b {
   width: 72px;
   height: 72px;
   background: radial-gradient(circle at 30% 25%, #fff, #6c7cff 30%, #6c2fff 75%);
   left: 18px;
   bottom: 40px;
   animation: float 4s ease-in-out infinite reverse
}

.float-chip {
   position: absolute;
   padding: 11px 18px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .94);
   color: #0b2558;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .08em;
   box-shadow: 0 18px 35px rgba(5, 19, 61, .24);
   animation: float 4.5s ease-in-out infinite
}

.chip-one {
   left: 0;
   top: 110px
}

.chip-two {
   right: 5px;
   bottom: 85px;
   animation-delay: -1s
}

.chip-three {
   right: 25px;
   top: 10px;
   animation-delay: -2s
}

.portfolio-filters {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   margin: 30px 0 42px
}

.filter-btn {
   border: 1px solid #d9e3f6;
   background: #fff;
   color: #34456d;
   border-radius: 999px;
   padding: 12px 20px;
   font: 600 14px inherit;
   cursor: pointer;
   transition: .25s
}

.filter-btn:hover,
.filter-btn.active {
   color: #fff;
   border-color: #2f80ff;
   background: linear-gradient(135deg, #155eef, #6c4dff);
   box-shadow: 0 12px 25px rgba(47, 128, 255, .2)
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 28px
}

.portfolio-card {
   overflow: hidden;
   border: 1px solid #e3eaf6;
   border-radius: 26px;
   background: #fff;
   box-shadow: 0 18px 50px rgba(16, 45, 91, .07);
   transition: transform .3s ease, box-shadow .3s ease
}

.portfolio-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 28px 65px rgba(16, 45, 91, .14)
}

.portfolio-media {
   height: 310px;
   display: block;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #eaf2ff, #f3edff)
}

.portfolio-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease
}

.portfolio-card:hover .portfolio-media img {
   transform: scale(1.035)
}

.project-arrow {
   position: absolute;
   right: 18px;
   top: 18px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #fff;
   color: #164aa7;
   font-size: 20px;
   box-shadow: 0 10px 25px rgba(9, 33, 75, .18)
}

.portfolio-card-body {
   padding: 26px 28px 30px
}

.project-category,
.eyebrow {
   color: #316ef5;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase
}

.portfolio-card h3 {
   font-size: 25px;
   margin: 9px 0 8px
}

.portfolio-card h3 a {
   color: inherit
}

.portfolio-card p {
   color: #65728c;
   line-height: 1.7;
   margin: 0 0 18px
}

.tag-row,
.tech-cloud {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.tag-row span,
.tech-cloud span {
   border: 1px solid #e0e8f5;
   border-radius: 999px;
   padding: 7px 11px;
   color: #53627e;
   font-size: 11px;
   font-weight: 700;
   background: #f8fbff
}

.text-link {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   color: #155eef;
   font-weight: 800;
   font-size: 13px;
   margin-top: 20px
}

.empty-state {
   text-align: center;
   padding: 50px;
   border: 1px dashed #ccd8eb;
   border-radius: 20px;
   color: #68758e
}

.split-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center
}

.showcase-art {
   height: 390px;
   position: relative;
   display: grid;
   place-items: center
}

.showcase-device {
   width: 430px;
   height: 275px;
   border-radius: 25px;
   padding: 18px;
   background: linear-gradient(145deg, #102b6b, #1d4da7 55%, #6b4dff);
   box-shadow: 0 35px 70px rgba(24, 60, 150, .25);
   transform: perspective(1000px) rotateY(12deg) rotateX(3deg)
}

.showcase-bar {
   height: 20px;
   border-radius: 8px;
   background: rgba(255, 255, 255, .15)
}

.showcase-content {
   height: 190px;
   margin-top: 18px;
   border-radius: 15px;
   background: rgba(255, 255, 255, .96);
   padding: 28px;
   position: relative
}

.showcase-content i {
   display: block;
   height: 10px;
   border-radius: 6px;
   background: #dbe7ff;
   margin-bottom: 12px;
   width: 45%
}

.showcase-content b {
   position: absolute;
   right: 24px;
   bottom: 24px;
   width: 105px;
   height: 78px;
   border-radius: 16px;
   background: linear-gradient(135deg, #4b9cff, #7651ff)
}

.showcase-orb {
   position: absolute;
   width: 110px;
   height: 110px;
   border-radius: 50%;
   right: 25px;
   top: 20px;
   background: radial-gradient(circle at 30% 25%, #fff, #74b6ff 20%, #633bdb 65%);
   box-shadow: 0 20px 50px rgba(78, 86, 220, .25);
   animation: float 4s ease-in-out infinite
}

.mini-points {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 28px
}

.mini-points div {
   display: flex;
   gap: 13px;
   align-items: center;
   padding: 14px;
   border: 1px solid #e4ebf7;
   border-radius: 16px;
   background: #fff
}

.mini-points strong {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #edf4ff;
   color: #155eef;
   font-size: 12px
}

.cta-gradient {
   background: linear-gradient(135deg, #071b45, #164aa7 58%, #6748e8);
   color: #fff;
   position: relative;
   overflow: hidden
}

.cta-gradient p {
   color: #d9e5ff
}

.cta-gradient .eyebrow {
   color: #a9c9ff
}

.cta-orbit {
   width: 210px;
   height: 210px;
   position: relative;
   display: grid;
   place-items: center
}

.cta-ring {
   position: absolute;
   width: 180px;
   height: 180px;
   border: 1px solid rgba(255, 255, 255, .35);
   border-radius: 50%;
   box-shadow: 0 0 70px rgba(96, 163, 255, .28)
}

.cta-rocket {
   width: 82px;
   height: 82px;
   border-radius: 25px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, #6db6ff, #7750ff);
   font-size: 34px;
   transform: rotate(-25deg);
   box-shadow: 0 25px 55px rgba(0, 0, 0, .25);
   animation: float 3.5s ease-in-out infinite
}

.case-meta {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
   margin-top: 34px
}

.case-meta div {
   padding-right: 24px;
   border-right: 1px solid rgba(255, 255, 255, .18)
}

.case-meta div:last-child {
   border-right: 0
}

.case-meta small {
   display: block;
   font-size: 10px;
   letter-spacing: .12em;
   color: #9eb8e8;
   margin-bottom: 6px
}

.case-meta strong {
   font-size: 13px;
   color: #fff
}

.case-hero-preview {
   min-height: 390px
}

.case-hero-preview img {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 540px;
   border-radius: 28px;
   box-shadow: 0 35px 80px rgba(0, 0, 0, .3);
   border: 1px solid rgba(255, 255, 255, .25)
}

.preview-glow {
   position: absolute;
   width: 330px;
   height: 330px;
   border-radius: 50%;
   background: rgba(78, 143, 255, .35);
   filter: blur(55px)
}

.case-overview-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.case-overview-grid>div {
   padding: 30px;
   border: 1px solid #e3eaf6;
   border-radius: 24px;
   background: #fff
}

.case-overview-grid h3 {
   margin-top: 0
}

.case-overview-grid p {
   color: #65728c;
   line-height: 1.8
}

.result-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.result-card {
   padding: 28px;
   border: 1px solid #dde7f6;
   border-radius: 22px;
   background: #fff
}

.result-card>span {
   color: #6c4dff;
   font-size: 12px;
   font-weight: 900
}

.result-card h3 {
   margin: 18px 0 8px
}

.result-card p {
   color: #68758e;
   line-height: 1.65
}

.tech-cloud {
   margin: 25px 0 45px
}

.tech-cloud span {
   font-size: 13px;
   padding: 11px 15px
}

.case-gallery {
   display: grid;
   grid-template-columns: 1fr
}

.gallery-card {
   border-radius: 28px;
   overflow: hidden;
   border: 1px solid #e1e9f5;
   background: #f3f7ff;
   box-shadow: 0 25px 60px rgba(16, 45, 91, .08)
}

.gallery-card img {
   width: 100%;
   display: block
}

.related-grid {
   grid-template-columns: repeat(2, 1fr)
}

.process-art {
   min-height: 360px
}

.process-orbit {
   width: 290px;
   height: 290px;
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 50%;
   position: relative;
   box-shadow: 0 0 80px rgba(85, 125, 255, .18)
}

.process-orbit:before,
.process-orbit:after {
   content: "";
   position: absolute;
   inset: 35px;
   border: 1px dashed rgba(151, 186, 255, .35);
   border-radius: 50%
}

.process-orbit:after {
   inset: 85px
}

.process-node {
   position: absolute;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #fff;
   color: #155eef;
   font-weight: 900;
   box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
   z-index: 2
}

.node-one {
   top: 25px;
   left: calc(50% - 26px)
}

.node-two {
   right: 12px;
   top: 145px
}

.node-three {
   bottom: 30px;
   left: 55px
}

.process-rocket {
   position: absolute;
   width: 85px;
   height: 85px;
   border-radius: 26px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, #5fa9ff, #7650ff);
   font-size: 34px;
   transform: rotate(-28deg);
   box-shadow: 0 25px 50px rgba(53, 95, 210, .35);
   animation: float 3.5s ease-in-out infinite
}

.process-timeline-v2 {
   max-width: 920px;
   margin: 50px auto 0;
   position: relative
}

.process-timeline-v2:before {
   content: "";
   position: absolute;
   left: 27px;
   top: 25px;
   bottom: 25px;
   width: 2px;
   background: linear-gradient(#b7d3ff, #7257ff)
}

.process-timeline-v2 article {
   display: grid;
   grid-template-columns: 56px 1fr;
   gap: 28px;
   position: relative;
   padding-bottom: 45px
}

.process-timeline-v2 article>span {
   width: 56px;
   height: 56px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   background: #fff;
   border: 1px solid #dbe6f7;
   color: #155eef;
   font-weight: 900;
   box-shadow: 0 12px 25px rgba(20, 64, 130, .1);
   z-index: 1
}

.process-timeline-v2 h3 {
   margin: 8px 0
}

.process-timeline-v2 p {
   color: #68758e;
   line-height: 1.75;
   max-width: 680px
}

.process-checklist {
   display: grid;
   gap: 15px
}

.check-card {
   display: flex;
   gap: 15px;
   align-items: flex-start;
   padding: 20px;
   border: 1px solid #e1e8f4;
   border-radius: 20px;
   background: #fff
}

.check-card>span {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #eaf3ff;
   color: #155eef;
   font-weight: 900
}

.check-card strong {
   display: block;
   margin-bottom: 4px
}

.check-card p {
   margin: 0;
   color: #68758e;
   line-height: 1.6;
   font-size: 14px
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

.error-page .centered {
   max-width: 900px;
   text-align: center;
   margin: 0 auto
}

.error-visual {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin: 0 auto 30px;
   color: #fff;
   font-size: 130px;
   font-weight: 900;
   line-height: 1
}

.error-orb {
   width: 105px;
   height: 105px;
   border-radius: 50%;
   background: radial-gradient(circle at 28% 22%, #fff, #65adff 24%, #6b43ed 67%);
   box-shadow: 0 25px 65px rgba(64, 122, 255, .4);
   animation: float 4s ease-in-out infinite
}

.centered-actions {
   justify-content: center
}

/* Phase 04 — blog, contact and quote */
.page-hero {
   position: relative;
   overflow: hidden;
   padding: 150px 0 125px;
   background: linear-gradient(135deg, #071b45 0%, #123b91 56%, #155eef 100%);
   color: #fff
}

.page-hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 50px;
   min-height: 330px;
   position: relative;
   z-index: 2
}

.page-hero h1 {
   font-size: clamp(46px, 6vw, 72px)
}

.page-hero h1 span {
   color: #69b0ff
}

.page-hero p {
   max-width: 610px;
   color: #d5e4ff;
   font-size: 16px
}

.page-hero-art,
.contact-art,
.quote-art {
   min-height: 330px;
   position: relative
}

.hero-orb,
.contact-orb,
.quote-ring {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 25%, #fff, #65adff 20%, #6941e7 66%, transparent 70%);
   filter: drop-shadow(0 25px 50px rgba(32, 69, 185, .35))
}

.hero-orb-one {
   width: 180px;
   height: 180px;
   right: 17%;
   top: 25px;
   animation: float 4.5s ease-in-out infinite
}

.hero-orb-two {
   width: 75px;
   height: 75px;
   left: 13%;
   bottom: 35px;
   animation: float 3.8s ease-in-out infinite reverse
}

.floating-panel {
   position: absolute;
   right: 0;
   bottom: 25px;
   padding: 24px 28px;
   border: 1px solid rgba(255, 255, 255, .22);
   background: rgba(255, 255, 255, .1);
   backdrop-filter: blur(16px);
   border-radius: 24px;
   font: 800 18px Manrope;
   box-shadow: 0 25px 55px rgba(0, 0, 0, .2);
   transform: rotate(-5deg)
}

.floating-panel small {
   display: block;
   font: 500 11px Inter;
   color: #cfe0ff;
   margin-top: 7px
}

.wave-dark {
   background: #fff
}

.featured-post {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 0;
   overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 30px;
   background: #fff;
   box-shadow: var(--shadow);
   margin-bottom: 55px
}

.featured-media {
   min-height: 410px;
   background: #edf4ff
}

.featured-media img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover
}

.featured-copy {
   padding: 48px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.featured-copy h2 {
   font-size: clamp(30px, 3.5vw, 48px)
}

.featured-copy h2 a,
.blog-card h3 a,
.article-content a {
   color: inherit;
   text-decoration: none
}

.featured-copy p {
   font-size: 15px;
   line-height: 1.8
}

.post-meta {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   color: #74809a;
   font-size: 12px;
   font-weight: 700;
   margin: 10px 0 22px
}

.blog-toolbar {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   align-items: center;
   margin-bottom: 30px
}

.blog-cats {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.blog-search {
   display: flex;
   align-items: center;
   gap: 9px;
   min-width: 250px;
   border: 1px solid #dbe5f5;
   border-radius: 999px;
   padding: 0 16px;
   color: #6c7a94
}

.blog-search input {
   border: 0;
   outline: 0;
   width: 100%;
   padding: 13px 0;
   background: transparent;
   font: inherit;
   color: var(--ink)
}

.blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.blog-card {
   border: 1px solid #e1e8f4;
   border-radius: 24px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 15px 40px rgba(20, 54, 105, .06);
   transition: .3s
}

.blog-card:hover {
   transform: translateY(-7px);
   box-shadow: 0 25px 55px rgba(20, 54, 105, .12)
}

.blog-media {
   display: block;
   height: 205px;
   background: #edf4ff;
   overflow: hidden
}

.blog-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .45s
}

.blog-card:hover .blog-media img {
   transform: scale(1.04)
}

.blog-card-body {
   padding: 24px
}

.blog-card h3 {
   font-size: 21px;
   margin: 6px 0 10px
}

.blog-card p {
   font-size: 13px;
   line-height: 1.75
}

.section-soft {
   background: var(--bg)
}

.newsletter-box {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 40px;
   padding: 45px;
   border-radius: 30px;
   background: linear-gradient(135deg, #eef5ff, #f3edff);
   border: 1px solid #dae5f7
}

.newsletter-box h2 {
   font-size: clamp(28px, 3vw, 42px)
}

.inline-form {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 10px;
   position: relative
}

.inline-form input[type=email] {
   width: 100%;
   border: 1px solid #d4e0f2;
   background: #fff;
   border-radius: 999px;
   padding: 14px 18px;
   outline: none
}

.inline-form .form-message {
   grid-column: 1/-1
}

.form-message {
   min-height: 20px;
   font-size: 13px;
   font-weight: 700;
   margin-top: 4px
}

.form-message.success {
   color: #12805c
}

.form-message.error {
   color: #c73b4a
}

.hp-field {
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important
}

.article-hero {
   padding: 155px 0 85px;
   background: linear-gradient(135deg, #071b45, #123b91 62%, #155eef);
   color: #fff
}

.article-head {
   max-width: 900px;
   text-align: center
}

.article-head h1 {
   font-size: clamp(40px, 5.8vw, 68px);
   margin: 12px auto 20px
}

.article-head p {
   max-width: 760px;
   margin: 0 auto;
   color: #d5e4ff;
   font-size: 17px;
   line-height: 1.75
}

.article-head .post-meta {
   justify-content: center;
   color: #b9cdf2
}

.article-layout {
   display: grid;
   grid-template-columns: minmax(0, 820px) 300px;
   gap: 60px;
   align-items: start;
   justify-content: center
}

.article-cover {
   width: 100%;
   display: block;
   border-radius: 28px;
   border: 1px solid #dce6f5;
   box-shadow: 0 25px 60px rgba(20, 54, 105, .12);
   margin-bottom: 45px
}

.article-body {
   font-size: 17px;
   line-height: 1.9;
   color: #34415d
}

.article-body h2 {
   font-size: 30px;
   color: var(--ink);
   margin-top: 42px
}

.article-body p {
   color: #52617b
}

.article-body ul,
.article-body ol {
   padding-left: 24px
}

.article-tags {
   margin-top: 35px
}

.article-aside {
   position: sticky;
   top: 105px;
   display: grid;
   gap: 18px
}

.aside-card {
   padding: 25px;
   border: 1px solid #e0e8f4;
   border-radius: 22px;
   background: #fff;
   box-shadow: 0 15px 35px rgba(20, 54, 105, .06)
}

.aside-card h3 {
   font-size: 22px
}

.aside-links {
   display: grid
}

.aside-links a {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 13px 0;
   border-bottom: 1px solid #edf1f7;
   color: #34415d;
   text-decoration: none;
   font-weight: 700;
   font-size: 13px
}

.contact-grid,
.quote-layout {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 70px;
   align-items: start
}

.contact-grid h2,
.quote-layout h2 {
   font-size: clamp(32px, 4vw, 50px)
}

.contact-list {
   display: grid;
   gap: 18px;
   margin-top: 35px
}

.contact-list>div {
   display: flex;
   gap: 15px;
   align-items: flex-start
}

.contact-list b {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: #edf4ff;
   color: var(--blue);
   font-size: 19px
}

.contact-list span {
   display: grid;
   gap: 3px
}

.contact-list strong {
   font-size: 13px
}

.contact-list a,
.contact-list span span {
   font-size: 14px;
   color: #68758e;
   text-decoration: none
}

.form-card {
   padding: 35px;
   border: 1px solid #dfe7f3;
   border-radius: 28px;
   background: #fff;
   box-shadow: 0 20px 55px rgba(20, 54, 105, .08)
}

.form-card h2 {
   font-size: 28px;
   margin-bottom: 8px
}

.stack-form {
   display: grid;
   gap: 16px
}

.stack-form label {
   display: grid;
   gap: 7px;
   color: #263451;
   font-size: 13px;
   font-weight: 800
}

.stack-form input,
.stack-form select,
.stack-form textarea {
   width: 100%;
   border: 1px solid #d7e2f2;
   background: #fbfdff;
   border-radius: 14px;
   padding: 13px 14px;
   font: 500 14px Inter;
   color: var(--ink);
   outline: 0;
   transition: .2s
}

.stack-form textarea {
   resize: vertical;
   min-height: 150px
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus {
   border-color: #7caeff;
   box-shadow: 0 0 0 4px #eaf2ff
}

.form-two {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.contact-device {
   position: absolute;
   left: 20%;
   top: 70px;
   width: 190px;
   height: 135px;
   border-radius: 25px;
   display: grid;
   place-items: center;
   background: linear-gradient(145deg, #fff, #dbe9ff);
   color: #155eef;
   font-size: 65px;
   box-shadow: 0 35px 65px rgba(0, 0, 0, .22);
   transform: rotate(-8deg)
}

.contact-orb {
   width: 150px;
   height: 150px;
   right: 18%;
   top: 30px
}

.contact-bubble {
   position: absolute;
   right: 0;
   bottom: 45px;
   padding: 15px 20px;
   border-radius: 18px;
   background: #fff;
   color: #14366d;
   font-weight: 800;
   box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
   transform: rotate(4deg)
}

.contact-bubble span {
   margin-left: 15px;
   color: #6c4dff
}

.quote-ring {
   width: 270px;
   height: 270px;
   right: 10%;
   top: 20px;
   background: none;
   border: 1px solid rgba(174, 210, 255, .5);
   box-shadow: 0 0 80px rgba(99, 128, 255, .22)
}

.quote-ring:before,
.quote-ring:after {
   content: "";
   position: absolute;
   border: 1px dashed rgba(180, 211, 255, .35);
   border-radius: 50%;
   inset: 35px
}

.quote-ring:after {
   inset: 80px
}

.quote-rocket {
   position: absolute;
   right: 26%;
   top: 105px;
   width: 95px;
   height: 95px;
   border-radius: 28px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, #6db6ff, #7750ff);
   font-size: 40px;
   transform: rotate(-25deg);
   box-shadow: 0 25px 55px rgba(0, 0, 0, .24);
   animation: float 3.5s ease-in-out infinite
}

.quote-card {
   position: absolute;
   right: 0;
   bottom: 35px;
   padding: 18px 22px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .11);
   border: 1px solid rgba(255, 255, 255, .25);
   backdrop-filter: blur(14px);
   font-size: 10px;
   letter-spacing: .12em;
   color: #bdd5ff
}

.quote-card strong {
   display: block;
   color: #fff;
   margin-top: 6px;
   letter-spacing: .03em
}

.quote-points {
   display: grid;
   gap: 15px;
   margin-top: 35px
}

.quote-points>div {
   display: flex;
   gap: 14px;
   align-items: flex-start
}

.quote-points b {
   width: 42px;
   height: 42px;
   flex: none;
   border-radius: 13px;
   display: grid;
   place-items: center;
   background: #edf4ff;
   color: #155eef;
   font-size: 12px
}

.quote-points span {
   display: grid;
   gap: 3px;
   font-size: 13px;
   color: #68758e
}

.quote-points strong {
   color: var(--ink)
}

.centered {
   text-align: center;
   max-width: 800px;
   margin: 0 auto
}

/* PHASE 06 — Corafter 3D visual system */
.hero-art-3d {
   min-height: 500px;
   perspective: 1200px
}

.hero-3d-image {
   position: absolute;
   inset: -25px -40px -35px -20px;
   width: calc(100% + 60px);
   height: calc(100% + 70px);
   object-fit: contain;
   filter: drop-shadow(0 28px 45px rgba(4, 18, 55, .22));
   animation: corafterFloat 7s ease-in-out infinite
}

.floating-object {
   position: absolute;
   width: 58px;
   height: 58px;
   object-fit: contain;
   filter: drop-shadow(0 15px 22px rgba(13, 46, 110, .25));
   animation: corafterFloat 5s ease-in-out infinite
}

.fo-sphere {
   left: 3%;
   top: 16%;
   animation-delay: -1s
}

.fo-cube {
   right: 4%;
   top: 24%;
   width: 46px;
   height: 46px;
   animation-delay: -2.2s
}

.fo-ring {
   left: 7%;
   bottom: 8%;
   width: 72px;
   height: 72px;
   animation-delay: -3.4s
}

.page-hero-art-3d {
   width: min(520px, 46vw);
   height: 420px;
   position: absolute;
   right: 4%;
   top: 70px;
   display: grid;
   place-items: center
}

.page-hero-art-3d img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: drop-shadow(0 30px 40px rgba(3, 18, 52, .28));
   animation: corafterFloat 7s ease-in-out infinite
}

.hero-float-dot {
   position: absolute;
   border-radius: 50%;
   background: linear-gradient(135deg, #79caff, #6c4dff);
   box-shadow: 0 16px 30px rgba(47, 128, 255, .28);
   animation: corafterFloat 4.5s ease-in-out infinite
}

.dot-a {
   width: 24px;
   height: 24px;
   right: 5%;
   top: 12%
}

.dot-b {
   width: 15px;
   height: 15px;
   left: 7%;
   bottom: 12%;
   animation-delay: -1.8s
}

.service-3d-visual {
   min-height: 420px;
   display: grid;
   place-items: center;
   border-radius: 32px;
   background: radial-gradient(circle at 50% 45%, #eef5ff 0, #f8fbff 45%, transparent 72%);
   overflow: hidden
}

.service-3d-visual img {
   width: 100%;
   max-width: 620px;
   height: auto;
   filter: drop-shadow(0 30px 45px rgba(8, 39, 89, .15));
   animation: corafterFloat 7s ease-in-out infinite
}

.portfolio-art-3d {
   display: grid !important;
   place-items: center;
   position: relative
}

.portfolio-art-3d>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: drop-shadow(0 30px 45px rgba(3, 18, 52, .28));
   animation: corafterFloat 7s ease-in-out infinite
}

.contact-art-3d,
.quote-art-3d {
   display: grid;
   place-items: center
}

.contact-art-3d>img,
.quote-art-3d>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: drop-shadow(0 25px 40px rgba(3, 18, 52, .2));
   animation: corafterFloat 7s ease-in-out infinite
}

.hero-art-3d:after,
.page-hero-art-3d:after {
   content: "";
   position: absolute;
   inset: 12% 8% 8%;
   background: radial-gradient(circle, rgba(102, 91, 255, .18), transparent 65%);
   z-index: -1;
   pointer-events: none
}

@keyframes corafterFloat {

   0%,
   100% {
      transform: translate3d(0, 0, 0) rotate(-1deg)
   }

   50% {
      transform: translate3d(0, -13px, 0) rotate(1deg)
   }
}

@media(max-width:900px) {
   .page-hero-art-3d {
      position: relative;
      right: auto;
      top: auto;
      width: min(620px, 100%);
      height: 330px;
      margin: 15px auto 0
   }

   .hero-3d-image {
      inset: -10px;
      width: 100%;
      height: 100%
   }

   .hero-art-3d {
      min-height: 390px
   }

   .floating-object {
      display: none
   }
}

@media(max-width:560px) {
   .hero-art-3d {
      min-height: 310px
   }

   .page-hero-art-3d {
      height: 280px
   }

   .service-3d-visual {
      min-height: 300px
   }

   .hero-3d-image {
      width: 110%;
      max-width: none;
      transform: translateX(-5%)
   }
}

@media(prefers-reduced-motion:reduce) {

   .hero-3d-image,
   .floating-object,
   .page-hero-art-3d img,
   .service-3d-visual img,
   .portfolio-art-3d>img,
   .contact-art-3d>img,
   .quote-art-3d>img {
      animation: none !important
   }
}