:root {
  --navy: #061124;
  --navy-2: #091a35;
  --navy-3: #0c2447;
  --blue: #0869f9;
  --blue-2: #00b8ff;
  --text: #101c33;
  --muted: #64728a;
  --light: #f5f8ff;
  --line: #e2eaf4;
  --white: #fff;
  --font-display: 'Space Grotesk', 'Be Vietnam Pro', Arial, sans-serif;
  --font-body: 'Be Vietnam Pro', Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font-family:var(--font-body);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.modal-open,body.nav-open{overflow:hidden}
::selection{background:#1186ff;color:white}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}img{display:block}
svg:not(.svg-sprite){width:22px;height:22px;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;fill:none}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #52bdfd;outline-offset:4px}
.container{width:min(100% - 96px,1250px);margin-inline:auto}
.section-pad{padding:128px 0}
.section-dark{background:var(--navy);color:#fff}
.section-light{background:#fff}
.blue-type{color:#086bf8}
.text-gradient{background:linear-gradient(120deg,#2d81ff 9%,#53c8ff 56%,#c2efff 97%);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:white;color:black;padding:13px 18px;border-radius:8px}
.skip-link:focus{top:16px}
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:201;pointer-events:none}
.reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#0968fb,#78e3ff)}
.cursor-glow{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;background:radial-gradient(420px circle at var(--cursor-x,50%) var(--cursor-y,50%),rgba(7,112,242,.08),transparent 65%)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:#3b5b82;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:2.6px;line-height:1.7;text-transform:uppercase}
.eyebrow-num{color:#086cfb}
.light-eyebrow{color:#b1c8e8}.light-eyebrow .eyebrow-num{color:#42bbff}
.section-title{margin:25px 0 0;font-family:var(--font-display);font-size:clamp(40px,5.1vw,77px);line-height:1.1;letter-spacing:-4px;font-weight:700}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:54px}
.section-head>p,.section-head>div:last-child>p{width:min(100%,310px);font-size:15px;line-height:1.95;color:#6d7a90;margin:0 0 7px}
.section-head.dark-head>div:last-child>p{color:#a3b5d1}
.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:17px 24px;min-height:54px;border-radius:100px;border:1px solid transparent;font-weight:700;font-size:13px;transition:background .25s,transform .25s,border-color .25s,box-shadow .25s;color:inherit;white-space:nowrap}
.button svg{width:17px;height:17px;stroke-width:2}
.button:hover{transform:translateY(-3px)}
.button-primary{background:linear-gradient(105deg,#045de9,#0e94ff);color:white;box-shadow:0 8px 36px rgba(4,89,243,.28)}
.button-primary:hover{box-shadow:0 13px 44px rgba(4,120,255,.4);background:linear-gradient(105deg,#087bfa,#14b5ff)}
.button-outline{background:rgba(255,255,255,.04);border-color:rgba(221,238,255,.25);color:#fff}
.button-outline:hover{background:rgba(255,255,255,.1);border-color:#6aaeff}
.button-light{background:#fff;color:#071b39}.button-light:hover{background:#e4f4ff}
.button-sm{padding:12px 20px;min-height:44px;font-size:12px}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.1px;color:#0868ea;margin-top:14px}
.text-link svg{width:16px;height:16px;transition:transform .2s}
.text-link:hover svg{transform:translate(3px,-3px)}

/* Navigation */
.site-header{position:fixed;top:0;left:0;right:0;z-index:150;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid rgba(255,255,255,.08)}
.site-header.is-scrolled,.site-header.is-open{background:rgba(4,13,30,.91);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:rgba(145,192,249,.14);box-shadow:0 12px 45px rgba(0,0,0,.17)}
.nav-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.brand>img{height:45px;width:45px;object-fit:contain;filter:drop-shadow(0 1px 13px rgba(1,99,255,.24))}
.brand>span{font-family:var(--font-display);color:#fff;font-size:23px;font-weight:700;letter-spacing:-1.25px;line-height:1}
.brand>span>span{color:#57b6ff}
.brand small{display:block;margin-top:5px;font-size:8px;color:#739dce;letter-spacing:3px;font-weight:700}
.nav-links{display:flex;align-items:center;gap:27px}
.nav-link{position:relative;color:#bfcee5;font-size:12px;font-weight:600;transition:color .22s}
.nav-link:hover,.nav-link.is-active{color:white}
.nav-link::after{content:'';position:absolute;left:0;bottom:-10px;width:0;height:2px;background:#34b5ff;transition:width .28s var(--ease)}
.nav-link:hover::after,.nav-link.is-active::after{width:100%}
.mobile-contact{display:none}
.menu-toggle{display:none}

/* Hero */
.hero{position:relative;min-height:810px;height:min(920px,100svh);max-height:1010px;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:100px 0 70px}
#particle-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7;pointer-events:none;z-index:-1}
.hero::before{content:'';position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 79% 46%,rgba(9,84,195,.31),transparent 39%),radial-gradient(ellipse at 35% 10%,rgba(0,77,187,.19),transparent 36%),linear-gradient(110deg,#061124 20%,#07162d 65%,#071c39)}
.hero-mesh{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(122,164,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(122,164,224,.045) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(90deg,transparent 1%,#000 70%)}
.hero-mesh::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#061124 15%,transparent 90%)}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:20px;align-items:center;position:relative;z-index:1}
.hero-copy{position:relative;z-index:3}
.live-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#27c7ff;box-shadow:0 0 0 5px rgba(33,160,253,.1),0 0 19px #19bbff;animation:pulse 2s infinite}
.hero h1{font-family:var(--font-display);font-size:clamp(56px,6.8vw,105px);letter-spacing:-6.2px;line-height:1.04;font-weight:700;margin:30px 0 26px}
.hero-description{color:#b0bfd6;line-height:2;font-size:15px;max-width:570px}
.hero-description b{color:#e0eeff}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-trust{display:flex;align-items:center;gap:19px;color:#83a4cd;font:700 10px var(--font-display);letter-spacing:3px;margin-top:65px}
.trust-line{height:1px;width:45px;background:#3475ce}.hero-trust i{font-style:normal;color:#2a9fff;margin-inline:6px}
.hero-visual{position:relative;width:100%;height:560px;perspective:900px;user-select:none}
.hero-glow{position:absolute;width:80%;aspect-ratio:1;left:12%;top:14%;background:radial-gradient(circle,rgba(2,120,255,.26),rgba(2,77,203,.11) 42%,transparent 67%);filter:blur(15px);animation:glowBreathe 5s ease-in-out infinite}
.hero-orbit{position:absolute;inset:12% 5%;border:1px solid rgba(81,147,237,.13);border-radius:50%;transform:rotate(-24deg) scaleY(.67);animation:orbitSpin 28s linear infinite}
.orbit-b{inset:23% 1%;border-color:rgba(85,184,255,.17);transform:rotate(54deg) scaleY(.68);animation-duration:35s;animation-direction:reverse}
.orb-core{position:absolute;left:22%;top:15%;width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(98,184,255,.19),rgba(7,31,74,.5) 48%,rgba(6,22,52,.87) 76%);border:1px solid rgba(105,180,250,.22);box-shadow:inset 0 0 62px rgba(26,108,255,.11),0 0 80px rgba(18,125,255,.14),0 24px 80px rgba(0,0,0,.35);display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
.orb-core::before{content:'';position:absolute;inset:5%;border-radius:50%;border:1px dashed rgba(109,204,255,.14);animation:orbitSpin 22s linear infinite}
.orb-core::after{content:'';position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,rgba(6,94,211,.14),transparent 64%);border:1px solid rgba(14,121,255,.13)}
.orb-shine{position:absolute;inset:0;border-radius:50%;background:linear-gradient(138deg,rgba(255,255,255,.08),transparent 36%);pointer-events:none}
.hero-logo-mark{position:relative;z-index:2;width:79%;height:79%;object-fit:contain;filter:drop-shadow(0 24px 35px rgba(0,55,180,.55));animation:floatBrand 7s ease-in-out infinite}
.float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:14px 17px;border:1px solid rgba(148,194,255,.19);border-radius:17px;background:rgba(11,33,73,.68);box-shadow:0 18px 40px rgba(0,0,0,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:white;animation:cardFloat 6s ease-in-out infinite}
.float-card b{font:700 10px var(--font-display);letter-spacing:1.3px;display:block}
.float-card small{display:block;color:#90abc9;font-size:9px;margin-top:4px}
.card-youtube{left:0;top:15%;animation-delay:-1s}
.mini-icon{display:grid;place-items:center;width:36px;height:29px;border-radius:9px;background:#fa2542}
.mini-icon svg{width:19px;height:19px;fill:#fff;stroke:#fff}
.status-pill{font:700 9px var(--font-display);color:#87d7ff;background:rgba(24,117,201,.21);border-radius:30px;padding:6px 9px;margin-left:12px}
.card-facebook{right:-5%;bottom:20%;animation-delay:-2.5s}
.fb-bubble{font:bold 29px Arial;display:grid;place-items:center;width:34px;height:34px;background:#196cf2;border-radius:50%}
.card-chart{display:block;width:240px;left:-5%;bottom:8%;padding:17px 17px 12px;animation-delay:-3.4s}
.chart-title{display:flex;justify-content:space-between;font:700 10px var(--font-display);color:#89abcf;letter-spacing:1px}
.chart-title b{color:#fff}.chart-spark{font-size:20px;color:#4bbcff;margin-top:-5px}
.card-chart svg{height:82px;width:100%;display:block;margin:5px auto 0;overflow:visible;stroke:none}
.chart-disclaimer{font:600 8px var(--font-display);color:#7b9cbe;letter-spacing:1px}
.orb-mini{position:absolute;background:#1485fa;box-shadow:0 0 19px #0b6bfa;border-radius:8px;transform:rotate(30deg)}
.orb-mini.one{width:15px;height:15px;left:20%;top:8%;animation:cardFloat 4s ease infinite}
.orb-mini.two{width:8px;height:8px;right:10%;top:20%;animation:cardFloat 3s -1s ease infinite}
.orb-mini.three{width:12px;height:12px;right:23%;bottom:7%;animation:cardFloat 5s -2s ease infinite}
.scroll-hint{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:15px;color:#a7c4e7;font:700 9px var(--font-display);letter-spacing:2px}
.scroll-mouse{width:23px;height:37px;border-radius:13px;border:1px solid #446388;display:flex;justify-content:center;padding-top:7px}
.scroll-mouse i{height:8px;width:2px;background:#6ac9ff;border-radius:3px;animation:scrollDot 1.8s ease infinite}
.hero-bottom-line{position:absolute;bottom:0;height:1px;left:0;right:0;background:linear-gradient(90deg,transparent,#1359a0,transparent)}

/* Marquee */
.marquee-strip{background:#096afa;color:white;padding:21px 0;overflow:hidden}
.marquee-track{display:flex;gap:31px;align-items:center;white-space:nowrap;width:max-content;animation:marquee 35s linear infinite}
.marquee-track>span{font:700 17px var(--font-display);letter-spacing:1px}.marquee-track i{font-size:19px;font-style:normal;opacity:.58}

/* About */
.about{position:relative;overflow:hidden}
.about::before{content:'B';position:absolute;right:-20px;top:20px;font:700 540px var(--font-display);color:#f5f8fd;line-height:1;pointer-events:none}
.about-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.23fr .77fr;gap:75px;align-items:end;margin-bottom:60px}
.about-description p{font-size:15px;line-height:2.05;color:#65738a;margin:0 0 21px}
.about-feature-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-box{padding:35px 31px 32px;border-radius:22px;background:#f6f9ff;border:1px solid #e8eef7;min-height:270px;transition:transform .3s,box-shadow .3s,border-color .3s}
.feature-box:hover{transform:translateY(-7px);border-color:#c9dcff;box-shadow:0 18px 44px rgba(11,64,135,.09)}
.feature-number{font:700 12px var(--font-display);color:#095cef}.feature-number span{color:#acbdd2}
.feature-icon{width:41px!important;height:41px!important;display:block;color:#106aff;margin:27px 0 17px}
.feature-box h3{font:700 20px var(--font-display);letter-spacing:-.6px;margin:0 0 10px}
.feature-box p{font-size:12px;line-height:1.9;color:#708095;margin:0}

/* Services */
.services{background:#f5f8fd}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.service-card{border:1px solid #e0e8f4;background:white;border-radius:24px;padding:25px;overflow:hidden;position:relative;isolation:isolate;transition:border-color .3s,box-shadow .3s;transform-style:preserve-3d}
.service-card:hover{border-color:#bad7ff;box-shadow:0 20px 45px rgba(28,87,170,.08)}
.service-feature{grid-column:span 2;min-height:480px;padding:30px}
.service-top{display:flex;justify-content:space-between;align-items:center;color:#708199;font:700 10px var(--font-display);letter-spacing:1.5px}
.service-top svg{height:18px;width:18px;color:#226aea}
.service-visual{height:265px;position:relative;display:grid;place-items:center;overflow:hidden}
.youtube-visual::before,.facebook-visual::before{content:'';position:absolute;inset:10% 5%;background:radial-gradient(ellipse,#d8ebff,transparent 67%)}
.play-plate{width:170px;height:122px;border-radius:31px;background: linear-gradient(140deg, #FF4444, #FF0000 80%);box-shadow:16px 22px 35px rgba(255, 0, 0, 0.25),inset 0 6px 12px rgba(255, 255, 255, 0.29);display:grid;place-items:center;transform:rotate(-18deg) skew(3deg,4deg);animation:floatBrand 6s ease-in-out infinite}
.play-plate svg{height:76px;width:76px;fill:white;stroke:none;filter:drop-shadow(0 4px 5px rgba(0,62,148,.2))}
.visual-satellite{position:absolute;background:linear-gradient(135deg,#80d2ff,#1173ff);border-radius:7px;transform:rotate(24deg);box-shadow:0 10px 18px rgba(13,113,236,.2)}
.satellite-1{width:27px;height:27px;top:27px;left:23%}.satellite-2{width:17px;height:17px;top:75px;right:18%}.satellite-3{width:12px;height:12px;bottom:21px;left:25%}
.visual-gridline{position:absolute;inset:20px;background:radial-gradient(circle at center,transparent 42%,rgba(26,112,243,.08) 42.3%,transparent 43%);border:1px solid rgba(14,101,232,.045);border-radius:50%}
.facebook-orbit{position:relative;z-index:1;display:grid;place-items:center;width:145px;height:145px;border-radius:36px;transform:rotate(-14deg);background:linear-gradient(145deg,#58bdff,#0053e4);color:white;font:bold 132px Arial;line-height:1;padding-top:10px;box-shadow:16px 18px 36px rgba(0,76,194,.22);animation:floatBrand 6s -2s ease-in-out infinite}
.bubble{position:absolute;display:grid;place-items:center;border-radius:18px;background:#fff;color:#0964f3;box-shadow:0 11px 27px rgba(0,82,169,.13);font-size:22px}
.bubble-1{width:56px;height:56px;left:16%;top:24%;color:#fa4370;transform:rotate(16deg)}
.bubble-2{width:46px;height:46px;right:17%;bottom:20%;transform:rotate(-20deg)}
.bubble-3{width:25px;height:25px;right:23%;top:14%;font-size:10px}
.service-feature h3{font:700 24px var(--font-display);letter-spacing:-.9px;margin:2px 0 9px}
.service-feature p,.service-small p{font-size:12px;line-height:2;color:#6e7d93;margin:0}
.service-feature p{max-width:390px}
.service-tags{display:block;margin-top:25px;color:#1470e5;font:700 10px var(--font-display);letter-spacing:1.4px}
.service-tags i{font-style:normal;color:#9caecc;padding:0 6px}
.service-small{grid-column:span 1;min-height:270px}
.small-service-icon{width:68px;height:68px;border-radius:19px;background:linear-gradient(145deg,#e0f1ff,#f6f9ff);display:grid;place-items:center;color:#0b6cf3;margin:36px 0 22px}
.small-service-icon svg{width:34px;height:34px;stroke-width:1.6}
.service-small h3{font:700 17px var(--font-display);letter-spacing:-.5px;margin:0 0 10px}

/* Portfolio */
.work{background:#061124;position:relative;overflow:hidden}
.work::before{content:'';position:absolute;right:-15%;top:5%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,107,235,.15),transparent 60%);pointer-events:none}
.demo-disclosure{display:block;color:#83a3c9;font-size:10px;line-height:1.7;margin-top:15px;max-width:325px}
.filter-tabs{display:flex;align-items:center;gap:10px;margin-bottom:34px;flex-wrap:wrap}
.filter-tab{background:rgba(255,255,255,.04);border:1px solid rgba(115,164,224,.19);color:#a6bedb;padding:12px 18px;font-size:12px;font-weight:600;border-radius:100px;transition:.25s}
.filter-tab:hover{border-color:#51b9ff;color:white}.filter-tab.is-active{background:#0c74f8;color:#fff;border-color:#0c74f8}
.filter-tab span{opacity:.55;margin-left:6px;font-family:var(--font-display);font-size:10px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.portfolio-card{display:block;background:transparent;color:white;border:0;padding:0;text-align:left;min-width:0;cursor:pointer}
.portfolio-card.is-hidden{display:none}
.portfolio-art{height:300px;position:relative;overflow:hidden;border:1px solid rgba(129,180,247,.17);border-radius:22px;isolation:isolate;transition:border-color .3s}
.portfolio-card:hover .portfolio-art{border-color:#5ba9ff}
.portfolio-art::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.portfolio-meta{display:flex;justify-content:space-between;align-items:center;padding:19px 5px 11px;gap:10px}
.portfolio-meta b{font:700 17px var(--font-display);letter-spacing:-.4px;display:block}
.portfolio-meta small{display:block;color:#7e9ab9;font-size:11px;margin-top:8px}
.portfolio-arrow{border:1px solid rgba(129,184,255,.23);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;transition:background .25s,transform .25s;flex-shrink:0}
.portfolio-arrow svg{width:18px;height:18px}
.portfolio-card:hover .portfolio-arrow{background:#167ffc;transform:rotate(45deg)}
.art-youtube{background:radial-gradient(circle at 65% 30%,#1852ba 0,#071f56 52%,#070f2b 100%)}
.art-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 21px,rgba(151,195,255,.045) 22px 23px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(151,195,255,.045) 24px 25px)}
.art-ring{position:absolute;left:51%;top:46%;width:315px;height:315px;border:1px solid rgba(105,199,255,.34);border-radius:50%;transform:translate(-50%,-50%) rotate(-26deg) scaleY(.7)}
.art-ring.ring-2{width:235px;height:235px;border-color:rgba(154,215,255,.29);transform:translate(-50%,-50%) rotate(56deg) scaleY(.7)}
.art-play{position:absolute;top:37%;left:51%;transform:translate(-50%,-50%) rotate(-12deg);width:114px;height:87px;border-radius:25px;background:linear-gradient(130deg,#00b5ff,#075be8);display:grid;place-items:center;box-shadow:9px 18px 30px rgba(0,0,0,.2)}
.art-play svg{width:56px;height:56px;fill:white;stroke:none}
.art-supertext{position:absolute;left:7%;bottom:18px;font:700 clamp(31px,4vw,55px)/.95 var(--font-display);letter-spacing:-3px;color:rgba(240,249,255,.96)}
.art-social{background:radial-gradient(circle at 65% 60%,#50cbff,#137cec 56%,#0652cc)}
.art-phone{position:absolute;left:50%;top:50%;width:157px;height:243px;border-radius:23px;transform:translate(-50%,-48%) rotate(-15deg);background:#f8fbff;border:7px solid #183874;box-shadow:23px 22px 30px rgba(2,37,118,.3);padding:10px}
.phone-top{height:6px;width:40px;margin:0 auto 10px;border-radius:7px;background:#1e3b78}
.phone-photo{height:145px;border-radius:7px;background:linear-gradient(130deg,#112d6a,#075eff,#6bddff);display:flex;align-items:center;justify-content:center}
.phone-photo span{font:700 24px/1.05 var(--font-display);letter-spacing:-1.3px;text-align:center;color:white}
.phone-lines{display:grid;gap:7px;margin-top:11px}.phone-lines i{display:block;height:5px;border-radius:4px;background:#c6d7ed}.phone-lines i:nth-child(2){width:80%}.phone-lines i:nth-child(3){width:56%}
.art-floating-like{position:absolute;top:25px;right:24%;font-size:37px;background:white;color:#f34b72;border-radius:21px;padding:9px 20px;transform:rotate(17deg);box-shadow:0 13px 27px rgba(7,55,153,.25)}
.art-thumbnail{background:linear-gradient(135deg,#03132e,#0059de 50%,#27cfff)}
.thumb-pill{position:absolute;left:26px;top:26px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);padding:9px 14px;border-radius:25px;font:700 10px var(--font-display);letter-spacing:2px}
.thumb-letter{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-14deg);font:700 160px/.9 var(--font-display);letter-spacing:-35px;color:white;text-shadow:8px 17px 0 #032c84,12px 26px 25px rgba(0,0,0,.2);white-space:nowrap}.thumb-letter span{color:#65dfff}
.thumb-glint{position:absolute;right:14%;top:17%;font-size:68px;color:#aeefff}
.thumb-caption{position:absolute;bottom:28px;left:28px;font:700 34px var(--font-display);letter-spacing:-1.5px}
.art-brand{background:radial-gradient(ellipse at 50% 55%,#134b9d,#061b40 64%,#051024);display:grid;place-items:center}
.brand-art-back{position:absolute;width:235px;height:235px;border:1px solid rgba(78,176,255,.3);border-radius:44px;transform:rotate(22deg);box-shadow:inset 0 0 45px rgba(43,118,249,.1);animation:brandTurn 16s linear infinite}
.art-brand img{width:165px;position:relative;filter:drop-shadow(0 12px 20px rgba(7,57,154,.9));transition:transform .4s}
.portfolio-card:hover .art-brand img{transform:scale(1.1) rotate(-7deg)}
.art-brand span{position:absolute;bottom:25px;left:26px;font:700 12px var(--font-display);letter-spacing:3px;color:#9bd0ff}
.art-campaign{background:#e9f2ff;color:#05256d}
.campaign-grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,88,206,.07) 1px,transparent 1px),linear-gradient(rgba(0,88,206,.07) 1px,transparent 1px);background-size:31px 31px}
.art-campaign>span{position:absolute;z-index:2;left:7%;top:17%;font:700 clamp(42px,5vw,67px)/1.07 var(--font-display);letter-spacing:-3.5px}.end-dot{color:#078aff}
.campaign-square{position:absolute;border-radius:30px;background:linear-gradient(130deg,#0994ff,#0553df);width:160px;height:160px;right:8%;bottom:-60px;transform:rotate(25deg);box-shadow:0 18px 30px rgba(0,82,197,.18)}
.campaign-square.sq-2{width:64px;height:64px;bottom:46%;right:9%;background:#72d0ff;border-radius:15px;transform:rotate(-20deg)}
.art-content{background:linear-gradient(135deg,#143768,#091832)}
.content-stars{position:absolute;right:9%;top:5%;font-size:140px;color:#1593ff;opacity:.65}
.content-panels{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);display:flex;align-items:center;gap:13px}
.content-panels>div{width:104px;height:170px;padding:15px;border-radius:13px;border:1px solid rgba(154,212,255,.25);background:linear-gradient(160deg,#1058be,#0c2e65);box-shadow:9px 13px 17px rgba(0,0,0,.18)}
.content-panels>div:nth-child(2){transform:translateY(-19px);background:linear-gradient(140deg,#23bafc,#0468f3)}
.content-panels>div:nth-child(3){transform:translateY(13px)}
.content-panels span{font:700 27px var(--font-display);color:white}
.content-panels i{display:block;height:8px;background:rgba(232,245,255,.35);border-radius:7px;margin-top:19px}.content-panels i:last-child{width:60%;margin-top:10px}
.content-type{position:absolute;bottom:23px;left:26px;font:700 14px var(--font-display);letter-spacing:2px;color:#a3d6ff}

/* Process */
.process{background:#fff}
.process-list{border-top:1px solid #dbe5f0}
.process-step{display:grid;grid-template-columns:90px 1fr 55px;align-items:center;gap:15px;border-bottom:1px solid #dbe5f0;padding:34px 10px;transition:padding-left .3s,background .3s}
.process-step:hover{padding-left:27px;background:#f8fbff}
.process-index{font:700 20px var(--font-display);color:#086cf2}
.process-detail h3{font:700 clamp(22px,2.45vw,34px) var(--font-display);letter-spacing:-1.25px;margin:0 0 7px}
.process-detail p{color:#728197;font-size:12px;line-height:1.8;margin:0}
.process-symbol{font:700 28px var(--font-display);color:#075de9;justify-self:end}

/* CSS-based motion demo */
.motion-section{background:radial-gradient(ellipse at 75% 52%,#0b2b62,#07172e 60%,#061124)}
.motion-layout{display:grid;grid-template-columns:.83fr 1.17fr;gap:65px;align-items:center}
.motion-layout .section-title{font-size:clamp(43px,4.8vw,67px)}
.motion-layout p{color:#a4bad6;line-height:2;font-size:14px;max-width:410px;margin:27px 0 29px}
.motion-stage{height:420px;position:relative;overflow:hidden;border:1px solid rgba(116,177,249,.15);border-radius:28px;background:radial-gradient(circle at center,rgba(33,101,201,.25),rgba(5,21,48,.9) 62%),linear-gradient(60deg,#08172d,#0b244a);display:grid;place-items:center;isolation:isolate}
.motion-stage::before{content:'';inset:0;position:absolute;background-image:linear-gradient(rgba(101,166,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(101,166,239,.06) 1px,transparent 1px);background-size:35px 35px}
.motion-ring{position:absolute;border:1px solid rgba(82,174,255,.28);border-radius:50%;width:330px;height:330px;animation:orbitSpin 19s linear infinite}
.motion-ring.mr-two{width:250px;height:250px;animation-direction:reverse;animation-duration:16s;border-style:dashed;border-color:rgba(112,210,255,.32)}
.motion-ring.mr-three{width:400px;height:160px;transform:rotate(-28deg);animation:brandTurn 16s ease-in-out infinite alternate}
.motion-stage>img{position:relative;z-index:1;width:180px;filter:drop-shadow(0 24px 27px rgba(1,78,205,.5));animation:floatBrand 5.5s ease-in-out infinite}
.motion-star{position:absolute;font-size:30px;color:#68d6ff;animation:twinkle 3s ease-in-out infinite}.star-a{top:15%;left:18%}.star-b{right:18%;bottom:27%;animation-delay:-1.5s}.star-c{right:29%;top:14%;font-size:16px;animation-delay:-2s}
.motion-caption{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);font:700 14px var(--font-display);letter-spacing:3px;white-space:nowrap}
.motion-label{position:absolute;left:25px;top:22px;font:700 9px var(--font-display);letter-spacing:2px;color:#81b4e9}
.motion-stage.is-paused *,.motion-stage.is-paused .motion-ring,.motion-stage.is-paused img{animation-play-state:paused!important}

/* Contact */
.contact{background:#f5f8ff;overflow:hidden}
.contact-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:100px;align-items:start}
.contact-copy .section-title{font-size:clamp(42px,4.8vw,74px)}
.contact-copy>p{line-height:2.05;font-size:14px;color:#6d7d93;max-width:430px;margin:31px 0 46px}
.contact-statement{display:flex;align-items:center;gap:15px;font:700 11px var(--font-display);color:#176dec;letter-spacing:1.5px}
.contact-line{width:37px;height:1px;background:#176dec}
.contact-form{background:white;border:1px solid #e2eaf4;border-radius:25px;padding:39px;box-shadow:0 20px 55px rgba(36,91,161,.07)}
.form-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:26px}
.form-title h3{font:700 22px var(--font-display);margin:0;letter-spacing:-.7px}
.form-title span{color:#98b1d0;font:700 11px var(--font-display)}
.form-row{margin-bottom:21px}
.form-row label{display:block;font-size:12px;font-weight:700;margin-bottom:10px;color:#253851}.form-row label>span{color:#137af6}
.form-row input,.form-row select,.form-row textarea{display:block;width:100%;outline:0;border-radius:12px;padding:14px 16px;color:#142641;border:1px solid #dfE8f2;background:#f9fbff;transition:border-color .25s,box-shadow .25s;resize:vertical;font-size:13px}
.form-row input::placeholder,.form-row textarea::placeholder{color:#9aabc0}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:#2788fa;box-shadow:0 0 0 3px rgba(24,128,255,.1)}
.form-submit{width:100%;margin-top:5px}
.form-notice{color:#8290a5;font-size:10px;line-height:1.8;margin:15px 2px 0}
.contact-result{margin-top:27px;padding:20px;background:#ecf6ff;border:1px solid #bfdffb;border-radius:15px}
.contact-result>label{display:block;font-weight:700;font-size:12px;margin-bottom:9px;color:#19548e}
.contact-result textarea{display:block;width:100%;resize:vertical;border:1px solid #c4ddf5;border-radius:9px;padding:12px;background:#fff;color:#123759;font-size:12px;line-height:1.65}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.button-copy,.button-mail{background:#0c65ec;color:white;padding:10px 15px;min-height:42px;font-size:11px}
.button-mail{background:#d9eaff;color:#15487c}

/* Footer */
.site-footer{background:#061124;overflow:hidden;padding:72px 0 0}
.footer-top{display:flex;justify-content:space-between;gap:40px}
.footer-brand>img{width:47px;height:47px}
.footer-top p{color:#8ea9cc;font-size:12px;line-height:2.1;margin:23px 0 0}
.footer-nav{display:flex;gap:90px;padding-top:9px}
.footer-nav>div{display:grid;gap:15px;align-content:start}
.footer-nav b{font:700 12px var(--font-display);margin-bottom:6px}.footer-nav a{font-size:12px;color:#91a9ca;transition:color .2s}.footer-nav a:hover{color:#51baff}
.footer-big-type{margin:75px 0 20px;position:relative;font:700 clamp(68px,13vw,188px)/.8 var(--font-display);letter-spacing:-11px;color:#fff;white-space:nowrap}
.footer-big-type span{color:#187cf6}
.footer-big-type i{font-size:.28em;position:absolute;right:0;top:-18%;font-style:normal;color:#36adff;letter-spacing:0}
.footer-bottom{border-top:1px solid rgba(115,167,230,.15);padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#7893b7;font:600 10px var(--font-display);letter-spacing:.4px}
.footer-bottom a{color:#a9ccf7}.footer-bottom a:hover{color:white}

/* Modal and toast */
.modal-backdrop{position:fixed;inset:0;z-index:300;background:rgba(2,10,24,.8);backdrop-filter:blur(11px);display:grid;place-items:center;padding:20px}
.modal-panel{width:min(100%,510px);background:white;color:#122542;border-radius:26px;padding:43px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.32);animation:modalPop .3s var(--ease)}
.modal-panel h2{font:700 33px var(--font-display);letter-spacing:-1px;line-height:1.12;margin:17px 0}
.modal-panel>p{color:#647790;font-size:13px;line-height:2}.modal-panel .modal-notice{font-size:11px;background:#f0f6fe;padding:13px 14px;border-radius:10px;margin:18px 0 24px}
.modal-close{position:absolute;right:20px;top:18px;border:0;background:#edf4ff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;color:#125ab5}.modal-close svg{height:17px;width:17px}
.toast{position:fixed;z-index:400;bottom:25px;left:50%;max-width:min(90vw,420px);transform:translate(-50%,110px);opacity:0;padding:14px 21px;background:#0c2450;color:#fff;border:1px solid #3a80db;border-radius:12px;font-size:12px;line-height:1.5;pointer-events:none;transition:transform .35s,opacity .35s;box-shadow:0 10px 30px rgba(0,0,0,.23)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Intro loading; JS dismisses it */
.intro-loader{position:fixed;inset:0;z-index:500;background:#061124;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .55s,visibility .55s}
.intro-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{width:95px;height:95px;animation:floatBrand 2s ease-in-out infinite}.loader-logo img{height:100%;width:100%;object-fit:contain}
.intro-loader>span{font:700 15px var(--font-display);letter-spacing:5px;color:#bfd7ff}
.loader-track{height:2px;background:#19355d;width:140px;overflow:hidden;margin-top:13px;border-radius:5px}.loader-track i{display:block;width:45%;height:100%;background:#36bbff;animation:loaderLine 1.2s ease-in-out infinite}