:root{
  --void:#060a0c; --panel:#0b1114; --panel2:#101a1e;
  --teal:#22e6c8; --blue:#3468ff; --white:#f5f9fa; --silver:#aebac0; --muted:#7d8a8f;
  --line: rgba(174,186,192,.14); --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--void); color:var(--white); font-family:'Arimo',sans-serif; line-height:1.55; overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.1;}
.script{font-family:'Mrs Saint Delafield', cursive; color:var(--teal); font-weight:400;}
a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{font-family:'Unbounded'; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal); display:inline-block;}
.grid-lines{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 0%, black, transparent 75%);}
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(6,10,12,.72); border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto;}
.logo{height:30px;}
.nav-links{display:flex; gap:34px; font-size:14px; color:var(--silver);}
.nav-links a:hover{color:var(--teal);}
.nav-links a.active{color:var(--teal);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:100px; font-size:14px; font-weight:600; transition:.2s; white-space:nowrap;}
.btn-primary{background:var(--teal); color:#04211d;}
.btn-primary:hover{background:#5cf2da; transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line); color:var(--white);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}
.btn-block{width:100%; justify-content:center;}
section{position:relative; z-index:1; padding:90px 0;}
.section-head{max-width:600px; margin-bottom:50px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px); color:var(--white);}
.section-head p{color:var(--muted); margin-top:14px; font-size:15px;}
/* hero */
.hero{position:relative; padding:110px 24px 90px; overflow:hidden;}
.hero::after{content:""; position:absolute; top:-200px; right:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,230,200,.22), transparent 70%); z-index:0;}
.hero::before{content:""; position:absolute; bottom:-220px; left:-160px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(52,104,255,.18), transparent 70%); z-index:0;}
.hero-inner{position:relative; z-index:1; max-width:760px;}
.hero h1{font-size:clamp(34px,5vw,58px); color:var(--white);}
.hero h1 span{color:var(--teal);}
.hero p{margin:22px 0 30px; font-size:16.5px; color:var(--silver); max-width:540px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:44px; margin-top:56px; flex-wrap:wrap;}
.hero-stats div b{font-family:'Unbounded'; font-size:26px; color:var(--white); display:block;}
.hero-stats div span{font-size:12px; color:var(--muted); letter-spacing:.05em;}
.hero-price{position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-top:34px; padding:16px 22px; background:var(--panel); border:1px solid var(--line); border-radius:100px; width:fit-content;}
.hero-price .amount{font-family:'Unbounded'; font-size:20px; color:var(--teal);}
.hero-price .unit{font-size:12px; color:var(--muted);}
/* services grid */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.service-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; transition:.25s;}
.service-card:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(34,230,200,.25);}
.service-icon{width:42px; height:42px; border-radius:10px; background:var(--panel2); display:flex; align-items:center; justify-content:center; color:var(--teal);}
.service-card h3{font-size:17px; font-weight:600; font-family:'Arimo'; color:var(--white);}
.service-card p{font-size:13.5px; color:var(--muted); flex:1;}
.service-foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.price{font-family:'Unbounded'; font-size:15px; color:var(--teal);}
.price small{font-family:'Arimo'; color:var(--muted); font-weight:400; font-size:11px; display:block;}
.mini-cta{font-size:12.5px; color:var(--teal); font-weight:600; display:flex; align-items:center; gap:4px;}
/* process */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.process-step{padding:26px; border-left:1px solid var(--line);}
.process-step .num{font-family:'Unbounded'; color:var(--teal); font-size:13px;}
.process-step h3{margin:10px 0 8px; font-size:18px; color:var(--white); font-family:'Unbounded'; font-weight:600;}
.process-step p{color:var(--muted); font-size:14px;}
/* feature list */
.feature-list{display:flex; flex-direction:column; gap:14px; margin:26px 0 34px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--silver);}
.feature-list li .tick{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(34,230,200,.14); color:var(--teal); display:flex; align-items:center; justify-content:center; margin-top:2px;}
.detail-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start;}
.audience-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-top:10px;}
.audience-box b{color:var(--teal); font-family:'Unbounded'; font-size:12px; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:8px;}
/* order card */
.order-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:sticky; top:100px;}
.order-card h3{font-family:'Unbounded'; font-size:17px; margin-bottom:4px;}
.order-card .sub{color:var(--muted); font-size:13px; margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{font-size:12px; color:var(--silver); display:block; margin-bottom:6px;}
.field input, .field textarea{width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--white); font-family:'Arimo'; font-size:14px;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--teal);}
.field textarea{resize:vertical; min-height:80px;}
/* portfolio */
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.p-tile{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px;}
.p-tile span{position:relative; z-index:2; font-size:13px; color:var(--white); font-weight:600;}
.p-tile small{position:relative; z-index:2; color:var(--teal); font-size:11px; letter-spacing:.08em; text-transform:uppercase;}
.p-tile .stack{position:relative; z-index:2; display:flex; flex-direction:column; gap:2px;}
.p-tile::before{content:""; position:absolute; inset:0; z-index:1; opacity:.9;}
.p-tile.t1::before{background:linear-gradient(135deg,#0f5c53,#0b1114);}
.p-tile.t2::before{background:linear-gradient(135deg,#122a5c,#0b1114);}
.p-tile.t3::before{background:linear-gradient(135deg,#0f5c53,#122a5c);}
.p-tile.t4::before{background:linear-gradient(135deg,#1a1f22,#0f5c53);}
.p-tile.t5::before{background:linear-gradient(135deg,#0b1114,#122a5c);}
.p-tile.t6::before{background:linear-gradient(135deg,#122a5c,#1a1f22);}
.p-tile.t7::before{background:linear-gradient(135deg,#0f5c53,#1a1f22);}
.p-tile.t8::before{background:linear-gradient(135deg,#122a5c,#0f5c53);}
.p-tile.t9::before{background:linear-gradient(135deg,#1a1f22,#122a5c);}
.play{position:absolute; top:16px; right:16px; z-index:2; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);}
.portfolio-note{margin-top:24px; font-size:13px; color:var(--muted); border:1px dashed var(--line); padding:14px 18px; border-radius:10px;}
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px;}
.filter-btn{padding:9px 18px; border-radius:100px; border:1px solid var(--line); font-size:13px; color:var(--silver); background:none;}
.filter-btn.active{background:var(--teal); color:#04211d; border-color:var(--teal);}
/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.contact-info-item{display:flex; gap:16px; align-items:flex-start; margin-bottom:26px;}
.contact-info-item .ci-icon{width:42px; height:42px; border-radius:10px; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--teal); flex-shrink:0;}
.contact-info-item b{display:block; font-size:15px; margin-bottom:3px;}
.contact-info-item span{font-size:13.5px; color:var(--muted);}
.qr-box{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; width:170px; margin-top:10px;}
.qr-box img{border-radius:6px;}
.contact-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
/* footer */
footer{background:var(--panel); border-top:1px solid var(--line); padding:80px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px;}
.foot-tagline{color:var(--muted); font-size:14px; margin:18px 0 24px; max-width:280px;}
.foot-wa{display:flex; align-items:center; gap:12px; background:var(--panel2); border:1px solid var(--line); border-radius:100px; padding:10px 18px; width:fit-content;}
.foot-wa b{font-family:'Unbounded'; font-size:15px;}
.foot-col h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}
.foot-col a, .foot-col p{display:block; color:var(--silver); font-size:14px; margin-bottom:12px;}
.foot-col a:hover{color:var(--teal);}
.social-row{display:flex; gap:10px; margin-top:10px;}
.social-row a{width:36px; height:36px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.social-row a:hover{border-color:var(--teal); color:var(--teal);}
.foot-bottom{margin-top:60px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:12px; color:var(--muted); flex-wrap:wrap; gap:10px;}
@media(max-width:860px){
  .nav-links{display:none;}
  .services-grid,.process,.portfolio-grid{grid-template-columns:1fr 1fr;}
  .foot-grid,.detail-grid,.contact-grid{grid-template-columns:1fr;}
  .order-card{position:static;}
}
@media(max-width:560px){
  .services-grid,.process,.portfolio-grid{grid-template-columns:1fr;}
  .hero{padding:90px 20px 60px;}
}