/* Production utility layer: compiled/static equivalents of the Tailwind utilities used in this page.
   Avoids shipping the Tailwind browser compiler to visitors. */
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.items-center{align-items:center}.gap-3{gap:.75rem}.gap-4{gap:1rem}.relative{position:relative}.isolate{isolation:isolate}.text-white{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
::selection{background:rgba(125,211,252,.25);color:#f0f9ff}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
:root{--bg:#050b14;--bg2:#07111f;--surface:rgba(12,24,43,.64);--surface-strong:rgba(13,28,51,.84);--border:rgba(143,190,255,.14);--border-hi:rgba(82,179,255,.38);--text:#f5f9ff;--muted:#91a2ba;--blue:#3cb9ff;--cyan:#5ee7ff;--indigo:#627dff;--shadow:0 30px 90px rgba(0,0,0,.34);--radius:28px;--shell:min(1180px,calc(100% - 40px));}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#239eea #06101c}body{margin:0;background:radial-gradient(circle at 15% -10%,rgba(40,133,255,.12),transparent 28%),linear-gradient(180deg,var(--bg),#06101c 55%,#050b13);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}body::-webkit-scrollbar{width:9px}body::-webkit-scrollbar-track{background:#06101c}body::-webkit-scrollbar-thumb{background:linear-gradient(#67dcff,#2188ff);border:2px solid #06101c;border-radius:999px}a{color:inherit;text-decoration:none}button{font:inherit}.shell{width:var(--shell);margin-inline:auto}.glass{background:linear-gradient(135deg,rgba(15,31,57,.72),rgba(8,18,34,.55));border:1px solid var(--border);box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 70px rgba(0,0,0,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.section-block{padding:94px 0}.section-snap{scroll-margin-top:100px}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}.ambient-orb{position:absolute;border-radius:50%;filter:blur(24px);opacity:.46}.orb-a{width:520px;height:520px;background:radial-gradient(circle,rgba(0,179,255,.32),rgba(68,90,255,.08) 55%,transparent 72%);top:6%;right:-170px}.orb-b{width:470px;height:470px;background:radial-gradient(circle,rgba(33,104,255,.21),rgba(0,217,255,.06) 58%,transparent 72%);left:-180px;top:48%}.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(106,180,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(106,180,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 82%)}.ambient-noise{display:none;position:absolute;inset:0;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.page-loader{position:fixed;inset:0;z-index:9999;background:#040a12;display:grid;place-items:center;align-content:center;gap:15px}.loader-mark{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,rgba(56,189,248,.17),rgba(49,89,255,.08));border:1px solid rgba(95,201,255,.2);box-shadow:0 0 50px rgba(56,189,248,.14)}.loader-mark img{width:40px;height:40px}.loader-word{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;letter-spacing:.34em;margin-left:.34em;font-size:12px}.loader-line{width:150px;height:2px;background:#0d1b2c;overflow:hidden;border-radius:20px}.loader-line span{display:block;height:100%;width:100%;background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);transform:translateX(-100%)}.site-header{position:sticky;top:18px;z-index:100;padding-top:18px;pointer-events:none}.nav-shell{height:68px;border-radius:22px;display:flex;align-items:center;padding:0 14px 0 18px;pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em}.brand img{width:40px;height:40px}.brand-dot{color:var(--cyan)}.desktop-nav{display:flex;gap:7px;margin:auto}.desktop-nav a{color:#a7b7ca;font-size:14px;font-weight:600;padding:10px 13px;border-radius:12px;transition:.25s}.desktop-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}.nav-cta{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#5ce7ff,#389eff);color:#03101c;font-weight:800;font-size:13px;box-shadow:0 10px 35px rgba(35,160,255,.2);transition:transform .25s,box-shadow .25s}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(35,160,255,.28)}.nav-cta svg{width:16px}.menu-toggle{display:none;width:44px;height:44px;border:0;background:transparent;position:relative}.menu-toggle span{position:absolute;left:10px;width:24px;height:1.5px;background:#fff;transition:.3s}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}.mobile-menu{display:none;position:absolute;top:94px;left:20px;right:20px;border-radius:22px;padding:10px;pointer-events:auto}.mobile-menu a{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:14px;color:#b8c6d8;font-weight:600}.hero{min-height:calc(100svh - 105px);padding:90px 0 70px;display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center}.eyebrow,.section-kicker{font-family:"IBM Plex Mono",monospace;color:#78dfff;font-size:11px;letter-spacing:.13em}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(103,209,255,.14);background:rgba(12,28,48,.48);border-radius:999px}.status-dot{width:7px;height:7px;border-radius:50%;background:#62ebff;box-shadow:0 0 0 5px rgba(98,235,255,.08),0 0 16px #62ebff}.hero-title{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.047em;margin:26px 0 24px;max-width:760px}.hero-title .line{overflow:hidden;padding-bottom:.06em}.hero-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:var(--muted);max-width:650px}.hero-lead strong{color:#e8f6ff;font-weight:600}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 19px;border-radius:15px;font-size:14px;font-weight:800;transition:.25s}.btn svg{width:18px}.btn-primary{background:linear-gradient(135deg,#63e6ff 0%,#3aa7ff 58%,#5573ff 100%);color:#03111c;box-shadow:0 16px 44px rgba(38,149,255,.22)}.btn-primary:hover{box-shadow:0 20px 50px rgba(38,149,255,.32)}.btn-ghost{border:1px solid var(--border);background:rgba(10,23,42,.5);color:#dfeeff}.btn-ghost:hover{border-color:rgba(104,205,255,.35);background:rgba(21,42,69,.6)}.hero-proof{display:flex;align-items:center;gap:18px;margin-top:40px}.proof-item{display:flex;flex-direction:column;gap:4px}.proof-item strong{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:14px}.proof-item span{font-size:11px;color:#7589a3}.proof-separator{width:1px;height:34px;background:var(--border)}.hero-visual{position:relative;min-height:540px;display:grid;place-items:center;perspective:1000px}.visual-halo{position:absolute;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(72,195,255,.22),rgba(41,83,255,.08) 42%,transparent 68%);filter:blur(16px);animation:haloPulse 5s ease-in-out infinite}.browser-card{position:relative;width:min(100%,520px);border-radius:27px;padding:9px;transform:rotateY(-5deg) rotateX(3deg);box-shadow:0 50px 120px rgba(0,0,0,.45),0 0 80px rgba(37,154,255,.08);will-change:transform}.browser-bar{height:46px;display:grid;grid-template-columns:70px 1fr 24px;align-items:center;gap:10px;padding:0 7px 0 10px}.browser-dots{display:flex;gap:5px}.browser-dots span{width:7px;height:7px;border-radius:50%;background:#35506e}.browser-dots span:first-child{background:#548cff}.browser-address{height:27px;border:1px solid rgba(255,255,255,.05);background:rgba(1,9,18,.35);display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;font:9px "IBM Plex Mono",monospace;color:#8195ad}.browser-address svg{width:10px}.browser-bar>svg{width:16px;color:#60738c}.browser-page{height:380px;border-radius:20px;position:relative;overflow:hidden;background:radial-gradient(circle at 73% 29%,rgba(51,157,255,.24),transparent 28%),linear-gradient(145deg,#071421,#0a1830 65%,#0c2140)}.browser-page:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(124,198,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(124,198,255,.045) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,black,transparent)}.mock-nav,.mock-hero,.mock-cards{position:relative;z-index:2}.mock-nav{display:flex;justify-content:space-between;align-items:center;padding:23px 26px}.mock-logo{width:23px;height:23px;border-radius:7px;background:linear-gradient(135deg,#68eaff,#4e6aff);box-shadow:0 0 20px rgba(86,206,255,.25)}.mock-nav-lines{display:flex;gap:9px}.mock-nav-lines span{width:25px;height:4px;border-radius:5px;background:#50647e}.mock-hero{padding:35px 32px}.mock-kicker{width:72px;height:7px;background:#42ceff;border-radius:9px;margin-bottom:17px;box-shadow:0 0 15px rgba(66,206,255,.25)}.mock-heading{display:grid;gap:8px}.mock-heading span{height:19px;background:#d9f1ff;border-radius:5px}.mock-heading span:nth-child(1){width:82%}.mock-heading span:nth-child(2){width:93%}.mock-heading span:nth-child(3){width:61%}.mock-copy{display:grid;gap:6px;margin-top:18px}.mock-copy span{height:5px;background:#536982;border-radius:4px;width:72%}.mock-copy span:last-child{width:51%}.mock-actions{display:flex;gap:9px;margin-top:24px}.mock-actions span{height:29px;width:88px;border-radius:8px;background:linear-gradient(90deg,#65e8ff,#419dff)}.mock-actions span:last-child{width:68px;background:#152d48;border:1px solid #264663}.mock-cards{display:flex;gap:10px;padding:0 31px}.mock-cards span{height:72px;flex:1;border-radius:13px;background:linear-gradient(145deg,rgba(25,55,89,.9),rgba(11,30,52,.8));border:1px solid rgba(94,188,255,.1)}.scan-light{position:absolute;left:0;right:0;height:100px;top:-130px;background:linear-gradient(to bottom,transparent,rgba(124,225,255,.1),transparent);transform:skewY(-7deg);animation:scan 5s ease-in-out infinite}.floating-pill{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:14px;font-size:11px;font-weight:700;color:#ddecff;box-shadow:0 20px 50px rgba(0,0,0,.25)}.floating-pill svg{width:15px;color:#6ee4ff}.pill-a{top:10%;left:-1%;animation:float 5.2s ease-in-out infinite}.pill-b{right:-1%;top:27%;animation:float 5.8s ease-in-out infinite reverse}.pill-c{bottom:12%;left:4%;animation:float 6.4s ease-in-out infinite}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card,.service-card{position:relative;overflow:hidden}.feature-card{padding:24px;border-radius:22px}.icon-box{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(76,195,255,.16),rgba(55,95,255,.08));border:1px solid rgba(102,205,255,.15);color:#75e5ff}.icon-box svg{width:21px}.feature-card h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:16px;margin:18px 0 8px;letter-spacing:-.02em}.feature-card p,.service-card p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.spotlight-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(75,198,255,.10),transparent 42%);opacity:0;transition:opacity .3s}.spotlight-card:hover:before{opacity:1}.tech-strip{position:relative;overflow:hidden;padding:30px 0}.tech-marquee{overflow:hidden}.tech-track{display:flex;width:max-content;gap:11px;animation:marquee 30s linear infinite;padding-left:10px}.tech-track span{display:flex;align-items:center;gap:9px;padding:12px 17px;border:1px solid rgba(124,190,255,.11);background:rgba(9,22,39,.62);border-radius:999px;font:11px "IBM Plex Mono",monospace;color:#b7c8da}.tech-track svg{width:16px;color:#55d8ff}.marquee-fade{position:absolute;z-index:2;top:0;bottom:0;width:100px;pointer-events:none}.fade-left{left:0;background:linear-gradient(90deg,#06101c,transparent)}.fade-right{right:0;background:linear-gradient(-90deg,#06101c,transparent)}.section-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:end;margin-bottom:42px}.section-heading h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.04em;margin:12px 0 0;max-width:720px}.section-heading h2 .line{overflow:hidden}.section-heading>p{color:var(--muted);font-size:14px;line-height:1.75;max-width:450px;justify-self:end}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-card{min-height:290px;padding:25px;border-radius:24px;display:flex;flex-direction:column;transition:transform .35s,border-color .35s,background .35s}.service-card:hover{transform:translateY(-7px);border-color:var(--border-hi);background:linear-gradient(145deg,rgba(17,38,66,.78),rgba(8,19,36,.65))}.service-top,.service-bottom,.project-info{display:flex;justify-content:space-between;align-items:center}.service-tag{font:10px "IBM Plex Mono",monospace;color:#50667f}.service-card h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:23px;letter-spacing:-.025em;margin:28px 0 10px}.service-bottom{margin-top:auto;padding-top:20px}.service-bottom strong{font-size:13px;color:#7de7ff}.service-bottom svg{width:17px;color:#4d6a86;transition:.3s}.service-card:hover .service-bottom svg{color:#78e4ff;transform:translate(3px,-3px)}.portfolio-heading{align-items:end}.text-link{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#9cb0c5;font-size:13px}.text-link svg{width:16px}.portfolio-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:16px}.project-card{border-radius:26px;padding:10px;overflow:hidden;transition:transform .35s,border-color .35s}.project-card:hover{transform:translateY(-6px);border-color:rgba(92,206,255,.35)}.project-large{grid-row:span 2}.project-visual{position:relative;overflow:hidden;border-radius:19px;min-height:255px}.project-large .project-visual{min-height:530px}.project-browser{height:38px;display:flex;align-items:center;gap:5px;padding:0 12px;background:rgba(4,10,18,.72);border-bottom:1px solid rgba(255,255,255,.04);position:relative;z-index:3}.project-browser span{width:6px;height:6px;border-radius:50%;background:#3e5a76}.project-browser small{font:8px "IBM Plex Mono",monospace;color:#58718d;margin-left:8px}.invitation-visual{background:radial-gradient(circle at 50% 70%,rgba(210,177,112,.22),transparent 35%),linear-gradient(145deg,#15110f,#31261d 65%,#15100d)}.invitation-art{position:absolute;inset:38px 0 0;display:grid;place-items:center;align-content:center}.script-mark{font-family:Georgia,serif;font-style:italic;font-size:76px;color:#eee0c9}.tiny-copy{font:8px "IBM Plex Mono",monospace;letter-spacing:.4em;color:#bfa785;margin-top:7px}.school-visual{background:radial-gradient(circle at 50% 50%,rgba(69,192,255,.22),transparent 33%),linear-gradient(145deg,#07111c,#08273b)}.school-art{position:absolute;inset:38px 0 0;display:grid;place-items:center;align-content:center;color:#74dcff}.school-art svg{width:50px;height:50px;margin-bottom:10px}.school-art strong{font:800 28px "Plus Jakarta Sans",Inter,sans-serif;color:#e7f7ff}.school-art span{font:9px "IBM Plex Mono",monospace;color:#6d94ad}.intan-visual{background:radial-gradient(circle at 65% 30%,rgba(255,173,197,.18),transparent 35%),linear-gradient(145deg,#16101a,#2a1620)}.intan-art{position:absolute;inset:38px 0 0;display:grid;place-items:center;align-content:center}.intan-art>span{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.45em;color:#d9a8b8}.intan-art strong{font:800 31px "Plus Jakarta Sans",Inter,sans-serif;color:#fff0f5;letter-spacing:.05em}.intan-art small{color:#936879;margin-top:5px}.project-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.08) 43%,transparent 60%);transform:translateX(-120%);transition:transform .8s}.project-card:hover .project-shine{transform:translateX(120%)}.project-info{padding:18px 9px 10px}.project-info span{font:9px "IBM Plex Mono",monospace;color:#6fcff3;letter-spacing:.08em}.project-info h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:19px;margin:4px 0 0}.project-open{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--border)}.project-open svg{width:17px}.faq{max-width:950px}.faq-heading{display:block}.faq-list{display:grid;gap:10px}.faq-item{border-radius:19px;overflow:hidden}.faq-item button{width:100%;min-height:68px;border:0;background:transparent;color:#eaf5ff;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:0 21px;cursor:pointer;font-weight:700}.faq-item button svg{width:19px;color:#6bdcff;transition:transform .3s}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}.faq-answer>p{overflow:hidden;margin:0;padding:0 21px;color:var(--muted);font-size:13px;line-height:1.7;transition:padding .35s}.faq-item.active{border-color:rgba(92,204,255,.28)}.faq-item.active .faq-answer{grid-template-rows:1fr}.faq-item.active .faq-answer>p{padding:0 21px 20px}.faq-item.active button svg{transform:rotate(45deg)}.final-cta{padding-bottom:110px}.cta-card{position:relative;overflow:hidden;min-height:450px;border-radius:34px;padding:70px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.cta-card h2{position:relative;z-index:2;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.047em;max-width:850px;margin:15px 0 22px}.cta-card h2 .line{overflow:hidden}.cta-card p{position:relative;z-index:2;color:var(--muted);max-width:560px;line-height:1.7;margin:0 0 28px}.cta-card .btn,.cta-card .section-kicker{position:relative;z-index:2}.cta-glow{position:absolute;width:620px;height:620px;border-radius:50%;right:-140px;top:-220px;background:radial-gradient(circle,rgba(61,202,255,.26),rgba(50,74,255,.08) 42%,transparent 70%);filter:blur(20px)}.footer{border-top:1px solid rgba(131,190,255,.1);padding:35px 0 45px;display:grid;grid-template-columns:auto 1fr auto auto;gap:28px;align-items:center;color:#73879f;font-size:12px}.footer-brand{display:flex;align-items:center;gap:9px;color:#d9e9f7}.footer-brand img{width:32px}.footer-brand strong{font-family:"Plus Jakarta Sans",Inter,sans-serif}.footer-links{display:flex;gap:16px}.footer-links a:hover{color:#9fe8ff}.floating-wa{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:16px;color:#caf6ff;font-size:12px;font-weight:800;transition:.3s}.floating-wa:hover{transform:translateY(-4px);border-color:rgba(83,220,255,.4)}.floating-wa svg{width:18px}.reveal-card,.reveal-up,.reveal-scale{visibility:hidden}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes float{50%{transform:translateY(-10px)}}@keyframes scan{0%,20%{top:-130px}65%,100%{top:105%}}@keyframes haloPulse{50%{transform:scale(1.06);opacity:.7}}
@media(max-width:980px){:root{--shell:min(100% - 28px,760px)}.desktop-nav,.nav-cta{display:none}.menu-toggle{display:block;margin-left:auto}.menu-toggle.open span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.open span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-menu.open{display:grid}.hero{min-height:auto;grid-template-columns:1fr;padding-top:80px;gap:60px}.hero-copy{max-width:720px}.hero-visual{min-height:500px}.feature-grid,.service-grid{grid-template-columns:repeat(2,1fr)}.section-heading{grid-template-columns:1fr;gap:15px}.section-heading>p{justify-self:start}.portfolio-grid{grid-template-columns:1fr 1fr}.project-large{grid-column:span 2;grid-row:auto}.project-large .project-visual{min-height:430px}.footer{grid-template-columns:1fr auto}.footer>p{grid-column:1/-1;grid-row:2}.footer small{grid-column:2}}
@media(max-width:640px){:root{--shell:calc(100% - 24px);--radius:22px}.site-header{top:10px;padding-top:10px}.nav-shell{height:60px;border-radius:18px;padding-inline:12px}.brand img{width:36px;height:36px}.mobile-menu{top:80px;left:12px;right:12px}.hero{padding:70px 0 40px;gap:35px}.hero-title{font-size:clamp(43px,13vw,62px);margin-top:22px}.hero-lead{font-size:15px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.btn{padding-inline:13px;min-height:50px}.hero-proof{gap:10px;overflow-x:auto;padding-bottom:6px}.proof-item{min-width:max-content}.proof-item span{font-size:10px}.hero-visual{min-height:405px}.browser-card{width:96%;border-radius:22px;transform:none}.browser-page{height:300px}.browser-bar{grid-template-columns:55px 1fr 18px}.mock-hero{padding:24px}.mock-cards{padding:0 23px}.floating-pill{font-size:10px;padding:8px 10px}.pill-a{top:3%;left:0}.pill-b{right:0;top:27%}.pill-c{bottom:4%;left:7%}.section-block{padding:68px 0}.feature-grid{grid-template-columns:1fr 1fr;gap:9px}.feature-card{padding:18px;border-radius:19px}.feature-card p{font-size:12px}.feature-card h2{font-size:14px}.icon-box{width:40px;height:40px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:36px}.service-grid{display:grid;grid-template-columns:1fr;gap:10px}.service-card{min-height:230px}.portfolio-grid{grid-template-columns:1fr}.project-large{grid-column:auto}.project-large .project-visual,.project-visual{min-height:330px}.cta-card{padding:42px 23px;min-height:430px;border-radius:25px}.cta-card h2{font-size:42px}.footer{grid-template-columns:1fr;gap:14px;padding-bottom:95px}.footer-links,.footer small{grid-column:auto}.floating-wa{right:14px;bottom:14px}.floating-wa span{display:none}.floating-wa{width:50px;height:50px;justify-content:center;border-radius:16px;padding:0}.floating-wa svg{width:20px}.marquee-fade{width:45px}.project-card:hover,.service-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tech-track,.visual-halo,.scan-light,.floating-pill{animation:none!important}.reveal-card,.reveal-up,.reveal-scale{visibility:visible!important}.ambient-orb{transform:none!important}}

/* v7.1 responsive + performance polish */
html,body{width:100%;max-width:100%}body{overflow-x:clip}main,.site-header,.footer,section{max-width:100%}.shell{max-width:calc(100% - 24px)}
.hero>*,.section-heading>*,.feature-grid>*,.service-grid>*,.portfolio-grid>*,.footer>*{min-width:0}
img,svg{max-width:100%}.hero-copy,.hero-visual,.browser-card,.project-card,.service-card,.feature-card,.cta-card{min-width:0}
.hero-title,.section-heading h2,.cta-card h2{overflow-wrap:anywhere;text-wrap:balance}.hero-lead,.section-heading>p,.feature-card p,.service-card p,.faq-answer p{overflow-wrap:anywhere}
.browser-address{min-width:0;overflow:hidden}.browser-address span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-browser{min-width:0}.project-browser small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:where(a,button):focus-visible{outline:2px solid #68e7ff;outline-offset:4px;border-radius:12px}
.site-header .nav-shell{transition:height .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease}.site-header.is-scrolled .nav-shell{height:62px;background:linear-gradient(135deg,rgba(10,24,45,.9),rgba(6,15,29,.82));border-color:rgba(112,204,255,.2);box-shadow:0 16px 50px rgba(0,0,0,.22)}
.mobile-menu{max-height:calc(100svh - 110px);overflow:auto;overscroll-behavior:contain}
.btn,.nav-cta,.project-card,.service-card,.feature-card,.faq-item button{-webkit-tap-highlight-color:transparent}
@media(hover:none),(pointer:coarse){.spotlight-card:before{display:none}.project-shine{display:none}.service-card:hover,.project-card:hover,.nav-cta:hover,.floating-wa:hover{transform:none}.glass{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
@media(max-width:980px){.ambient-orb{filter:blur(24px);opacity:.42}.hero{grid-template-columns:minmax(0,1fr)}.portfolio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.feature-grid,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{grid-template-columns:minmax(0,1fr)}.browser-card{max-width:520px}.floating-pill{max-width:min(170px,44vw)}}
@media(max-width:640px){body{overflow-x:clip}.shell{width:calc(100% - 24px);max-width:calc(100% - 24px)}.ambient-noise{display:none}.ambient-grid{background-size:48px 48px;opacity:.72}.ambient-orb{filter:blur(20px);opacity:.34}.orb-a{width:360px;height:360px;right:-190px}.orb-b{width:330px;height:330px;left:-190px}.glass{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hero{width:calc(100% - 24px);padding-top:58px;overflow:visible}.hero-copy{width:100%}.hero-title{font-size:clamp(40px,12vw,58px);letter-spacing:-.055em}.hero-lead{max-width:100%}.hero-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}.hero-actions .btn{width:100%;min-width:0;white-space:normal;text-align:center}.hero-proof{width:100%;max-width:100%;scrollbar-width:none;overscroll-behavior-x:contain}.hero-proof::-webkit-scrollbar{display:none}.hero-visual{width:100%;max-width:100%;min-height:390px;overflow:visible}.browser-card{width:min(96%,520px);max-width:100%}.floating-pill{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card{min-width:0}.service-grid,.portfolio-grid{grid-template-columns:minmax(0,1fr)}.project-large{grid-column:auto}.project-card{width:100%;max-width:100%}.section-heading,.portfolio-heading{width:100%;max-width:100%}.section-heading h2{font-size:clamp(32px,9.5vw,40px)}.text-link{justify-content:flex-start}.cta-card{width:100%;max-width:100%;padding-inline:22px}.cta-card h2{font-size:clamp(38px,11vw,48px)}.cta-glow{width:430px;height:430px;right:-250px}.footer{width:calc(100% - 24px);max-width:calc(100% - 24px)}.tech-track{will-change:transform}.marquee-fade{width:30px}}
@media(max-width:420px){.hero-actions{grid-template-columns:1fr}.hero-proof{gap:12px}.proof-separator{display:none}.feature-grid{grid-template-columns:1fr}.feature-card{padding:20px}.hero-visual{min-height:365px}.floating-pill{font-size:9px;max-width:45vw}.pill-a{left:-4px}.pill-b{right:-4px}.mock-hero{padding:21px}.mock-cards{padding:0 19px}.browser-page{height:285px}.project-large .project-visual,.project-visual{min-height:285px}.faq-item button{padding-inline:17px}.faq-answer>p,.faq-item.active .faq-answer>p{padding-left:17px;padding-right:17px}}
@media(max-width:340px){.shell,.hero,.footer{width:calc(100% - 18px);max-width:calc(100% - 18px)}.brand span{font-size:16px}.hero-title{font-size:38px}.hero-visual{min-height:345px}.floating-pill{display:none}.browser-page{height:270px}.section-block{padding:58px 0}.project-info{gap:10px}.project-info h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.site-header .nav-shell{transition:none!important}}

/* Native smooth scrolling: no scroll engine dependency. */
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v7.3 typography + lightweight rendering polish */
:root{--font-display:"Plus Jakarta Sans",Inter,sans-serif;--font-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}
body{font-family:var(--font-body);font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
.hero-title,.section-heading h2,.cta-card h2,.service-card h3,.project-info h3,.proof-item strong,.brand,.footer-brand strong,.loader-word{font-family:var(--font-display)}
.hero-title{font-weight:800}.section-heading h2,.cta-card h2{font-weight:700}.service-card h3,.project-info h3{font-weight:700}
.eyebrow,.section-kicker,.browser-address,.tech-track span,.service-tag,.project-browser small,.project-info span,.tiny-copy,.school-art span,.intan-art>span{font-family:var(--font-mono)}
.desktop-nav a,.nav-cta,.btn,.faq-item button{letter-spacing:-.012em}
.hero-lead,.section-heading>p,.feature-card p,.service-card p,.faq-answer>p{letter-spacing:-.006em}
.section-block:not(.features){contain:paint}
.feature-card,.service-card,.project-card,.faq-item{contain:paint}
.browser-page,.project-visual{contain:paint}
.tech-track{transform:translate3d(0,0,0)}
@media(max-width:640px){.hero-title{letter-spacing:-.04em}.section-heading h2,.cta-card h2{letter-spacing:-.035em}.visual-halo{filter:blur(12px)}.ambient-orb{filter:blur(16px)}}

/* v7.5 hero value system + tactile UX */
.eyebrow-sep{color:rgba(151,210,255,.42);margin-inline:1px}
.hero-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:38px;max-width:700px}
.hero-value{appearance:none;min-width:0;min-height:76px;padding:12px 13px;border-radius:17px;border:1px solid rgba(125,190,255,.12);background:linear-gradient(145deg,rgba(13,28,49,.58),rgba(8,18,33,.4));color:var(--text);display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,background .28s ease,box-shadow .28s ease;isolation:isolate}
.hero-value::before{content:"";position:absolute;inset:-1px;background:radial-gradient(180px circle at var(--vx,50%) var(--vy,50%),rgba(87,208,255,.14),transparent 58%);opacity:0;transition:opacity .3s;z-index:-1}
.hero-value:hover::before,.hero-value.active::before{opacity:1}
.hero-value:hover{transform:translateY(-3px);border-color:rgba(100,211,255,.25);background:linear-gradient(145deg,rgba(18,39,66,.72),rgba(9,21,38,.52))}
.hero-value.active{border-color:rgba(95,220,255,.36);background:linear-gradient(145deg,rgba(20,48,78,.78),rgba(9,25,44,.58));box-shadow:0 14px 38px rgba(22,128,205,.12),inset 0 1px rgba(255,255,255,.05)}
.hero-value:active{transform:translateY(-1px) scale(.975)}
.value-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:rgba(70,181,255,.08);border:1px solid rgba(104,211,255,.12);color:#71ddff;transition:transform .3s ease,background .3s ease,color .3s ease}
.value-icon svg{width:17px;height:17px}
.hero-value:hover .value-icon,.hero-value.active .value-icon{transform:rotate(-4deg) scale(1.06);background:rgba(72,198,255,.14);color:#b1f4ff}
.value-copy{display:grid;gap:4px;min-width:0}
.value-copy strong{font-family:var(--font-display);font-size:12px;line-height:1.25;letter-spacing:-.025em;color:#eaf7ff}
.value-copy small{font-size:10px;line-height:1.25;color:#7086a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-value-feedback{min-height:30px;margin-top:10px;display:flex;align-items:center;gap:8px;color:#6f849e;font-size:11px;transition:color .25s ease,transform .25s ease}
.hero-value-feedback svg{width:14px;height:14px;color:#5bcfff;flex:0 0 auto}
.hero-value-feedback.is-active{color:#9db4cc;transform:translateX(2px)}

/* Tactile feedback for actual interactive controls */
.btn,.nav-cta,.floating-wa,.desktop-nav a,.mobile-menu a,.project-card,.faq-item button{position:relative;-webkit-tap-highlight-color:transparent}
.btn:active,.nav-cta:active,.floating-wa:active{transform:scale(.97)}
.desktop-nav a:active,.mobile-menu a:active{transform:scale(.96)}
.project-card{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease}
.project-card:active{transform:scale(.985)}
.faq-item button{transition:color .25s ease,background .25s ease}
.faq-item button:hover{background:rgba(75,182,255,.035)}
.faq-item button:active{background:rgba(75,182,255,.075)}
.service-card .icon-box,.feature-card .icon-box{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease}
.service-card:hover .icon-box,.feature-card:hover .icon-box{transform:translateY(-2px) rotate(-3deg);border-color:rgba(105,219,255,.25);background:rgba(56,179,255,.12)}
.tap-ripple{position:absolute;width:12px;height:12px;border-radius:50%;pointer-events:none;background:rgba(218,248,255,.3);transform:translate(-50%,-50%) scale(0);animation:tapRipple .55s ease-out forwards;z-index:20}
@keyframes tapRipple{to{transform:translate(-50%,-50%) scale(11);opacity:0}}

@media(max-width:760px){
  .hero-values{grid-template-columns:1fr;gap:8px;margin-top:30px}
  .hero-value{min-height:64px;padding:10px 12px;border-radius:15px}
  .value-copy strong{font-size:12px}.value-copy small{font-size:10px}
  .hero-value-feedback{margin-top:8px;font-size:10px}
}
@media(max-width:420px){.eyebrow{font-size:9.5px;letter-spacing:.09em}.hero-value{min-height:62px}}
@media(hover:none),(pointer:coarse){.hero-value:hover{transform:none}.hero-value:hover .value-icon{transform:none}.service-card:hover .icon-box,.feature-card:hover .icon-box{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-value,.value-icon,.hero-value-feedback,.btn,.project-card{transition:none}.tap-ripple{display:none}}

/* v7.6 — hero UI + interaction polish */
.hero-overline{display:flex;align-items:center;gap:12px;width:min(100%,620px);color:#86a2bd;font:600 10px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase}
.overline-index{color:#d9efff;white-space:nowrap}.overline-line{height:1px;flex:1;min-width:28px;background:linear-gradient(90deg,rgba(99,214,255,.68),rgba(95,151,255,.08))}.overline-label{white-space:nowrap;color:#6fcfee}
.hero-quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:38px;max-width:720px}
.quicklink{position:relative;min-width:0;min-height:82px;padding:13px 12px;border:1px solid rgba(117,185,255,.11);border-radius:17px;background:linear-gradient(145deg,rgba(11,25,44,.44),rgba(6,16,29,.28));display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;overflow:hidden;isolation:isolate;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease,box-shadow .3s ease}
.quicklink::before{content:"";position:absolute;inset:0;background:radial-gradient(150px circle at var(--qx,50%) var(--qy,50%),rgba(72,197,255,.16),transparent 62%);opacity:0;transition:opacity .28s;z-index:-1}.quicklink::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(94,221,255,.62),transparent);transform:scaleX(0);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.quicklink-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(47,147,216,.08);border:1px solid rgba(104,201,255,.1);color:#6edfff;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease}.quicklink-icon svg{width:17px;height:17px}.quicklink small{display:block;color:#627a94;font:500 9px/1.25 var(--font-mono);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quicklink strong{display:block;color:#e8f6ff;font:700 13px/1.2 var(--font-display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quicklink-arrow{width:16px;height:16px;color:#4e6c89;transition:transform .32s ease,color .32s ease}
.quicklink:hover{transform:translateY(-4px);border-color:rgba(100,211,255,.25);background:linear-gradient(145deg,rgba(16,36,61,.62),rgba(7,20,35,.42));box-shadow:0 18px 42px rgba(6,45,83,.14)}.quicklink:hover::before{opacity:1}.quicklink:hover::after{transform:scaleX(1)}.quicklink:hover .quicklink-icon{transform:translateY(-2px) rotate(-5deg);background:rgba(49,175,255,.13);border-color:rgba(101,213,255,.22)}.quicklink:hover .quicklink-arrow{transform:translate(3px,3px);color:#8be7ff}.quicklink:active{transform:translateY(-1px) scale(.975)}
.quicklink.is-tapped{border-color:rgba(105,220,255,.36);box-shadow:0 0 0 4px rgba(66,189,255,.055),0 16px 42px rgba(2,55,100,.14)}
.service-card[data-service]{cursor:pointer}.service-card[data-service]::after{content:"Klik untuk tanya";position:absolute;right:18px;bottom:18px;font:600 9px/1 var(--font-mono);letter-spacing:.05em;color:#6c86a1;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}.service-card[data-service]:hover::after{opacity:1;transform:none}.service-card[data-service]:active{transform:translateY(-2px) scale(.988)}
.feature-card:active,.project-card:active{transform:scale(.987)}
.tech-track span{transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}.tech-track span:hover{color:#dff7ff;transform:translateY(-2px);background:rgba(47,153,225,.08)}
.browser-card.is-pulsed{animation:browserPulse .58s cubic-bezier(.2,.8,.2,1)}@keyframes browserPulse{0%{filter:brightness(1)}42%{filter:brightness(1.13);box-shadow:0 50px 120px rgba(0,0,0,.45),0 0 110px rgba(55,181,255,.18)}100%{filter:brightness(1)}}
@media(max-width:760px){.hero-overline{gap:9px}.overline-label{font-size:9px}.hero-quicklinks{grid-template-columns:1fr;gap:7px;margin-top:30px}.quicklink{min-height:67px;padding:10px 11px;grid-template-columns:34px minmax(0,1fr) 18px;border-radius:15px}.quicklink-icon{width:34px;height:34px}.quicklink small{font-size:8px}.quicklink strong{font-size:12px}.service-card[data-service]::after{display:none}}
@media(max-width:420px){.hero-overline{font-size:8px;letter-spacing:.08em}.overline-label{font-size:8px}.overline-index{max-width:94px;overflow:hidden;text-overflow:ellipsis}.hero-quicklinks{margin-top:26px}}
@media(hover:none),(pointer:coarse){.quicklink:hover{transform:none}.quicklink:hover::before{opacity:0}.quicklink:hover::after{transform:scaleX(0)}.quicklink:hover .quicklink-icon{transform:none}.quicklink:hover .quicklink-arrow{transform:none}.service-card[data-service]:hover::after{opacity:0}}
@media(prefers-reduced-motion:reduce){.quicklink,.quicklink-icon,.quicklink-arrow,.tech-track span{transition:none}.browser-card.is-pulsed{animation:none}}


/* v7.7 visual polish: less template-y hero note + package-based services */
.text-gradient{background:linear-gradient(100deg,#f7fbff 4%,#7fe5ff 46%,#6d8dff 86%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.text-gradient-soft{background:linear-gradient(90deg,#eefaff,#9bdfff 48%,#a7b9ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.price-gradient{background:linear-gradient(110deg,#b7f5ff 0%,#55caff 42%,#6e8eff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-note{display:inline-flex;align-items:center;gap:9px;margin:0;color:#8fa7c0;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
.hero-note-mark{font-size:11px;color:#72ddff;text-shadow:0 0 18px rgba(76,205,255,.7);transform:translateY(-1px)}
.package-heading h2{max-width:780px}.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.package-card{position:relative;min-width:0;min-height:560px;padding:26px;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s,background .32s;cursor:pointer}
.package-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,20%),rgba(88,204,255,.11),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.package-card:hover::before{opacity:1}.package-card:hover{transform:translateY(-8px);border-color:rgba(96,208,255,.26);box-shadow:0 28px 80px rgba(0,0,0,.3),0 10px 40px rgba(42,139,255,.08)}
.package-featured{border-color:rgba(94,207,255,.29);background:linear-gradient(150deg,rgba(18,42,72,.82),rgba(8,19,36,.68));box-shadow:0 28px 90px rgba(22,105,220,.12),inset 0 1px rgba(255,255,255,.06)}
.package-glow{position:absolute;width:260px;height:260px;right:-100px;top:-115px;border-radius:50%;background:radial-gradient(circle,rgba(73,199,255,.22),rgba(65,85,255,.08) 48%,transparent 72%);filter:blur(12px);pointer-events:none}
.package-head{display:flex;align-items:center;gap:10px;min-height:42px;position:relative;z-index:1}.package-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(65,183,255,.09);border:1px solid rgba(101,207,255,.14);color:#8be8ff;transition:transform .3s,background .3s}.package-icon svg{width:17px}.package-card:hover .package-icon{transform:rotate(-5deg) scale(1.06);background:rgba(65,183,255,.14)}
.package-name{font:700 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#83a0bb}.package-badge{margin-left:auto;padding:7px 9px;border-radius:999px;background:linear-gradient(135deg,rgba(96,226,255,.14),rgba(83,118,255,.12));border:1px solid rgba(108,220,255,.2);font-size:9px;font-weight:800;color:#a8eeff;white-space:nowrap}
.package-card h3{font-family:var(--font-display);font-size:27px;letter-spacing:-.035em;margin:27px 0 10px}.package-desc{color:#8ea4bc;line-height:1.7;font-size:14px;min-height:72px;margin:0}
.package-price{display:flex;align-items:flex-end;gap:10px;margin:24px 0 22px}.package-price small{font-size:11px;color:#6f849d;padding-bottom:7px}.package-price strong{font-family:var(--font-display);font-size:42px;line-height:.95;letter-spacing:-.055em}
.package-list{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px;color:#b7c7d7;font-size:13px}.package-list li{display:flex;align-items:center;gap:9px}.package-list svg{width:15px;height:15px;color:#62dbff;flex:0 0 auto}
.package-cta{margin-top:auto;width:100%;min-height:48px;border:1px solid rgba(112,198,255,.16);border-radius:14px;background:rgba(8,21,38,.64);color:#dff5ff;font-weight:800;display:flex;align-items:center;justify-content:space-between;padding:0 15px;cursor:pointer;transition:transform .24s,background .24s,border-color .24s,box-shadow .24s;position:relative;overflow:hidden}.package-cta svg{width:17px;transition:transform .24s}.package-cta:hover{background:rgba(21,49,78,.78);border-color:rgba(107,216,255,.3);transform:translateY(-2px)}.package-cta:hover svg{transform:translate(3px,-3px)}.package-cta:active{transform:scale(.985)}
.package-cta-primary{background:linear-gradient(135deg,#70e6ff,#3d9fff 58%,#5d72ff);color:#03111c;border-color:transparent;box-shadow:0 13px 34px rgba(41,142,255,.2)}.package-cta-primary:hover{background:linear-gradient(135deg,#8cecff,#57adff 58%,#7285ff);box-shadow:0 18px 42px rgba(41,142,255,.28)}
.custom-strip{margin-top:14px;border-radius:24px;padding:22px 24px;display:grid;grid-template-columns:auto minmax(220px,.95fr) minmax(260px,1.15fr) auto;align-items:center;gap:20px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s,background .3s}.custom-strip:hover{transform:translateY(-3px);border-color:rgba(103,214,255,.27);background:linear-gradient(135deg,rgba(17,39,67,.78),rgba(9,21,39,.62))}.custom-strip-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#83e7ff;background:rgba(61,180,255,.09);border:1px solid rgba(99,206,255,.15)}.custom-strip-icon svg{width:20px}.custom-strip h3{font-family:var(--font-display);font-size:20px;margin:5px 0 0;letter-spacing:-.025em}.custom-strip p{margin:0;color:#8298b0;font-size:13px;line-height:1.65}.custom-strip-cta{min-height:44px;padding:0 14px;border-radius:13px;border:1px solid rgba(103,205,255,.15);background:rgba(10,25,44,.64);color:#dff5ff;font-weight:800;display:flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s}.custom-strip-cta svg{width:16px}.custom-strip-cta:hover{transform:translateX(3px);background:rgba(23,52,82,.8)}
.section-heading h2 .text-gradient,.hero-title .text-gradient{display:inline}
@media(max-width:980px){.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.package-card:last-child{grid-column:1/-1;min-height:0}.custom-strip{grid-template-columns:auto 1fr auto}.custom-strip>p{grid-column:2/3}.custom-strip-cta{grid-column:3;grid-row:1/3}}
@media(max-width:680px){.hero-note{font-size:11.5px;max-width:92%}.package-grid{grid-template-columns:1fr}.package-card,.package-card:last-child{grid-column:auto;min-height:0;padding:21px;border-radius:22px}.package-card:hover{transform:none}.package-desc{min-height:0}.package-price strong{font-size:38px}.package-badge{font-size:8px;padding:6px 8px}.custom-strip{grid-template-columns:auto 1fr;gap:14px;padding:18px;border-radius:20px}.custom-strip>p{grid-column:1/-1}.custom-strip-cta{grid-column:1/-1;grid-row:auto;width:100%;justify-content:space-between}.custom-strip:hover{transform:none}}
@media(hover:none),(pointer:coarse){.package-card:hover{transform:none}.package-card:hover .package-icon{transform:none}.package-card:hover::before{opacity:0}.package-cta:hover{transform:none}.custom-strip:hover{transform:none}.custom-strip-cta:hover{transform:none}}

/* v7.8 — Tailwind-assisted polish + calmer gradients + stronger interaction hierarchy */
:root{--ease-premium:cubic-bezier(.22,1,.36,1);--ring-blue:rgba(112,220,255,.42)}

/* Gradients are now reserved for emphasis, not sprayed across entire sentences. */
.text-gradient{
  background:linear-gradient(112deg,#ffffff 0%,#dff8ff 28%,#86dfff 58%,#7c9cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 24px rgba(62,171,255,.08));
}
.text-gradient-soft{
  background:linear-gradient(104deg,#eef8ff 0%,#bfeaff 54%,#b9c8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.price-gradient{
  background:linear-gradient(120deg,#f0fdff 0%,#91e7ff 34%,#4bbcff 68%,#7f91ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 28px rgba(67,184,255,.12));
}
.section-kicker{color:#78a8c6}.hero-lead strong{font-weight:700}.package-desc,.feature-card p,.section-heading>p,.faq-answer p{color:#90a4bb}

/* Package cards: smaller movement, richer light response. */
.package-card{
  transform:translateZ(0);will-change:transform;
  transition:transform .42s var(--ease-premium),border-color .32s ease,box-shadow .42s ease,background .32s ease;
}
.package-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 25%,transparent 72%,rgba(74,190,255,.045));
  transition:opacity .35s ease;
}
.package-card:hover{transform:translateY(-5px) scale(1.008);border-color:rgba(104,211,255,.34);box-shadow:0 26px 80px rgba(0,0,0,.28),0 14px 42px rgba(28,118,218,.10)}
.package-card:hover::after{opacity:1}
.package-card:focus-visible{outline:none;border-color:var(--ring-blue);box-shadow:0 0 0 4px rgba(79,190,255,.10),0 24px 70px rgba(0,0,0,.28)}
.package-card.is-pressed{transform:translateY(-1px) scale(.992)}
.package-featured{transform:translateZ(0)}
.package-featured:hover{transform:translateY(-6px) scale(1.012)}
.package-icon{transition:transform .38s var(--ease-premium),background .3s,border-color .3s,color .3s}
.package-card:hover .package-icon{transform:translateY(-2px) rotate(-3deg) scale(1.045);background:rgba(74,191,255,.15);border-color:rgba(117,221,255,.26);color:#c7f6ff}
.package-list li{transition:color .25s ease,transform .28s var(--ease-premium)}
.package-card:hover .package-list li{color:#c8d8e8}
.package-card:hover .package-list li:nth-child(1){transform:translateX(2px)}
.package-card:hover .package-list li:nth-child(2){transform:translateX(3px)}
.package-card:hover .package-list li:nth-child(3){transform:translateX(4px)}
.package-card:hover .package-list li:nth-child(4){transform:translateX(5px)}

.package-cta,.custom-strip-cta,.btn,.nav-cta{
  isolation:isolate;transition:transform .28s var(--ease-premium),border-color .25s ease,background .25s ease,box-shadow .32s ease,color .25s ease;
}
.package-cta::before,.custom-strip-cta::before,.btn::before,.nav-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.10) 48%,transparent 75%);
  transform:translateX(-70%);transition:transform .58s var(--ease-premium),opacity .25s ease;
}
.package-cta:hover::before,.custom-strip-cta:hover::before,.btn:hover::before,.nav-cta:hover::before{opacity:1;transform:translateX(70%)}
.package-cta:hover{transform:translateY(-2px);border-color:rgba(111,218,255,.34);background:rgba(19,43,69,.86);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.package-cta-primary:hover{box-shadow:0 18px 42px rgba(41,142,255,.25),inset 0 1px rgba(255,255,255,.24)}
.package-cta:focus-visible,.custom-strip-cta:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(70,184,255,.13),0 14px 34px rgba(0,0,0,.18)}
.package-cta svg,.custom-strip-cta svg,.btn svg,.nav-cta svg{transition:transform .32s var(--ease-premium)}
.package-cta:hover svg,.nav-cta:hover svg{transform:translate(3px,-3px)}
.custom-strip-cta:hover svg,.btn-primary:hover svg{transform:translateX(4px)}

/* Other cards now share one interaction language. */
.feature-card,.project-card,.faq-item,.quicklink{
  transition:transform .36s var(--ease-premium),border-color .3s ease,box-shadow .36s ease,background .3s ease;
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(100,204,255,.26);box-shadow:0 18px 52px rgba(0,0,0,.20)}
.feature-card:hover .icon-box{transform:translateY(-2px) rotate(-3deg);border-color:rgba(107,218,255,.24);background:rgba(67,185,255,.13)}
.icon-box{transition:transform .34s var(--ease-premium),background .3s,border-color .3s}
.project-card:hover{transform:translateY(-5px);border-color:rgba(104,211,255,.28);box-shadow:0 24px 70px rgba(0,0,0,.27)}
.project-card:hover .project-open{transform:rotate(8deg) scale(1.06);background:rgba(69,186,255,.12);border-color:rgba(105,216,255,.24)}
.project-open{transition:transform .36s var(--ease-premium),background .3s,border-color .3s}
.project-card:hover .project-shine{opacity:.9;transform:translateX(120%) skewX(-14deg)}
.project-shine{transition:transform .85s var(--ease-premium),opacity .3s ease}

.quicklink:hover{transform:translateY(-3px);border-color:rgba(105,211,255,.25);box-shadow:0 14px 38px rgba(3,50,92,.13)}
.quicklink:focus-visible{outline:none;border-color:rgba(116,220,255,.42);box-shadow:0 0 0 4px rgba(63,184,255,.09)}
.desktop-nav a::after{height:1px;background:linear-gradient(90deg,transparent,#83e7ff,transparent)}

/* Smooth tactile feedback: no layout reflow, only compositor-friendly transforms. */
.pressable{transform:translateZ(0)}
.pressable.is-pressed{transform:scale(.975)}
.tap-ripple{will-change:transform,opacity}

/* Reduce expensive glass work where it barely changes the visual. */
.feature-card,.faq-item,.quicklink{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.package-card,.project-card,.browser-card,.cta-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

@media(max-width:760px){
  .glass{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .package-card,.project-card,.browser-card,.cta-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .package-card:hover,.package-featured:hover,.feature-card:hover,.project-card:hover,.quicklink:hover{transform:none}
  .package-card:active,.feature-card:active,.project-card:active,.quicklink:active{transform:scale(.985)}
  .package-list li{transform:none!important}
  .project-shine{display:none}
}
@media(prefers-reduced-motion:reduce){
  .package-card,.feature-card,.project-card,.quicklink,.package-cta,.custom-strip-cta,.btn,.nav-cta,.package-icon,.icon-box,.project-open{transition:none!important}
  .package-cta::before,.custom-strip-cta::before,.btn::before,.nav-cta::before{display:none}
}

/* v7.9 hero proof, footer & chat dock */
.hero-latest{display:inline-grid;grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:11px;max-width:330px;padding:7px 8px 7px 7px;border:1px solid rgba(130,203,255,.12);border-radius:16px;background:rgba(9,23,42,.38);transition:border-color .28s ease,background .28s ease,transform .28s ease,box-shadow .28s ease}
.hero-latest:hover{transform:translateY(-2px);border-color:rgba(116,215,255,.28);background:rgba(13,31,54,.54);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.hero-latest-thumb{width:44px;height:36px;border-radius:10px;overflow:hidden;background:#0d1b2b;border:1px solid rgba(255,255,255,.06)}
.hero-latest-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hero-latest:hover .hero-latest-thumb img{transform:scale(1.08)}
.hero-latest-copy{display:flex;min-width:0;flex-direction:column;gap:1px}.hero-latest-copy small{font:9px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:#6f8ba8}.hero-latest-copy strong{font:600 12px Inter,sans-serif;color:#dceeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-latest-arrow{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#7bdfff;background:rgba(96,211,255,.06);transition:transform .28s ease,background .28s ease}.hero-latest-arrow svg{width:15px}.hero-latest:hover .hero-latest-arrow{transform:translate(2px,2px);background:rgba(96,211,255,.11)}

.footer{display:block;border-top:0;padding:0 0 34px;color:#8ca0b7;font-size:12px}
.footer-main{display:grid;grid-template-columns:minmax(250px,1.35fr) .72fr .72fr minmax(240px,.95fr);gap:22px;padding:32px;border:1px solid rgba(125,191,255,.11);border-radius:28px;background:linear-gradient(145deg,rgba(12,27,48,.7),rgba(5,14,27,.5));box-shadow:inset 0 1px rgba(255,255,255,.035);position:relative;overflow:hidden}
.footer-main:before{content:"";position:absolute;width:280px;height:280px;right:-120px;bottom:-180px;border-radius:50%;background:radial-gradient(circle,rgba(57,183,255,.13),transparent 68%);pointer-events:none}
.footer-intro,.footer-nav-group,.footer-project{position:relative;z-index:1;min-width:0}.footer-intro{padding-right:24px}.footer-brand{display:inline-flex;align-items:center;gap:11px;color:#e8f4ff}.footer-logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(72,177,255,.08);border:1px solid rgba(116,208,255,.12)}.footer-logo img{width:31px;height:31px}.footer-brand>span:last-child{display:flex;flex-direction:column;gap:2px}.footer-brand strong{font-size:15px}.footer-brand small{font-size:9px;font-weight:500;color:#7289a3;letter-spacing:.02em}.footer-intro>p{max-width:360px;margin:18px 0 16px;color:#768ba4;line-height:1.7;font-size:12px}.footer-mail{display:inline-flex;align-items:center;gap:7px;color:#9bb0c6;transition:color .25s}.footer-mail svg{width:14px}.footer-mail:hover{color:#9aeaff}
.footer-label{display:block;margin:4px 0 14px;font:500 9px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:#526d89}.footer-nav-group{display:flex;flex-direction:column;align-items:flex-start}.footer-nav-group a{display:flex;align-items:center;gap:6px;padding:7px 0;color:#a9b9ca;font-weight:600;transition:color .22s,transform .22s}.footer-nav-group a svg{width:12px;opacity:0;transform:translate(-3px,3px);transition:.22s}.footer-nav-group a:hover{color:#e7f6ff;transform:translateX(2px)}.footer-nav-group a:hover svg{opacity:1;transform:none}
.footer-project{padding:18px;border:1px solid rgba(116,197,255,.1);border-radius:20px;background:rgba(7,18,33,.48)}.footer-project strong{display:block;color:#eaf7ff;font-family:var(--font-display);font-size:16px;letter-spacing:-.02em}.footer-project p{margin:7px 0 15px;color:#71879f;font-size:11px;line-height:1.6}.footer-cta{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border-radius:12px;background:linear-gradient(135deg,rgba(95,225,255,.96),rgba(58,157,255,.96));color:#03111d;font-weight:800;box-shadow:0 12px 28px rgba(37,150,255,.14);transition:transform .25s,box-shadow .25s}.footer-cta svg{width:15px}.footer-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,150,255,.22)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 5px 0;color:#526981}.footer-bottom a{display:inline-flex;align-items:center;gap:6px;color:#748ba3;transition:color .22s}.footer-bottom a svg{width:13px}.footer-bottom a:hover{color:#b7eaff}

.chat-dock{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.floating-wa{position:relative;right:auto;bottom:auto;z-index:auto;min-height:50px;display:flex;align-items:center;gap:9px;padding:0 15px;border-radius:16px;color:#d4f8ff;font-size:12px;font-weight:800;cursor:pointer;border:1px solid rgba(112,213,255,.2);box-shadow:0 14px 40px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.015) inset;background:linear-gradient(145deg,rgba(15,37,63,.9),rgba(7,22,39,.84));transition:transform .25s,border-color .25s,box-shadow .25s}
.floating-wa:hover{transform:translateY(-2px);border-color:rgba(101,221,255,.42);box-shadow:0 18px 44px rgba(0,0,0,.3),0 0 30px rgba(44,180,255,.1)}.floating-wa svg{width:18px}.chat-ping{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:#72e9ff;box-shadow:0 0 0 4px rgba(114,233,255,.08),0 0 12px rgba(114,233,255,.6)}
.chat-popover{width:min(318px,calc(100vw - 28px));padding:12px;border-radius:20px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:bottom right;transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .24s;border-color:rgba(110,203,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.36)}
.chat-dock.open .chat-popover{opacity:1;visibility:visible;transform:none}.chat-head{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:9px;padding:4px 3px 10px}.chat-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(84,186,255,.08);border:1px solid rgba(119,208,255,.1)}.chat-avatar img{width:28px;height:28px}.chat-head>span:nth-child(2){display:flex;flex-direction:column}.chat-head strong{font-size:12px;color:#e5f5ff}.chat-head small{font-size:9px;color:#6f87a0;margin-top:1px}.chat-close{width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#7890aa;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}.chat-close:hover{background:rgba(255,255,255,.05);color:#d9f3ff}.chat-close svg{width:16px}.chat-popover>p{margin:3px 5px 10px;color:#8ca0b6;font-size:11px}.chat-popover>a{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 11px;border-radius:12px;color:#b9cada;transition:background .22s,color .22s,transform .22s}.chat-popover>a>span{display:flex;align-items:center;gap:8px}.chat-popover>a svg{width:15px}.chat-popover>a>svg{width:13px;color:#5b7895;transition:transform .22s,color .22s}.chat-popover>a:hover{background:rgba(84,194,255,.07);color:#ebf9ff;transform:translateX(2px)}.chat-popover>a:hover>svg{transform:translate(2px,-2px);color:#76dcff}

@media(max-width:980px){.footer-main{grid-template-columns:1.15fr .75fr .75fr}.footer-project{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px}.footer-project .footer-label,.footer-project strong,.footer-project p{grid-column:1}.footer-project .footer-cta{grid-column:2;grid-row:1/4;min-width:180px}.footer-intro{padding-right:10px}}
@media(max-width:680px){.hero-latest{max-width:100%;grid-template-columns:42px minmax(0,1fr) 32px}.footer-main{grid-template-columns:1fr 1fr;padding:22px 18px;gap:22px 14px;border-radius:23px}.footer-intro{grid-column:1/-1;padding-right:0}.footer-intro>p{max-width:100%}.footer-project{grid-column:1/-1;display:block}.footer-project .footer-cta{width:100%;margin-top:12px}.footer-bottom{padding-inline:2px}.chat-dock{right:14px;bottom:14px}.floating-wa{width:50px;height:50px;min-height:50px;padding:0;justify-content:center;border-radius:16px}.floating-wa>span:last-child{display:none}.chat-popover{width:min(310px,calc(100vw - 28px))}}
@media(max-width:390px){.footer-main{grid-template-columns:1fr}.footer-nav-group{grid-column:1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}.hero-latest-copy strong{font-size:11px}}


/* v8.0 Typed hero cue + expanded service catalog */
.hero-typed{
  display:inline-flex;align-items:center;gap:9px;max-width:min(100%,560px);min-height:42px;
  padding:8px 12px 8px 9px;border:1px solid rgba(118,205,255,.12);border-radius:14px;
  background:linear-gradient(135deg,rgba(12,28,49,.60),rgba(7,17,31,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);color:#92a9c0;
  transition:border-color .28s ease,background .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;
}
.hero-typed:hover{transform:translateY(-2px);border-color:rgba(108,216,255,.25);background:linear-gradient(135deg,rgba(16,37,63,.72),rgba(8,20,37,.44));box-shadow:0 12px 34px rgba(0,0,0,.14)}
.hero-typed-mark{width:27px;height:27px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;color:#8ae7ff;background:rgba(78,190,255,.08);border:1px solid rgba(104,211,255,.13)}
.hero-typed-mark svg{width:13px;height:13px}
.hero-typed-prefix{font:600 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.015em;color:#6f8da8;white-space:nowrap}
.hero-typed-text{min-width:0;font:700 12px/1.35 "Plus Jakarta Sans",sans-serif;color:#dff5ff;letter-spacing:-.015em;background:linear-gradient(90deg,#eafaff 0%,#9be6ff 55%,#72b8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.typed-cursor{color:#69d8ff;font-weight:400;margin-left:2px;text-shadow:0 0 12px rgba(75,202,255,.65);animation:typedBlink .72s infinite}
@keyframes typedBlink{50%{opacity:.18}}
@media(max-width:560px){.hero-typed{width:100%;padding-right:10px;gap:8px}.hero-typed-prefix{font-size:9px}.hero-typed-text{font-size:11px}.hero-typed-mark{width:25px;height:25px}}
@media(max-width:390px){.hero-typed-prefix{display:none}.hero-typed-text{font-size:10.5px}}

/* Five service cards keep the rhythm balanced instead of stretching awkwardly. */
@media(min-width:981px){.package-grid>.package-card:nth-last-child(2),.package-grid>.package-card:last-child{min-height:540px}}

/* v8.1 — mobile Typed polish + asymmetric service showcase */
.hero-typed-mark{transform:rotate(-8deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,color .3s}
.hero-typed:hover .hero-typed-mark{transform:rotate(0deg) translateY(-1px);background:rgba(78,190,255,.13);border-color:rgba(104,211,255,.24);color:#c6f4ff}
.hero-typed-mark svg{stroke-width:2.1}

/* Service hierarchy: one hero package + supporting options. */
.package-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-areas:
    "business business business business business business business starter starter starter starter starter"
    "business business business business business business business umkm umkm umkm umkm umkm"
    "catalog catalog catalog catalog catalog catalog school school school school school school";
  gap:16px!important;
  align-items:stretch;
}
.package-business{grid-area:business;min-height:100%!important;padding:30px!important;isolation:isolate;overflow:hidden}
.package-starter{grid-area:starter}
.package-umkm{grid-area:umkm}
.package-catalog{grid-area:catalog}
.package-school{grid-area:school}
.package-starter,.package-umkm{min-height:0!important;padding:22px!important}
.package-catalog,.package-school{min-height:0!important;padding:24px!important}

.package-business::before{
  content:"";position:absolute;inset:auto -10% -34% 28%;height:68%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at center,rgba(45,157,255,.20),rgba(64,98,255,.06) 42%,transparent 72%);
  filter:blur(6px);opacity:.9;
}
.package-business .package-head{margin-bottom:6px}
.package-business h3{font-size:clamp(32px,3.2vw,48px);max-width:520px;margin-top:32px}
.package-business .package-desc{font-size:15px;max-width:540px;min-height:0}
.package-business .package-price{margin:30px 0 26px}
.package-business .package-price strong{font-size:clamp(50px,5vw,70px)}
.package-business .package-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px;max-width:590px}
.package-business .package-cta{margin-top:auto;max-width:360px}
.package-business .package-badge{box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 20px rgba(39,133,255,.08)}

.package-starter h3,.package-umkm h3{font-size:23px;margin:20px 0 8px}
.package-starter .package-desc,.package-umkm .package-desc{font-size:12.5px;line-height:1.6;min-height:0}
.package-starter .package-price,.package-umkm .package-price{margin:17px 0 16px}
.package-starter .package-price strong,.package-umkm .package-price strong{font-size:34px}
.package-starter .package-list,.package-umkm .package-list{gap:9px;margin-bottom:18px;font-size:12px}
.package-starter .package-cta,.package-umkm .package-cta{min-height:44px;border-radius:12px}

.package-catalog,.package-school{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;column-gap:24px}
.package-catalog .package-head,.package-school .package-head{grid-column:1/-1}
.package-catalog h3,.package-school h3{grid-column:1;font-size:25px;margin:22px 0 8px}
.package-catalog .package-desc,.package-school .package-desc{grid-column:1;min-height:0;max-width:520px}
.package-catalog .package-price,.package-school .package-price{grid-column:2;grid-row:2/4;align-self:center;margin:0;flex-direction:column;align-items:flex-end;gap:5px}
.package-catalog .package-price small,.package-school .package-price small{padding:0}
.package-catalog .package-price strong,.package-school .package-price strong{font-size:42px}
.package-catalog .package-list,.package-school .package-list{grid-column:1;margin:18px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px}
.package-catalog .package-cta,.package-school .package-cta{grid-column:1/-1;margin-top:20px}

/* More intentional hover language across pricing cards. */
.package-card{transform-origin:50% 70%}
@media(hover:hover) and (pointer:fine){
  .package-grid:has(.package-card:hover) .package-card:not(:hover){opacity:.72;filter:saturate(.86);transform:scale(.993)}
  .package-card{transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .3s ease,filter .3s ease,border-color .3s,box-shadow .35s}
  .package-card:hover{opacity:1!important;filter:none!important;z-index:2}
  .package-business:hover{transform:translateY(-5px) scale(1.006)}
}

@media(max-width:980px){
  .package-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "business business"
      "starter umkm"
      "catalog school";
  }
  .package-business{min-height:0!important;padding:26px!important}
  .package-business .package-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .package-business .package-cta{max-width:none}
  .package-catalog,.package-school{display:flex;flex-direction:column}
  .package-catalog .package-price,.package-school .package-price{align-self:auto;flex-direction:row;align-items:flex-end;margin:20px 0}
  .package-catalog .package-list,.package-school .package-list{grid-template-columns:1fr;margin:0 0 22px}
}

@media(max-width:680px){
  .hero-typed{
    width:100%;max-width:100%;min-height:58px;padding:9px 11px 9px 9px;gap:10px;
    display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;
    align-items:center;border-radius:15px;overflow:hidden;
  }
  .hero-typed:hover{transform:none}
  .hero-typed-mark{grid-column:1;grid-row:1/3;width:30px;height:30px;border-radius:10px;align-self:center}
  .hero-typed-prefix{grid-column:2;grid-row:1;font-size:9px;line-height:1;color:#718da7;letter-spacing:.025em;white-space:normal}
  .hero-typed-text{grid-column:2;grid-row:2;display:block;width:100%;min-height:18px;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:clip;padding-right:14px}
  .typed-cursor{font-size:12px;margin-left:1px}

  .package-grid{grid-template-columns:1fr!important;grid-template-areas:"business" "starter" "umkm" "catalog" "school";gap:12px!important}
  .package-business,.package-starter,.package-umkm,.package-catalog,.package-school{padding:20px!important;border-radius:21px!important}
  .package-business h3{font-size:31px;margin-top:23px}
  .package-business .package-price{margin:22px 0 20px}
  .package-business .package-price strong{font-size:48px}
  .package-business .package-list{grid-template-columns:1fr;gap:10px}
  .package-business::before{height:45%;inset:auto -18% -18% 25%;opacity:.6}
  .package-starter h3,.package-umkm h3,.package-catalog h3,.package-school h3{font-size:23px;margin:20px 0 8px}
  .package-starter .package-price strong,.package-umkm .package-price strong,.package-catalog .package-price strong,.package-school .package-price strong{font-size:37px}
  .package-catalog .package-list,.package-school .package-list{grid-template-columns:1fr}
  .package-card:active{transform:scale(.987)!important;border-color:rgba(103,215,255,.26)}
}

@media(max-width:390px){
  .hero-typed{min-height:56px;grid-template-columns:28px minmax(0,1fr);gap:9px;padding:8px 9px}
  .hero-typed-mark{width:28px;height:28px}
  .hero-typed-prefix{display:block;font-size:8.5px}
  .hero-typed-text{font-size:11.5px;padding-right:9px}
  .package-business .package-badge{font-size:7.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
}

/* v8.2 — keep Typed.js compact on mobile, same visual language as desktop */
@media (max-width:680px){
  .hero-typed{
    width:fit-content!important;
    max-width:calc(100vw - 40px)!important;
    min-height:42px!important;
    padding:8px 12px 8px 9px!important;
    gap:8px!important;
    display:inline-flex!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    align-items:center!important;
    justify-self:start;
    border-radius:14px!important;
    overflow:visible!important;
  }
  .hero-typed-mark{
    grid-column:auto!important;
    grid-row:auto!important;
    width:27px!important;
    height:27px!important;
    border-radius:9px!important;
    align-self:auto!important;
  }
  .hero-typed-prefix{
    grid-column:auto!important;
    grid-row:auto!important;
    display:inline!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .hero-typed-text{
    grid-column:auto!important;
    grid-row:auto!important;
    display:inline!important;
    width:auto!important;
    min-height:0!important;
    max-width:46vw;
    padding-right:0!important;
    font-size:11.5px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .typed-cursor{font-size:11.5px!important;margin-left:1px!important}
}
@media (max-width:390px){
  .hero-typed{
    max-width:calc(100vw - 32px)!important;
    min-height:40px!important;
    padding:7px 10px 7px 8px!important;
    gap:7px!important;
  }
  .hero-typed-mark{width:25px!important;height:25px!important}
  .hero-typed-prefix{display:inline!important;font-size:8.5px!important}
  .hero-typed-text{font-size:10.5px!important;max-width:43vw}
  .typed-cursor{font-size:10.5px!important}
}


/* v8.6: Lenis integration + overflow-safe hero CTA feedback */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.hero-actions{min-width:0;max-width:100%}
.hero-actions .btn{position:relative;isolation:isolate;overflow:hidden;max-width:100%;transform-origin:center;contain:paint}
.hero-actions .btn>svg,.hero-actions .btn>span{position:relative;z-index:2}
.hero-actions .btn .tap-ripple{z-index:1}
@media(max-width:640px){
  .hero-actions{overflow:clip;padding:2px;margin-inline:-2px;width:calc(100% + 4px)}
  .hero-actions .btn{width:100%;min-width:0;transform:none!important}
}
@media(prefers-reduced-motion:reduce){.lenis.lenis-smooth{scroll-behavior:auto!important}}

/* v8.8 — reliable hit targets / stacking-context fix */
.hero-copy{position:relative;z-index:6;isolation:isolate}
.hero-actions,.hero-quicklinks,.hero-typed{position:relative;z-index:8}
.hero-visual{position:relative;z-index:2;pointer-events:none}
.hero-visual .browser-card,.hero-visual .floating-pill,.hero-visual .visual-halo{pointer-events:none}
.btn,.quicklink,.nav-cta,.package-cta,.custom-strip-cta,.floating-wa,.chat-option,.faq-question,.project-open,.footer-cta{position:relative;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn::before,.btn::after,.nav-cta::before,.nav-cta::after,.package-cta::before,.package-cta::after,.custom-strip-cta::before,.custom-strip-cta::after{pointer-events:none}
.tap-ripple{pointer-events:none!important}
.page-loader.is-leaving{pointer-events:none!important}

@media(max-width:980px){
  .hero-copy{z-index:8}
  .hero-visual{z-index:1}
}

/* v9.0 performance pass — preserve look, reduce repaint/compositing cost */
.ambient{contain:strict;transform:translateZ(0)}
.ambient-orb{filter:none!important;will-change:auto;transform:translateZ(0)}
.orb-a{background:radial-gradient(circle,rgba(0,179,255,.24) 0%,rgba(33,112,255,.12) 30%,rgba(68,90,255,.05) 52%,transparent 72%)}
.orb-b{background:radial-gradient(circle,rgba(33,104,255,.17) 0%,rgba(0,217,255,.07) 34%,rgba(0,217,255,.025) 54%,transparent 72%)}
.visual-halo{filter:none!important;background:radial-gradient(circle,rgba(72,195,255,.18),rgba(41,83,255,.075) 42%,rgba(41,83,255,.025) 56%,transparent 70%);transform:translateZ(0)}
.cta-glow{filter:none!important;background:radial-gradient(circle,rgba(61,202,255,.20),rgba(50,74,255,.07) 42%,rgba(50,74,255,.02) 58%,transparent 70%)}
.browser-card,.project-card,.package-card,.feature-card,.faq-item,.quicklink,.cta-card,.nav-shell,.chat-popover{transform:translateZ(0);backface-visibility:hidden}
.tech-track{will-change:transform;transform:translate3d(0,0,0)}
.tech-marquee.is-offscreen .tech-track{animation-play-state:paused}
.visual-halo.is-offscreen,.scan-light.is-offscreen,.floating-pill.is-offscreen{animation-play-state:paused}
body.is-scrolling .spotlight-card::before{opacity:0!important}
body.is-scrolling .package-grid:has(.package-card:hover) .package-card:not(:hover){filter:none}
body.is-scrolling .glass,
body.is-scrolling .feature-card,
body.is-scrolling .faq-item,
body.is-scrolling .quicklink,
body.is-scrolling .package-card,
body.is-scrolling .project-card,
body.is-scrolling .browser-card,
body.is-scrolling .cta-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(max-width:760px){
  .glass,.feature-card,.faq-item,.quicklink,.package-card,.project-card,.browser-card,.cta-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .visual-halo{animation-duration:7s}
  .scan-light{animation-duration:7s}
  .floating-pill{animation-duration:7s}
}