:root{
  --ink:#100a26;
  --navy:#1a1040;
  --purple-deep:#3d1a78;
  --purple:#5b28a8;
  --violet:#7b2fd6;
  --magenta:#c026d3;
  --blue:#2e6ff2;
  --cyan:#3fb6e0;
  --paper:#faf9fc;
  --paper-dim:#f1eef8;
  --slate:#6b6480;
  --slate-light:#a49dbb;
  --line:#e6e1f2;
  --grad-brand: linear-gradient(120deg, var(--blue) 0%, var(--violet) 55%, var(--magenta) 100%);
  --grad-dark: linear-gradient(160deg, var(--ink) 0%, var(--purple-deep) 55%, var(--purple) 100%);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Sora', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
.script{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:400;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}
.eyebrow{
  font-family:'Sora', sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--violet);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:2px;
  background:var(--grad-brand);
  display:inline-block;
  border-radius:2px;
}
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
header.scrolled{
  background:rgba(16,10,38,0.86);
  backdrop-filter:blur(14px);
  padding:12px 0;
  box-shadow:0 8px 30px rgba(16,10,38,0.25);
}
/* solid header variant for inner pages (non-transparent hero) */
header.solid{
  background:rgba(16,10,38,0.98);
  padding:14px 0;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:0 32px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .wmark{width:36px; height:36px;}
.brand-text{ line-height:1.05; }
.brand-text .top{ font-family:'Sora'; font-weight:800; font-size:16px; color:#fff; letter-spacing:0.02em; }
.brand-text .bot{ font-family:'Sora'; font-weight:500; font-size:9.5px; color:var(--cyan); letter-spacing:0.18em; text-transform:uppercase; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:14px; font-weight:500; color:rgba(255,255,255,0.82);
  position:relative; padding:6px 0;
}
.nav-links a:hover{ color:#fff; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--grad-brand); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:#fff; }
.nav-cta{
  display:flex; align-items:center; gap:8px;
  background:var(--grad-brand); color:#fff;
  padding:10px 20px; border-radius:100px;
  font-size:13.5px; font-weight:600;
  box-shadow:0 6px 18px rgba(123,47,214,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(123,47,214,0.45); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{
  background:var(--grad-dark);
  padding:170px 0 90px;
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(63,182,224,0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(192,38,211,0.22), transparent 50%);
  pointer-events:none;
}
.page-hero-watermark{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:420px; opacity:0.10; pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--cyan); margin-bottom:18px; }
.page-hero h1{
  color:#fff; font-size:clamp(36px,5.4vw,60px); line-height:1.05; max-width:760px;
}
.page-hero p{
  color:rgba(255,255,255,0.65); font-size:17px; line-height:1.7; max-width:560px; margin-top:20px;
}
.crumb{ display:flex; gap:8px; align-items:center; margin-top:26px; font-size:13px; color:rgba(255,255,255,0.5); }
.crumb a:hover{ color:#fff; }
.crumb .sep{ opacity:0.4; }

/* ---------- HOME HERO ---------- */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--grad-dark);
  position:relative; overflow:hidden;
  padding:150px 0 70px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(63,182,224,0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(192,38,211,0.22), transparent 50%);
  pointer-events:none;
}
.hero-watermark{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:640px; opacity:0.10; pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; padding:0 32px;
  width:100%;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  padding:7px 16px; border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:28px;
}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
h1.hero-title{
  color:#fff;
  font-size:clamp(40px, 6.4vw, 82px);
  line-height:1.02;
  max-width:820px;
  letter-spacing:-0.02em;
}
h1.hero-title .accent{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.hero-title .swash{
  display:block;
  font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
  font-size:0.62em;
  color:var(--cyan);
  margin-top:4px;
}
.hero-sub{
  color:rgba(255,255,255,0.68);
  font-size:18px; line-height:1.6;
  max-width:520px; margin-top:26px;
}
.hero-actions{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Sora'; font-weight:600; font-size:14.5px;
  padding:16px 30px; border-radius:100px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer; border:none;
}
.btn-primary{
  background:var(--grad-brand); color:#fff;
  box-shadow:0 10px 30px rgba(123,47,214,0.4);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(123,47,214,0.5); }
.btn-ghost{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.28);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
.btn-ghost.on-light{ color:var(--ink); border-color:var(--line); }
.btn-ghost.on-light:hover{ background:var(--paper-dim); }
.btn-dark{
  background:var(--ink); color:#fff;
}
.btn-dark:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,0.35); }

.hero-chips{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:76px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.chip{
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,0.85);
  font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  padding:11px 18px; border-radius:100px;
}
.chip svg{width:16px; height:16px; flex-shrink:0;}

/* ---------- SECTION HEADERS ---------- */
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; line-height:1.1; }
.sec-head p{ color:var(--slate); font-size:16.5px; line-height:1.7; margin-top:16px; }

/* ---------- ABOUT ---------- */
.about{ padding:130px 0; background:var(--paper); }
.about.tight{ padding:100px 0; }
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
.about-copy p{ color:var(--slate); font-size:16.5px; line-height:1.8; margin-bottom:18px; }
.about-copy strong{ color:var(--ink); }
.stat-row{ display:flex; gap:40px; margin-top:36px; }
.stat b{ font-family:'Sora'; font-size:30px; font-weight:800;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; display:block;}
.stat span{ font-size:13px; color:var(--slate); font-weight:500; }

.pillars{ display:flex; flex-direction:column; gap:20px; }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:28px 30px; display:flex; gap:20px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(91,40,168,0.12); border-color:transparent;}
.pillar-icon{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.pillar-icon svg{ width:22px; height:22px; }
.pillar h4{ font-size:16px; margin-bottom:6px; }
.pillar p{ font-size:14.5px; color:var(--slate); line-height:1.6; }
.p1 .pillar-icon{ background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.p2 .pillar-icon{ background:linear-gradient(135deg,var(--violet),var(--purple)); }
.p3 .pillar-icon{ background:linear-gradient(135deg,var(--magenta),var(--violet)); }

/* ---------- TEAM / VALUES STRIP (About page) ---------- */
.values-strip{ padding:0 0 130px; background:var(--paper); }
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.value-card{
  background:var(--paper-dim); border-radius:20px; padding:30px 26px;
  border:1px solid var(--line);
}
.value-card .num{ font-family:'Sora'; font-weight:800; font-size:12px; color:var(--slate-light); letter-spacing:0.1em; }
.value-card h4{ font-size:16px; margin:14px 0 8px; }
.value-card p{ font-size:13.5px; color:var(--slate); line-height:1.6; }

/* ---------- SERVICES ---------- */
.services{ padding:130px 0; background:var(--paper-dim); position:relative; }
.services.tight{ padding:100px 0; }
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card{
  background:#fff; border-radius:24px; padding:40px 32px;
  border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(26,16,64,0.14); }
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
}
.sc1::before{ background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.sc2::before{ background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.sc3::before{ background:linear-gradient(90deg,var(--violet),var(--magenta)); }
.service-num{
  font-family:'Sora'; font-weight:800; font-size:13px; color:var(--slate-light);
  letter-spacing:0.1em; margin-bottom:22px; display:block;
}
.service-icon-wrap{
  width:58px; height:58px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; color:#fff;
}
.sc1 .service-icon-wrap{ background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.sc2 .service-icon-wrap{ background:linear-gradient(135deg,var(--cyan),var(--violet)); }
.sc3 .service-icon-wrap{ background:linear-gradient(135deg,var(--violet),var(--magenta)); }
.service-icon-wrap svg{ width:26px; height:26px; }
.service-card h3{ font-size:22px; margin-bottom:12px; }
.service-card > p{ color:var(--slate); font-size:14.5px; line-height:1.7; margin-bottom:22px; }
.service-card ul{ display:flex; flex-direction:column; gap:10px; }
.service-card li{
  font-size:13.5px; color:var(--ink); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.service-card li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--violet); flex-shrink:0;
}

/* ---------- PROCESS (Services page) ---------- */
.process{ padding:0 0 130px; background:var(--paper-dim); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-step{ position:relative; padding-top:8px; }
.process-step .step-num{
  font-family:'Sora'; font-weight:800; font-size:38px;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px; display:block;
}
.process-step h4{ font-size:16px; margin-bottom:8px; }
.process-step p{ font-size:13.5px; color:var(--slate); line-height:1.6; }
.process-step:not(:last-child)::after{
  content:''; position:absolute; top:20px; right:-14px; width:20px; height:1px;
  background:var(--line);
}

/* ---------- WORK ---------- */
.work{ padding:130px 0; background:var(--paper); }
.work.tight{ padding:100px 0 60px; }
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:20px;}
.work-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn{
  font-family:'Sora'; font-size:13px; font-weight:600;
  padding:10px 20px; border-radius:100px; border:1px solid var(--line);
  background:#fff; color:var(--slate); cursor:pointer; transition:all .2s ease;
}
.filter-btn:hover{ border-color:var(--violet); color:var(--violet); }
.filter-btn.active{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.work-tile{
  aspect-ratio:4/3.1; border-radius:22px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; cursor:default;
  transition:transform .4s ease;
}
.work-tile:hover{ transform:scale(1.02); }
.work-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%);
}
.work-tile-icon{
  position:absolute; top:26px; left:26px; z-index:2;
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,0.18); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.3);
}
.work-tile-icon svg{ width:20px; height:20px; color:#fff; }
.work-tile-label{ position:relative; z-index:2; color:#fff; }
.work-tile-label .cat{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.75; font-weight:600; }
.work-tile-label h4{ font-size:19px; margin-top:4px; }
.wt1{ background:linear-gradient(150deg,#1a1040,#2e6ff2); }
.wt2{ background:linear-gradient(150deg,#2e6ff2,#7b2fd6); }
.wt3{ background:linear-gradient(150deg,#7b2fd6,#c026d3); }
.wt4{ background:linear-gradient(150deg,#3fb6e0,#5b28a8); }
.wt5{ background:linear-gradient(150deg,#5b28a8,#1a1040); }
.wt6{ background:linear-gradient(150deg,#c026d3,#3d1a78); }
.wt7{ background:linear-gradient(150deg,#2e6ff2,#3fb6e0); }
.wt8{ background:linear-gradient(150deg,#c026d3,#7b2fd6); }
.wt9{ background:linear-gradient(150deg,#1a1040,#5b28a8); }

.work-strap{
  margin-top:40px; text-align:center; padding:26px;
  background:var(--grad-brand); border-radius:18px;
  color:#fff; font-family:'Sora'; font-weight:600; font-size:15px;
}

/* ---------- WHY CHOOSE ---------- */
.why{ padding:130px 0; background:var(--grad-dark); position:relative; overflow:hidden; color:#fff; }
.why::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 80% 20%, rgba(63,182,224,0.16), transparent 45%);
}
.why-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.why-list{ display:flex; flex-direction:column; gap:26px; margin-top:36px; }
.why-item{ display:flex; gap:18px; align-items:flex-start; }
.why-check{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center;
}
.why-check svg{ width:16px; height:16px; color:#fff; }
.why-item h4{ font-size:16.5px; color:#fff; margin-bottom:5px; }
.why-item p{ font-size:14.5px; color:rgba(255,255,255,0.62); line-height:1.6; }

.why-panel{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
  border-radius:26px; padding:48px; backdrop-filter:blur(10px);
}
.why-panel .script{ color:var(--cyan); font-size:26px; display:block; margin-bottom:8px; }
.why-panel h3{ color:#fff; font-size:30px; line-height:1.2; margin-bottom:18px; }
.why-panel p{ color:rgba(255,255,255,0.65); font-size:15px; line-height:1.7; margin-bottom:30px; }
.contact-line{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.contact-line .ic{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.14);
}
.contact-line .ic svg{ width:16px; height:16px; color:var(--cyan); }
.contact-line a, .contact-line span{ color:#fff; font-size:14.5px; font-weight:500; }

/* ---------- CONTACT PAGE ---------- */
.contact-page{ padding:100px 0 130px; background:var(--paper); }
.contact-page-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea{
  font-family:'Inter'; font-size:14.5px;
  border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; background:#fff; color:var(--ink);
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--violet);
}
.field textarea{ resize:vertical; min-height:120px; font-family:'Inter'; }
.form-note{ font-size:12.5px; color:var(--slate); }

.contact-info-card{
  background:var(--grad-dark); border-radius:26px; padding:48px; color:#fff;
}
.contact-info-card h3{ font-size:24px; margin-bottom:10px; }
.contact-info-card > p{ color:rgba(255,255,255,0.6); font-size:14.5px; line-height:1.7; margin-bottom:32px; }
.map-frame{
  margin-top:32px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.14); aspect-ratio:16/9;
}
.map-frame iframe{ width:100%; height:100%; border:0; }

.contact-cta{ padding:110px 0; background:var(--paper); text-align:center; }
.contact-cta h2{ font-size:clamp(30px,4vw,48px); max-width:640px; margin:16px auto 20px; }
.contact-cta p{ color:var(--slate); font-size:16.5px; max-width:520px; margin:0 auto 36px; }
.contact-cta .hero-actions{ justify-content:center; margin-top:0; }

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:rgba(255,255,255,0.55); padding:70px 0 30px; }
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px;
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ font-size:14px; line-height:1.7; max-width:280px; color:rgba(255,255,255,0.45); }
.foot-col h5{
  font-family:'Sora'; color:#fff; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:18px; font-weight:700;
}
.foot-col ul{ display:flex; flex-direction:column; gap:12px; }
.foot-col a{ font-size:14px; color:rgba(255,255,255,0.5); transition:color .2s ease; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; font-size:13px; color:rgba(255,255,255,0.35); flex-wrap:wrap; gap:12px;
}
.foot-social{ display:flex; gap:12px; }
.foot-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
}
.foot-social a:hover{ background:var(--grad-brand); border-color:transparent; }
.foot-social svg{ width:15px; height:15px; color:rgba(255,255,255,0.7); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .about-grid, .why-inner, .contact-page-grid{ grid-template-columns:1fr; gap:48px; }
  .service-grid, .values-grid, .process-grid{ grid-template-columns:1fr 1fr; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .process-step::after{ display:none; }
}
@media (max-width: 620px){
  .wrap, .hero-inner, nav{ padding-left:20px; padding-right:20px; }
  .service-grid, .values-grid, .process-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .stat-row{ gap:26px; }
  .hero-chips{ gap:10px; }
  .why-panel, .contact-info-card{ padding:32px 26px; }
  .nav-cta span{ display:none; }
}