:root{
  --ink:#0E1526; --ink-soft:#1B2740; --paper:#F5F7FB; --paper-dim:#E7ECF6;
  --accent:#2F6FED; --accent-soft:#D9E6FD; --accent-warm:#33C6F4; --muted:#5A6478; --white:#FFFFFF;
  --line: rgba(14,21,38,0.12); --line-light: rgba(245,247,251,0.16);
  --shadow-tint: rgba(47,111,237,0.22);
  --disp:'Space Grotesk', sans-serif; --body:'Inter', sans-serif; --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; font-size:18px;}
body{font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; font-weight:500;}
p, li{font-weight:500;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px; position:relative;}
h1,h2,h3,h4{font-family:var(--disp); letter-spacing:-0.01em;}
.eyebrow{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent); display:inline-block;}
.btn{font-family:var(--body); font-weight:700; font-size:16px; padding:14px 26px; border-radius:6px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, background .2s, box-shadow .2s;}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-accent{background:linear-gradient(135deg, var(--accent), #1748c9); color:var(--white); box-shadow:0 8px 22px var(--shadow-tint);}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(47,111,237,0.4);}
section{padding:56px 0; position:relative;}
.section-head{max-width:680px; margin-bottom:32px;}
.section-head h2{font-size:38px; font-weight:700; margin-top:12px; line-height:1.12;}
.muted{color:var(--muted);}
.hl{background:linear-gradient(180deg, transparent 58%, var(--accent-soft) 58%); padding:0 2px;}

/* dot-grid texture helper */
.dotgrid{position:absolute; inset:0; background-image:radial-gradient(rgba(18,24,27,0.07) 1px, transparent 1px); background-size:20px 20px; -webkit-mask-image:radial-gradient(ellipse 60% 100% at 50% 0%, black, transparent 80%); mask-image:radial-gradient(ellipse 60% 100% at 50% 0%, black, transparent 80%); pointer-events:none; z-index:0;}

header{position:sticky; top:0; z-index:60; background:rgba(246,244,239,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; position:relative;}
.wordmark{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.home-icon-link{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; color:var(--ink); transition:background .2s, color .2s;}
.home-icon-link:hover{background:var(--accent-soft); color:var(--accent);}
.home-icon-link svg{width:19px; height:19px;}
.wgroup{position:relative; cursor:pointer; padding:5px 4px; border-radius:6px;}
.wgroup:hover, .wgroup.open{background:var(--accent-soft);}
.wgroup-label{display:flex; align-items:baseline; font-family:var(--disp); line-height:1; white-space:nowrap;}
.wgroup-label .big{font-size:27px; font-weight:700; background:linear-gradient(135deg, var(--accent), var(--accent-warm) 150%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.wgroup-label .rest{font-size:14.5px; font-weight:700; color:var(--muted); margin-left:1px;}
.dropdown{
  position:absolute; top:44px; left:0; min-width:210px; background:var(--white);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 44px rgba(18,24,27,0.14);
  padding:6px; opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease; z-index:70;
}
.dropdown.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.dropdown a{display:flex; align-items:center; gap:9px; padding:9px 12px; font-size:13px; font-weight:500; border-radius:6px;}
.dropdown a:hover{background:var(--paper-dim);}
.dropdown svg{width:15px; height:15px; color:var(--accent); flex-shrink:0;}
.btn-primary{font-size:13px; padding:10px 16px;}

.hero{padding:52px 0 40px; overflow:hidden;}
.hero::before{content:""; position:absolute; top:-100px; right:-70px; width:380px; height:380px; background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); border-radius:50%; z-index:0; pointer-events:none;}
.hero::after{content:""; position:absolute; bottom:-90px; right:180px; width:220px; height:220px; background:radial-gradient(circle, var(--accent-warm) 0%, transparent 72%); opacity:0.4; border-radius:50%; z-index:0; pointer-events:none;}
.hero > *{position:relative; z-index:1;}
.hero-icon{width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg, var(--accent-soft), var(--white)); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 20px var(--shadow-tint);}
.hero-icon svg{width:29px; height:29px; color:var(--accent);}
.hero h1{font-size:56px; line-height:1.04; font-weight:700; letter-spacing:-0.02em; margin:16px 0 18px; max-width:760px;}
.hero p.lede{font-size:19px; font-weight:500; color:var(--muted); max-width:560px; margin-bottom:26px; line-height:1.45;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.work-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 18px; display:flex; flex-direction:column; gap:10px; min-height:160px; box-shadow:0 1px 2px rgba(14,21,38,0.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; border-top:2px solid transparent;}
.work-card:hover{transform:translateY(-5px); box-shadow:0 20px 34px var(--shadow-tint); border-color:var(--accent-soft); border-top-color:var(--accent);}
.icon-circle{width:36px; height:36px; border-radius:9px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center;}
.icon-circle svg{width:18px; height:18px; color:var(--accent);}
.work-card .num{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);}
.work-card h3{font-size:21px; font-weight:700; line-height:1.15;}
.work-card p{font-size:14px; font-weight:500; color:var(--muted); flex-grow:1;}
.work-card .learn{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink); border-top:1px solid var(--line); padding-top:8px;}

.company-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.company-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 2px rgba(14,21,38,0.04); transition:transform .2s ease, box-shadow .2s ease;}
.company-card:hover{transform:translateY(-5px); box-shadow:0 20px 34px var(--shadow-tint);}
.company-card h4{font-size:22px; font-weight:700; line-height:1.15;}
.company-card p{font-size:14px; font-weight:500; color:var(--muted);}
.company-card .learn{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);}

.cta-band{position:relative; background:radial-gradient(circle at 15% 20%, var(--ink-soft), var(--ink) 65%); color:var(--paper); text-align:center; padding:52px 0; overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(246,244,239,0.08) 1px, transparent 1px); background-size:22px 22px;}
.cta-band .wrap{position:relative; z-index:1;}
.cta-band h2{color:var(--paper); font-size:34px; margin-bottom:14px; line-height:1.15;}
.cta-band p{color:rgba(246,244,239,0.78); max-width:480px; margin:0 auto 22px; font-size:16px; font-weight:500;}

.included-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.included-item{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; transition:transform .2s ease, box-shadow .2s ease;}
.included-item:hover{transform:translateY(-3px); box-shadow:0 14px 26px var(--shadow-tint);}
.included-item .icon-circle{width:30px; height:30px; border-radius:8px; flex-shrink:0;}
.included-item .icon-circle svg{width:15px; height:15px;}
.included-item h4{font-size:19px; font-weight:700; margin-bottom:5px; line-height:1.15;}
.included-item p{font-size:13.5px; font-weight:500; color:var(--muted);}

.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.stat-card{border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--white); text-align:center; box-shadow:0 1px 2px rgba(18,24,27,0.04);}
.stat-num{font-family:var(--disp); font-size:38px; font-weight:700; background:linear-gradient(135deg, var(--accent), var(--accent-warm)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-label{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; margin-top:6px;}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.portfolio-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); box-shadow:0 1px 2px rgba(18,24,27,0.04); transition:transform .2s ease, box-shadow .2s ease;}
.portfolio-card:hover{transform:translateY(-5px); box-shadow:0 20px 34px var(--shadow-tint);}
.portfolio-thumb{aspect-ratio:16/10; background:linear-gradient(135deg, var(--accent-soft), var(--paper-dim)); display:flex; align-items:center; justify-content:center;}
.portfolio-thumb svg{width:34px; height:34px; color:var(--accent); opacity:0.7;}
.portfolio-body{padding:16px 18px;}
.portfolio-body .tag{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
.portfolio-body h4{font-size:17px; font-weight:700; margin:6px 0 4px;}
.portfolio-body p{font-size:13.5px; font-weight:500; color:var(--muted);}

.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.team-photo{aspect-ratio:1; background:linear-gradient(135deg, var(--paper-dim), var(--accent-soft)); border:1px solid var(--line); border-radius:10px;}
.team-card h4{font-size:15px; font-weight:700; margin-top:8px;}
.team-card span{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted);}

.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.value-card{padding:18px; border-radius:10px; background:var(--white); border:1px solid var(--line); box-shadow:0 1px 2px rgba(18,24,27,0.04);}
.value-card .icon-circle{margin-bottom:10px;}
.value-card h4{font-size:20px; font-weight:700; margin-bottom:7px; line-height:1.15;}
.value-card p{font-size:14px; font-weight:500; color:var(--muted);}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
form{display:flex; flex-direction:column; gap:12px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
input, textarea{font-family:var(--body); font-size:13.5px; padding:11px 13px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink); width:100%;}
input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.checks{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px;}
.check-pill{display:flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line); padding:8px 12px; border-radius:20px; background:var(--white); cursor:pointer;}
.check-pill input{width:auto;}
.contact-info-row{display:flex; gap:10px; align-items:baseline; font-size:15px; font-weight:500; padding:11px 0; border-bottom:1px solid var(--line);}
.contact-info-row .label{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; width:80px; flex-shrink:0;}

footer{background:var(--ink); color:rgba(246,244,239,0.6); padding:32px 0 22px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:18px; margin-bottom:22px;}
.footer-logo{font-family:var(--disp); font-weight:700; font-size:18px; color:var(--paper);}
.footer-cols{display:flex; gap:36px; flex-wrap:wrap;}
.footer-col{display:flex; flex-direction:column; gap:7px;}
.footer-col span.head{font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--accent-soft); text-transform:uppercase;}
.footer-col a{font-size:13.5px; font-weight:500; opacity:.85;}
.footer-bottom{border-top:1px solid var(--line-light); padding-top:15px; display:flex; justify-content:space-between; font-size:12px; font-weight:500; font-family:var(--mono); flex-wrap:wrap; gap:8px;}

.page{display:none;}
.page.active{display:block;}

@media (max-width:820px){
  .hero h1{font-size:36px;}
  .section-head h2{font-size:28px;}
  .cta-band h2{font-size:26px;}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .company-grid{grid-template-columns:1fr;}
  .included-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .wordmark{gap:8px;}
  .wgroup-label .big{font-size:19px;}
  .wgroup-label .rest{font-size:11px;}
}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.portfolio-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); box-shadow:0 1px 2px rgba(14,21,38,0.04); transition:transform .2s ease, box-shadow .2s ease;}
.portfolio-card:hover{transform:translateY(-5px); box-shadow:0 20px 34px var(--shadow-tint);}
.portfolio-thumb{aspect-ratio:16/10; background:linear-gradient(135deg, var(--accent-soft), var(--paper-dim)); display:flex; align-items:center; justify-content:center;}
.portfolio-thumb svg{width:34px; height:34px; color:var(--accent); opacity:0.7;}
.portfolio-body{padding:16px 18px;}
.portfolio-body .tag{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
.portfolio-body h4{font-size:17px; font-weight:700; margin:6px 0 4px;}
.portfolio-body p{font-size:13.5px; font-weight:500; color:var(--muted);}
@media (max-width:820px){ .portfolio-grid{grid-template-columns:1fr;} }

.nav-cta{display:flex; align-items:center; gap:18px;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px;}
.hamburger span{width:24px; height:2px; background:var(--ink); display:block;}
.mobile-panel{display:none;}
@media (max-width:820px){
  .wgroup{display:none;}
  .nav-cta .btn-primary{display:none;}
  .hamburger{display:flex;}
  .mobile-panel{display:none; flex-direction:column; background:var(--white); border-top:1px solid var(--line); padding:10px 28px 22px; max-height:70vh; overflow-y:auto;}
  .mobile-panel.open{display:flex;}
  .mobile-group-toggle{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-family:var(--disp); font-size:18px; font-weight:700; cursor:pointer;}
  .mobile-group-toggle::after{content:"+"; color:var(--accent); font-family:var(--mono);}
  .mobile-group-items{display:none; flex-direction:column; padding:4px 0 8px 10px;}
  .mobile-group-items.open{display:flex;}
  .mobile-group-items a{padding:10px 0; font-size:15px; font-weight:500; color:var(--muted);}
}

.hero{padding-left:28px; padding-right:28px;}