@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#08050f; --bg2:#0d0821;
  --violet:#8b5cf6; --violet-deep:#5b21b6;
  --cyan:#22d3ee; --amber:#f8b84e;
  --ink:#eae6f7; --ink-dim:#a79fc4;
  --glass:rgba(255,255,255,0.055); --glass-brd:rgba(255,255,255,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); overflow-x:hidden;
  min-height:100%; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.1; letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
.glass{background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:20px;}
::selection{background:var(--violet); color:#fff;}

#bg-canvas{position:fixed; inset:0; z-index:0; opacity:.85;}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* nav */
header{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; padding:18px 0;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 22px;}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; display:flex; align-items:center; gap:9px;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 0 14px var(--cyan);}
nav ul{list-style:none; display:flex; gap:34px;}
nav a.nlink{font-size:.94rem; color:var(--ink-dim); transition:color .25s; display:flex; align-items:center; gap:5px;}
nav a.nlink:hover, nav a.nlink.active{color:var(--ink);}
.has-mega{position:relative; padding-bottom:22px; margin-bottom:-22px;}
.has-mega .caret{font-size:.65rem; transition:transform .25s;}
.has-mega:hover .caret{transform:rotate(180deg);}
.mega{position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%) translateY(8px); width:640px;
  padding:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; background-color: #fff;
}
.has-mega:hover .mega{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.mega h5{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--violet); margin-bottom:12px;}
.mega ul{display:block;}
.mega li{margin-bottom:9px;}
.mega a{font-size:.85rem; color:var(--ink-dim); transition:color .2s;}
.mega a:hover{color:var(--cyan);}
.cta-btn{padding:11px 22px; border-radius:100px; font-size:.9rem; font-weight:600; background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#0a0616; box-shadow:0 6px 24px rgba(139,92,246,.35); white-space:nowrap;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:60;}
.burger span{width:22px; height:2px; background:var(--ink);}
.mobile-nav{position:fixed; inset:0; background:rgba(8,5,15,.97); backdrop-filter:blur(20px); z-index:55; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.2,1);}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav{overflow-y:auto; padding:100px 24px 60px;}
.mobile-nav a{font-family:'Space Grotesk',sans-serif; font-size:1.5rem;}
.mobile-nav .msub{display:none; flex-direction:column; gap:14px; align-items:center; margin-top:4px;}
.mobile-nav .msub.open{display:flex;}
.mobile-nav .msub a{font-family:'Inter',sans-serif; font-size:.95rem; color:var(--ink-dim);}
.mobile-nav .msub h6{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--violet); margin-top:10px;}

/* hero */
.hero{position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; padding:120px 0 60px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--cyan); padding:7px 16px; border-radius:100px; margin-bottom:26px;}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.85rem); max-width:920px;}
.hero h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--violet) 60%,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{margin-top:26px; max-width:560px; font-size:1.1rem; color:var(--ink-dim); line-height:1.65;}
.hero-actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn-ghost{padding:14px 26px; border-radius:100px; border:1px solid var(--glass-brd); font-size:.92rem; font-weight:500; transition:border-color .25s,background .25s;}
.btn-ghost:hover{border-color:var(--cyan); background:rgba(34,211,238,.06);}
.btn-main{padding:15px 30px; border-radius:100px; font-weight:600; font-size:.95rem; background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#0a0616; box-shadow:0 8px 30px rgba(139,92,246,.4); display:inline-block;}
.hero-strip{margin-top:78px; display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--glass-brd); padding-top:28px;}
.hero-strip div{flex:1; min-width:130px; padding-right:24px;}
.hero-strip .num{font-family:'Space Grotesk',sans-serif; font-size:2.1rem; font-weight:700; color:var(--ink);}
.hero-strip .lbl{font-size:.82rem; color:var(--ink-dim); margin-top:2px;}

/* page banner (inner pages) */
.page-banner{position:relative; z-index:2; padding:170px 0 90px; overflow:hidden;}
.page-banner .banner-img{position:absolute; inset:0; z-index:-1;}
.page-banner .banner-img img{width:100%; height:100%; object-fit:cover; opacity:.28;}
.page-banner .banner-img::after{content:'';position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,5,15,.4),var(--bg) 92%);}
.page-banner span.tag{color:var(--amber);}
.page-banner h1{font-size:clamp(2.2rem,5vw,3.6rem); margin-top:12px;}
.page-banner p{margin-top:16px; max-width:560px; color:var(--ink-dim); font-size:1.05rem;}
.crumb{font-size:.85rem; color:var(--ink-dim);}
.crumb a{color:var(--cyan);}

/* sections */
section{position:relative; z-index:2; padding:120px 0;}
.tag{font-size:.82rem; color:var(--amber); font-weight:600; margin-bottom:14px; display:block;}
.sec-head{max-width:640px; margin-bottom:60px;}
.sec-head h2{font-size:clamp(2rem,4vw,2.9rem);}
.sec-head p{margin-top:16px; color:var(--ink-dim); font-size:1.02rem; line-height:1.6;}

/* image frame */
.img-frame{border-radius:20px; overflow:hidden; border:1px solid var(--glass-brd); position:relative;}
.img-frame img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.img-frame:hover img{transform:scale(1.06);}

/* services grid (home preview) */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.svc-card{overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s; position:relative;}
.svc-card:hover{transform:translateY(-8px); border-color:rgba(139,92,246,.5);}
.svc-card .svc-img{height:170px; overflow:hidden;}
.svc-card .svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.svc-card:hover .svc-img img{transform:scale(1.08);}
.svc-card .svc-body{padding:26px 26px 30px;}
.svc-card .ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px; background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(34,211,238,.2)); border:1px solid var(--glass-brd);}
.svc-card h3{font-size:1.15rem; margin-bottom:9px;}
.svc-card p{color:var(--ink-dim); font-size:.92rem; line-height:1.55; margin-bottom:14px;}
.svc-card .tags{display:flex; flex-wrap:wrap; gap:7px;}
.svc-card .tags span{font-size:.72rem; padding:4px 10px; border-radius:100px; background:rgba(255,255,255,.05); color:var(--ink-dim); border:1px solid var(--glass-brd);}
.svc-card a.more{font-size:.85rem; color:var(--cyan); margin-top:14px; display:inline-block;}

/* service detail rows (services page) */
.svc-detail{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0; border-bottom:1px solid var(--glass-brd);}
.svc-detail:last-child{border-bottom:none;}
.svc-detail.rev .img-col{order:2;}
.svc-detail .img-col .img-frame{aspect-ratio:4/3;}
.svc-detail h3{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:16px;}
.svc-detail p{color:var(--ink-dim); font-size:.98rem; line-height:1.65; margin-bottom:18px;}
.svc-detail ul{list-style:none; margin-bottom:18px;}
.svc-detail li{font-size:.92rem; color:var(--ink-dim); padding:8px 0 8px 26px; position:relative; border-top:1px solid var(--glass-brd);}
.svc-detail li:first-child{border-top:none;}
.svc-detail li::before{content:'✓'; position:absolute; left:0; color:var(--cyan);}

/* stats band */
.stats{background:linear-gradient(120deg,rgba(91,33,182,.28),rgba(34,211,238,.08)); border-top:1px solid var(--glass-brd); border-bottom:1px solid var(--glass-brd);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:700; background:linear-gradient(120deg,var(--cyan),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-lbl{color:var(--ink-dim); font-size:.9rem; margin-top:6px;}

/* why choose */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.why-list .item{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--glass-brd);}
.why-list .item:last-child{border-bottom:none;}
.why-list .n{font-family:'Space Grotesk',sans-serif; font-size:1.6rem; color:var(--violet); min-width:44px;}
.why-list h4{font-size:1.08rem; margin-bottom:6px;}
.why-list p{color:var(--ink-dim); font-size:.92rem; line-height:1.55;}
.why-visual{aspect-ratio:1/1;}
.why-visual .img-frame{width:100%; height:100%;}

/* portfolio */
.pf-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:18px;}
.pf-card{border-radius:20px; position:relative; overflow:hidden; grid-column:span 2; display:flex; align-items:flex-end; padding:24px; border:1px solid var(--glass-brd);}
.pf-card:nth-child(1){grid-column:span 2; grid-row:span 2;}
.pf-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s;}
.pf-card:hover img{transform:scale(1.08);}
.pf-card::before{content:'';position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,5,15,.88),rgba(8,5,15,.15) 60%); z-index:0;}
.pf-card .pf-txt{position:relative; z-index:1;}
.pf-card h4{font-size:1.1rem;}
.pf-card p{font-size:.8rem; color:var(--ink-dim); margin-top:3px;}

/* marquee */
.marquee{overflow:hidden; border-top:1px solid var(--glass-brd); border-bottom:1px solid var(--glass-brd); padding:26px 0;}
.marquee-track{display:flex; gap:52px; white-space:nowrap; width:max-content; animation:mq 26s linear infinite;}
.marquee-track span{font-family:'Space Grotesk',sans-serif; font-size:1.4rem; color:var(--ink-dim); opacity:.6;}
@keyframes mq{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* team/clients */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.team-card{overflow:hidden; text-align:center;}
.team-card .img-frame{aspect-ratio:1/1; border-radius:20px 20px 0 0;}
.team-card .tc-body{padding:18px;}
.team-card h4{font-size:1rem;}
.team-card p{color:var(--ink-dim); font-size:.82rem; margin-top:3px;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:44px;}
.info-item{display:flex; gap:16px; margin-bottom:26px;}
.info-item .ic{width:44px; height:44px; border-radius:12px; background:rgba(139,92,246,.18); border:1px solid var(--glass-brd); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;}
.info-item h4{font-size:.98rem;}
.info-item p, .info-item a{color:var(--ink-dim); font-size:.92rem; margin-top:2px;}
form{padding:38px;}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
input,textarea,select{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--glass-brd); border-radius:12px; padding:14px 16px; color:var(--ink); font-family:'Inter',sans-serif; font-size:.92rem; outline:none; transition:border-color .25s;}
input:focus,textarea:focus,select:focus{border-color:var(--cyan);}
textarea{resize:vertical; min-height:110px;}
.submit-btn{width:100%; padding:15px; border-radius:12px; font-weight:600; margin-top:6px; background:linear-gradient(135deg,var(--violet),var(--cyan)); color:#0a0616; cursor:pointer; border:none; font-size:.95rem;}
.form-note{font-size:.82rem; color:var(--ink-dim); margin-top:12px; opacity:0; transition:opacity .3s;}
.form-note.show{opacity:1;}
.map-frame{aspect-ratio:16/8; border-radius:20px; overflow:hidden; margin-top:60px;}
.map-frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) brightness(.55);}
.offices-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px;}
.office-card{padding:26px;}
.office-card h4{font-size:1rem; margin-bottom:8px;}
.office-card p{color:var(--ink-dim); font-size:.88rem; line-height:1.5;}

/* footer */
footer{padding:60px 0 40px; border-top:1px solid var(--glass-brd); position:relative; z-index:2;}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px;}
.ftr-grid h5{font-size:.9rem; margin-bottom:16px; color:var(--ink-dim);}
.ftr-grid ul{list-style:none;}
.ftr-grid li{margin-bottom:10px;}
.ftr-grid a{font-size:.9rem; color:var(--ink-dim); transition:color .2s;}
.ftr-grid a:hover{color:var(--cyan);}
.ftr-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--ink-dim); padding-top:26px; border-top:1px solid var(--glass-brd);}

@media(max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .why-grid{grid-template-columns:1fr;}
  .pf-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}
  .pf-card:nth-child(1){grid-column:span 2; grid-row:span 1;}
  .contact-grid{grid-template-columns:1fr;}
  .ftr-grid{grid-template-columns:1fr 1fr;}
  .svc-detail{grid-template-columns:1fr; gap:26px;}
  .svc-detail.rev .img-col{order:0;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .offices-grid{grid-template-columns:1fr;}
  nav ul{display:none;}
  .burger{display:flex;}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .pf-grid{grid-template-columns:1fr;}
  .f-row{grid-template-columns:1fr;}
  .ftr-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  form{padding:26px;}
  .team-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}