/* =============================================
   W Design Sync WordPress Theme — main.css
   v1.0.0 | Built from WDesignSync-Final-v2.html
   ============================================= */


/* ─── CONTAINER (was missing!) ─── */
.container { max-width:1400px; margin:0 auto; padding:0 64px }

/* ─── WP custom logo fix ─── */
.nav-logo .custom-logo-link img,
.nav-logo .custom-logo-link { display:block }
.nav-logo .custom-logo { height:38px; width:auto; display:block }

/* ─── SVG Logo light mode ─── */
html.light #site-logo .logo-bg,
html.light #footer-logo .logo-bg { opacity:0 }
html.light #site-logo .logo-text,
html.light #footer-logo .logo-text { fill:#0A0A12 }

/* ─── Images inside content ─── */
.site-main img { max-width:100%; height:auto }
.aimg-stack img { width:100%; height:100%; object-fit:cover }
.ai1, .ai2 { overflow:hidden }

/* ─── About image stack fix ─── */
.aimg-stack { position:relative; height:540px }
.ai1 { position:absolute; top:0; left:0; width:68%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; border:1px solid var(--b1) }
.ai2 { position:absolute; bottom:0; right:0; width:52%; aspect-ratio:1; border-radius:16px; overflow:hidden; border:3px solid var(--bg0) }
html.light .ai2 { border-color:var(--bg0) }
.ai-badge { position:absolute; top:46%; right:-14px; transform:translateY(-50%); background:var(--G); border-radius:12px; padding:18px 22px; text-align:center; z-index:4; box-shadow:0 22px 56px rgba(0,0,0,.45) }
.ai-badge-n { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; color:#fff; line-height:1 }
.ai-badge-l { font-size:.61rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.78); margin-top:3px }

/* ─── Team grid fix ─── */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px }
.tm-img { border-radius:16px; overflow:hidden; aspect-ratio:3/4; margin-bottom:13px; border:1px solid var(--b1) }
.tm-img img { width:100%; height:100%; object-fit:cover }

/* ─── Stats band container ─── */
.stats-band { background:var(--G); padding:60px 64px }
.stats-band .container { max-width:1400px; margin:0 auto; padding:0 64px }
.sb-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center }
.sb-n { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:700; color:#fff; line-height:1 }
.sb-l { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.75); margin-top:7px; text-transform:uppercase; letter-spacing:.08em }

/* ─── About split ─── */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center }

/* ─── Contact grid ─── */
.con-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:72px }

/* ─── Contact info ─── */
.ci-row { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--b1) }
.ci-row:last-child { border:none }
.ci-ico { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,rgba(91,47,190,.1),rgba(224,64,184,.06)); border:1px solid rgba(155,63,204,.15); display:grid; place-items:center; font-size:1.1rem; flex-shrink:0 }
.ci-label { font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#B07EFF; margin-bottom:3px }
.ci-val { font-size:.92rem; color:var(--t2); line-height:1.6 }
.ci-val a { transition:color .2s }
.ci-val a:hover { color:#C880FF }
.svc-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.svc-badge { font-size:.67rem; font-weight:600; background:rgba(139,63,204,.1); border:1px solid rgba(139,63,204,.22); border-radius:9999px; padding:5px 11px; color:#B07EFF }
.soc-row { display:flex; gap:7px; margin-top:24px }
.soc { width:38px; height:38px; background:var(--card); border:1px solid var(--b1); border-radius:8px; display:grid; place-items:center; font-size:.76rem; color:var(--t4); transition:all .2s }
.soc:hover { border-color:var(--b3); color:#C880FF }

/* ─── Form card ─── */
.form-card { background:var(--card2); border:1px solid var(--b1); border-radius:24px; padding:48px 44px; box-shadow:0 4px 32px rgba(91,47,190,.06) }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cf { display:flex; flex-direction:column; gap:7px; margin-bottom:14px }
.cf label { font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--t4) }
.cf input, .cf select, .cf textarea { background:var(--surface,var(--card)); border:1.5px solid var(--b1); border-radius:12px; padding:14px 16px; font-family:'DM Sans',sans-serif; font-size:.92rem; color:var(--t1); outline:none; transition:border-color .22s, box-shadow .22s; -webkit-appearance:none; width:100% }
.cf input:focus, .cf select:focus, .cf textarea:focus { border-color:rgba(192,64,184,.44); box-shadow:0 0 0 3px rgba(155,63,204,.1) }
.cf input::placeholder, .cf textarea::placeholder { color:var(--t4) }
.cf textarea { resize:vertical; min-height:120px }
.cf-sub { width:100%; background:var(--G); color:#fff; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.96rem; padding:16px; border-radius:9999px; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s, box-shadow .2s; cursor:pointer; border:none }
.cf-sub:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(139,63,204,.4) }
.cf-note { font-size:.7rem; color:var(--t4); text-align:center; margin-top:10px }

/* ─── Footer grid ─── */
.ft-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.07) }
.ft-brand img { height:36px; width:auto; margin-bottom:16px }
.ft-desc { font-size:.84rem; line-height:1.8; color:rgba(255,255,255,.35); max-width:255px; margin:14px 0 20px }
.ft-socs { display:flex; gap:7px }
.ft-soc { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; font-size:.7rem; color:rgba(255,255,255,.4); transition:all .2s }
.ft-soc:hover { border-color:rgba(155,63,204,.4); color:rgba(255,255,255,.85) }
.ft-h { font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:18px }
.ft-links { display:flex; flex-direction:column; gap:9px }
.ft-links a { font-size:.83rem; color:rgba(160,144,200,.5); transition:color .2s, padding-left .2s }
.ft-links a:hover { color:var(--t1); padding-left:5px }
.ft-btm { display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:10px }
.ft-copy { font-size:.74rem; color:rgba(255,255,255,.22) }
.ft-legal { display:flex; gap:18px }
.ft-legal a { font-size:.74rem; color:rgba(255,255,255,.25); transition:color .2s }
.ft-legal a:hover { color:var(--t1) }

/* ─── Section header ─── */
.svc-head { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:48px; margin-bottom:64px }
.port-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:20px; flex-wrap:wrap }
.seeall { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500; color:var(--t3); border:1px solid var(--b2); border-radius:9999px; padding:9px 20px; transition:all .2s }
.seeall:hover { color:var(--t1); border-color:var(--b3) }

/* ─── Hero trust ─── */
.hero-trust { display:flex; align-items:center; gap:16px; margin-top:40px; padding-top:40px; border-top:1px solid var(--b1) }
.trust-avatars { display:flex }
.trust-av { width:36px; height:36px; border-radius:50%; border:2.5px solid var(--bg0,#050508); overflow:hidden; margin-right:-10px; flex-shrink:0; background:var(--G); display:grid; place-items:center; font-size:.68rem; font-weight:700; color:#fff }
.trust-text { padding-left:16px }
.trust-text strong { display:block; font-size:.9rem; color:var(--t1) }
.trust-text span { font-size:.77rem; color:var(--t4) }

/* ─── Page header ─── */
.ph { padding:calc(var(--nav-h,72px) + 80px) 64px 72px; background:var(--bg1); position:relative; overflow:hidden }
.ph h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.8rem,5vw,5.5rem); font-weight:700; line-height:.9; letter-spacing:-.033em; max-width:780px; margin-bottom:24px }
.ph h1 em { font-style:italic }
.ph-p { color:var(--t2); font-size:1.1rem; line-height:1.82; max-width:480px; font-weight:300 }
.ph-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px) }

/* ─── Responsive ─── */
@media(max-width:1024px) {
  .container { padding:0 32px }
  .about-split,.con-grid,.srv-2col { grid-template-columns:1fr !important; gap:40px !important }
  .team-grid { grid-template-columns:repeat(2,1fr) }
  .ft-grid { grid-template-columns:1fr 1fr; gap:32px }
  .aimg-stack { height:360px }
  .stats-band { padding:44px 32px }
  .sb-inner { grid-template-columns:1fr 1fr }
  .ph { padding:calc(var(--nav-h,64px) + 56px) 32px 56px }
}
@media(max-width:640px) {
  .container { padding:0 18px }
  .team-grid { grid-template-columns:1fr 1fr }
  .ft-grid { grid-template-columns:1fr; gap:24px }
  .fg2 { grid-template-columns:1fr }
  .stats-band { padding:36px 18px }
  .sb-inner { grid-template-columns:1fr 1fr }
  .ph { padding:calc(var(--nav-h,60px) + 44px) 18px 44px }
  .form-card { padding:28px 20px }
  .svc-head { grid-template-columns:1fr; gap:16px }
}

/* ─── WordPress Core ─── */
.alignleft  { float:left; margin:0 1.5em 1em 0 }
.alignright { float:right; margin:0 0 1em 1.5em }
.aligncenter{ display:block; margin:0 auto 1em }
.wp-caption { max-width:100% }
.wp-caption-text { font-size:.82rem; color:var(--t4); margin-top:6px; text-align:center }
.screen-reader-text { clip:rect(1px,1px,1px,1px); height:1px; width:1px; overflow:hidden; position:absolute !important }
.screen-reader-text:focus { background:var(--card); clip:auto; height:auto; width:auto; top:6px; left:6px; z-index:100000; padding:12px 20px; border-radius:8px; color:var(--t1); font-size:.9rem }

/* ─── Blog / Entry Content ─── */
.entry-content h2,.entry-content h3,.entry-content h4 { font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--t1); margin:1.8em 0 .6em; line-height:1.1 }
.entry-content h2 { font-size:clamp(1.5rem,2.5vw,2rem) }
.entry-content h3 { font-size:clamp(1.2rem,2vw,1.55rem) }
.entry-content p  { color:var(--t2); font-size:1.05rem; line-height:1.87; margin-bottom:1.2em }
.entry-content ul,.entry-content ol { color:var(--t2); font-size:1.05rem; line-height:1.87; margin:.8em 0 1.2em 1.4em }
.entry-content li { margin-bottom:.4em }
.entry-content a  { color:#C880FF; text-decoration:underline; text-underline-offset:3px }
html.light .entry-content a { color:var(--c2) }
.entry-content blockquote { border-left:3px solid var(--c3); padding:18px 24px; margin:1.5em 0; background:rgba(139,63,204,.06); border-radius:0 12px 12px 0; font-style:italic; color:var(--t2) }
.entry-content img { border-radius:12px; margin:1em 0; max-width:100%; height:auto }
.entry-content code { background:rgba(139,63,204,.1); border:1px solid rgba(139,63,204,.2); border-radius:5px; padding:2px 6px; font-size:.9em; color:#C880FF }
.entry-content pre { background:var(--card); border:1px solid var(--b1); border-radius:12px; padding:24px; overflow-x:auto; margin:1.2em 0 }
.entry-content pre code { background:none; border:none; padding:0; color:var(--t2) }
.entry-content table { width:100%; border-collapse:collapse; margin:1em 0 }
.entry-content th { background:rgba(139,63,204,.1); padding:10px 14px; text-align:left; font-weight:600; color:var(--t1); border-bottom:2px solid var(--b2) }
.entry-content td { padding:10px 14px; border-bottom:1px solid var(--b1); color:var(--t2) }

/* ─── Blog Grid ─── */
.bgrid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:22px }
.blog-layout { display:grid; grid-template-columns:1fr 280px; gap:56px; align-items:start }

/* ─── Pagination ─── */
.page-numbers { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; margin:0 3px; font-size:.84rem; font-weight:600; color:var(--t3); border:1px solid var(--b1); transition:all .2s }
.page-numbers.current { background:var(--G); color:#fff; border-color:transparent }
.page-numbers:hover:not(.current) { border-color:var(--b3); color:var(--t1) }
.page-numbers.dots { border:none; width:auto }

/* ─── Portfolio placeholder ─── */
.pc { position:relative }
.pc-placeholder { position:absolute; inset:0; background:var(--G); opacity:.7 }

/* ─── Srv-2col ─── */
.srv-2col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end }

/* ─── Contact form full width fields ─── */
#wds-contact-form .cf input,
#wds-contact-form .cf select,
#wds-contact-form .cf textarea { width:100% }

/* ─── Responsive extras ─── */
@media(max-width:900px){
  .blog-layout { grid-template-columns:1fr !important; gap:40px !important }
  .blog-sidebar { display:none }
  .bgrid { grid-template-columns:1fr 1fr !important }
  .srv-2col { grid-template-columns:1fr !important; gap:36px !important }
}
@media(max-width:640px){
  .bgrid { grid-template-columns:1fr !important }
}

/* ─── Elementor ─── */
.elementor-page .site-main { padding-top:0 }
.elementor-button { border-radius:var(--r-full,9999px) !important; font-family:'DM Sans',sans-serif !important; font-weight:600 !important }
.elementor-button.elementor-button-primary { background:var(--G) !important; border:none !important; color:#fff !important }
.elementor-button.elementor-button-primary:hover { box-shadow:0 14px 38px rgba(139,63,204,.4) !important }

/* ─── SERVICE CONTENT ─── */
.service-content h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.4rem,2vw,1.9rem); font-weight:700; color:var(--t1); margin:1.6em 0 .5em }
.service-content p  { color:var(--t2); font-size:1.05rem; line-height:1.87; margin-bottom:1em }

/* ─── TEAM BANNER ─── */
@media(max-width:900px){
  .team-banner-sec { padding-left:24px !important; padding-right:24px !important }
}

/* ════════════════════════════════════
   ORIGINAL THEME CSS
════════════════════════════════════ */

/* ═══════════════════════════════════════
   DARK MODE (default)
═══════════════════════════════════════ */
:root {
  --bg0:#050508; --bg1:#08080F; --bg2:#0D0D18; --card:#0E0E18; --card2:#121220;
  --c1:#5C2D9A; --c2:#8B3FCC; --c3:#C040B8; --c4:#D14F8E;
  --G:linear-gradient(135deg,#5C2D9A,#8B3FCC,#C040B8,#D14F8E);
  --Gt:linear-gradient(135deg,#9B5EE0,#C880FF,#E860D8,#FF7BB8);
  --Gl:linear-gradient(90deg,#5C2D9A,#8B3FCC,#C040B8,#D14F8E);
  --t1:#FFFFFF; --t2:#DDD4FF; --t3:#A090C8; --t4:#5A4878;
  --b1:rgba(255,255,255,.07); --b2:rgba(255,255,255,.12);
  --b3:rgba(192,64,184,.32); --nav-h:72px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════
   LIGHT MODE — toggled by html.light
═══════════════════════════════════════ */
html.light {
  --bg0:#F7F5FF; --bg1:#EEEAFF; --bg2:#E5DFFF; --card:#FFFFFF; --card2:#F3EEFF;
  --t1:#15082A; --t2:#3A1F5C; --t3:#6B4D8A; --t4:#9B7FBB;
  --b1:rgba(92,45,154,.09); --b2:rgba(92,45,154,.16);
  --b3:rgba(139,63,204,.3); --shadow:0 12px 40px rgba(92,45,154,.12);
}

/* ═══════ BASE ═══════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body {
  background:var(--bg0); color:var(--t1);
  font-family:"DM Sans",sans-serif; font-weight:400;
  overflow-x:hidden; cursor:none;
  -webkit-font-smoothing:antialiased;
  transition:background .35s, color .35s;
}
img { display:block; max-width:100% }
a { text-decoration:none; color:inherit; cursor:none }
button { cursor:none; font-family:inherit; border:none; outline:none; background:none }
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--c2);border-radius:2px}

/* grain — lighter in light mode */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9990;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.025; transition:opacity .35s;
}
html.light body::after { opacity:.015 }

/* ═══ CURSOR ═══ */
#Cur {
  width:10px; height:10px; border-radius:50%; background:var(--c3);
  position:fixed; z-index:9998; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:screen;
  transition:width .22s var(--spring), height .22s var(--spring);
}
#Cur.xl { width:46px; height:46px }
#CurR {
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(192,64,184,.4);
  position:fixed; z-index:9997; pointer-events:none; transform:translate(-50%,-50%);
}
html.light #Cur { mix-blend-mode:multiply }

/* ═══ PAGES ═══ */
.pg { display:none } .pg.on { display:block }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h); padding:0 64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition:background .4s, border-color .4s, padding .4s;
}
#nav.scrolled {
  background:rgba(5,5,8,.94);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--b1);
}
html.light #nav.scrolled { background:rgba(247,245,255,.95) }

.nav-logo { display:flex; align-items:center; cursor:none; flex-shrink:0 }
.nav-logo img { height:36px; width:auto; display:block }

.nav-links {
  display:flex; gap:2px;
  background:rgba(255,255,255,.05); border:1px solid var(--b1);
  border-radius:9999px; padding:4px;
  transition:background .35s, border-color .35s;
}
html.light .nav-links { background:rgba(92,45,154,.07); border-color:var(--b1) }
.nav-links a {
  font-size:.79rem; font-weight:500; color:var(--t3);
  padding:8px 18px; border-radius:9999px;
  transition:color .2s, background .2s; white-space:nowrap; cursor:none;
}
.nav-links a:hover, .nav-links a.on { color:var(--t1); background:rgba(255,255,255,.1) }
html.light .nav-links a:hover, html.light .nav-links a.on { background:rgba(92,45,154,.12) }

.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0 }

/* ═══ THEME TOGGLE BUTTON ═══ */
.theme-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--b2);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  cursor:none; flex-shrink:0;
  transition:all .25s var(--spring);
  position:relative; overflow:hidden;
}
.theme-btn:hover { border-color:var(--b3); background:rgba(192,64,184,.12); transform:scale(1.1) }
html.light .theme-btn { background:rgba(92,45,154,.08); border-color:var(--b2) }
html.light .theme-btn:hover { background:rgba(92,45,154,.18) }
/* sun icon (shown in dark mode) */
.theme-btn .icon-sun,
.theme-btn .icon-moon {
  position:absolute; font-size:1.05rem; line-height:1;
  transition:opacity .3s, transform .4s var(--spring);
}
.theme-btn .icon-sun  { opacity:1;  transform:rotate(0deg) scale(1) }
.theme-btn .icon-moon { opacity:0;  transform:rotate(-90deg) scale(.5) }
html.light .theme-btn .icon-sun  { opacity:0;  transform:rotate(90deg) scale(.5) }
html.light .theme-btn .icon-moon { opacity:1;  transform:rotate(0deg) scale(1) }

/* ═══ CTA NAV BUTTON ═══ */
.nav-cta {
  background:var(--G); color:#fff;
  font-weight:700; font-size:.8rem; letter-spacing:.01em;
  padding:10px 22px; border-radius:9999px;
  transition:transform .22s var(--spring), box-shadow .22s;
  position:relative; overflow:hidden; cursor:none; white-space:nowrap;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(139,63,204,.4) }
.nav-cta::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s }
.nav-cta:hover::after { background:rgba(255,255,255,.1) }

/* hamburger */
.ham { display:none; flex-direction:column; gap:5px; padding:10px; cursor:none; z-index:810 }
.ham span { display:block; width:24px; height:2px; background:var(--t2); border-radius:2px; transition:all .3s }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* mobile drawer */
.mob-nav {
  position:fixed; inset:0; z-index:750;
  background:rgba(5,5,8,.97); backdrop-filter:blur(32px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:80px 32px 32px;
  transform:translateX(100%); transition:transform .4s var(--ease);
}
html.light .mob-nav { background:rgba(247,245,255,.97) }
.mob-nav.open { transform:none }
.mob-nav a {
  font-family:"Cormorant Garamond",serif; font-size:2.6rem; font-weight:700;
  color:var(--t2); text-align:center; padding:10px 0; width:100%;
  border-bottom:1px solid var(--b1); transition:color .2s; cursor:none;
}
.mob-nav a:hover { color:var(--t1) }
.mob-nav a:last-of-type { border:none }
.mob-cta-row { margin-top:24px; display:flex; gap:10px; width:100% }
.mob-cta-row button { flex:1; justify-content:center; padding:15px; font-size:.95rem }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.9rem;
  padding:14px 30px; border-radius:9999px;
  cursor:none; white-space:nowrap;
  transition:transform .22s var(--spring), box-shadow .22s;
  position:relative; overflow:hidden;
}
.btn::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s }
.btn:hover::after { background:rgba(255,255,255,.1) }
.btn:hover { transform:translateY(-2px) }
.btn svg { width:16px; height:16px; transition:transform .2s }
.btn:hover svg { transform:translateX(4px) }

/* Filled gradient — primary action */
.btn-fill { background:var(--G); color:#fff }
.btn-fill:hover { box-shadow:0 14px 38px rgba(139,63,204,.42) }

/* Outlined — secondary action */
.btn-ghost {
  background:transparent; color:var(--t2);
  border:1px solid var(--b2);
}
.btn-ghost:hover { border-color:var(--b3); background:rgba(192,64,184,.07); color:var(--t1) }
html.light .btn-ghost { color:var(--t2); border-color:var(--b2) }
html.light .btn-ghost:hover { background:rgba(92,45,154,.08); border-color:var(--b3) }

/* ═══ GRAD TEXT ═══ */
.gt { background:var(--Gt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ═══ SECTION LABEL ═══ */
.lbl {
  display:inline-flex; align-items:center; gap:11px;
  font-size:.65rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#B07EFF; margin-bottom:20px;
}
html.light .lbl { color:var(--c2) }
.lbl::before { content:""; width:26px; height:1.5px; background:var(--Gl); border-radius:1px; display:block }

/* ═══ SECTION ═══ */
.sec { padding:100px 64px }
.sec-alt { background:var(--bg1) }

/* ═══ DISPLAY HEADING ═══ */
.dh { font-family:"Cormorant Garamond",serif; font-weight:700; line-height:.92; letter-spacing:-.032em }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; padding:var(--nav-h) 64px 60px;
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent);
  transition:opacity .35s;
}
html.light .hero-grid {
  background-image:linear-gradient(rgba(92,45,154,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,45,154,.06) 1px,transparent 1px);
}
.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(110px) }
@keyframes drift {
  0%,100%{transform:translate(0,0)} 40%{transform:translate(-26px,18px)} 70%{transform:translate(18px,-26px)}
}
.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:64px; padding-top:36px;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(139,63,204,.12); border:1px solid rgba(139,63,204,.28);
  border-radius:9999px; padding:7px 16px;
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#C880FF; margin-bottom:26px;
}
html.light .hero-tag { background:rgba(92,45,154,.09); border-color:rgba(92,45,154,.25); color:var(--c2) }
.edot { width:6px; height:6px; background:var(--c3); border-radius:50%; animation:blink 2s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.25} }
.hero-h1 {
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(3.4rem,6.2vw,7.2rem);
  font-weight:700; line-height:.9; letter-spacing:-.033em; margin-bottom:26px;
}
.hero-h1 .n { display:block; color:var(--t1) }
.hero-h1 .it { display:block; font-style:italic }
.hero-p { font-size:1.02rem; line-height:1.86; color:var(--t2); max-width:420px; margin-bottom:40px; font-weight:300 }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap }

.hero-right { position:relative }
.hero-main { border-radius:20px; overflow:hidden; aspect-ratio:4/3; position:relative; border:1px solid var(--b1) }
.hero-main img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.hero-main:hover img { transform:scale(1.04) }
.hero-main-fade { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,5,8,.88),transparent 55%) }
html.light .hero-main-fade { background:linear-gradient(to top,rgba(247,245,255,.7),transparent 55%) }
.hero-stat-bar {
  position:absolute; bottom:16px; left:16px; right:16px;
  background:rgba(5,5,8,.86); backdrop-filter:blur(22px);
  border:1px solid var(--b2); border-radius:12px; padding:15px 18px; display:flex;
}
html.light .hero-stat-bar { background:rgba(255,255,255,.88) }
.hsb { flex:1; text-align:center }
.hsb:not(:last-child) { border-right:1px solid var(--b1) }
.hsb-n { font-family:"Cormorant Garamond",serif; font-size:1.9rem; font-weight:700; line-height:1 }
.hsb-l { font-size:.62rem; color:var(--t4); margin-top:3px; letter-spacing:.04em }
.hero-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
.thumb { border-radius:12px; overflow:hidden; aspect-ratio:16/10; border:1px solid var(--b1) }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.thumb:hover img { transform:scale(1.07) }

.hero-stats {
  grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--b1); padding-top:48px; margin-top:8px;
}
.hst { padding:0 36px; border-right:1px solid var(--b1) }
.hst:first-child { padding-left:0 } .hst:last-child { border-right:none }
.hst-n { font-family:"Cormorant Garamond",serif; font-size:2.8rem; font-weight:700; line-height:1 }
.hst-l { font-size:.75rem; color:var(--t3); margin-top:7px; letter-spacing:.04em }

/* ═══ TICKER ═══ */
.ticker { overflow:hidden; padding:13px 0; background:var(--bg2); border-top:1px solid var(--b1); border-bottom:1px solid var(--b1) }
.ticker-track { display:flex; white-space:nowrap; animation:tick 34s linear infinite }
.tki { display:inline-flex; align-items:center; gap:14px; padding:0 22px }
.tki span { font-size:.73rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--t3) }
.sep { background:var(--Gt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ SERVICES ═══ */
.svc-head { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:48px; margin-bottom:64px }
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--b1); border-radius:16px; overflow:hidden; border:1px solid var(--b1) }
.sv { background:var(--card); padding:44px 32px; position:relative; overflow:hidden; transition:background .28s; cursor:none }
.sv::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--G); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease) }
.sv:hover { background:var(--card2) } .sv:hover::before { transform:scaleX(1) }
.sv-num { font-family:"Cormorant Garamond",serif; font-size:.7rem; letter-spacing:.1em; color:rgba(192,64,184,.28); margin-bottom:20px; display:block }
html.light .sv-num { color:rgba(139,63,204,.35) }
.sv-icon { width:50px; height:50px; border-radius:12px; background:rgba(139,63,204,.1); border:1px solid rgba(139,63,204,.18); display:grid; place-items:center; font-size:1.35rem; margin-bottom:24px; transition:transform .3s var(--spring),background .28s }
.sv:hover .sv-icon { transform:rotate(-8deg) scale(1.1); background:rgba(139,63,204,.2) }
.sv-t { font-size:.97rem; font-weight:600; color:var(--t1); margin-bottom:11px }
.sv-d { font-size:.82rem; line-height:1.76; color:var(--t3) }
.sv-link { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; margin-top:20px; opacity:0; transform:translateX(-8px); transition:all .3s }
.sv:hover .sv-link { opacity:1; transform:none }

/* ═══ PORTFOLIO ═══ */
.port-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:20px; flex-wrap:wrap }
.seeall { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500; color:var(--t3); border:1px solid var(--b2); border-radius:9999px; padding:9px 20px; transition:all .2s; cursor:none }
.seeall:hover { color:var(--t1); border-color:var(--b3) }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100% }
.pc { border-radius:16px; overflow:hidden; position:relative; aspect-ratio:4/3; background:var(--card); border:1px solid var(--b1); cursor:none; min-height:200px }
.pc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); display:block }
.pc:hover img { transform:scale(1.06) }
.pc-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,5,8,.96) 0%,rgba(5,5,8,.2) 55%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:22px }
html.light .pc-ov { background:linear-gradient(to top,rgba(15,8,26,.92) 0%,rgba(15,8,26,.15) 55%,transparent 100%) }
.pc-tag { font-size:.61rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; margin-bottom:5px }
.pc-name { font-family:"Cormorant Garamond",serif; font-size:1.15rem; font-weight:700; color:#fff; line-height:1.2 }
.pc-url { font-size:.68rem; color:rgba(255,255,255,.45); margin-top:2px }
.pc-go { display:inline-flex; align-items:center; gap:4px; font-size:.73rem; font-weight:600; margin-top:9px; opacity:0; transform:translateY(7px); transition:all .3s; color:#fff }
.pc:hover .pc-go { opacity:1; transform:none }

/* portfolio filter */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px }
.fp { font-size:.72rem; font-weight:600; padding:8px 18px; border-radius:9999px; border:1px solid var(--b2); color:var(--t3); transition:all .2s; cursor:none }
.fp:hover { border-color:var(--b3); color:var(--t2) }
.fp.on { background:var(--G); color:#fff; border-color:transparent }
.port-item { display:block } /* JS controls filtering */

/* ═══ ABOUT ═══ */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center }
.aimg-stack { position:relative; height:540px }
.ai1 { position:absolute; top:0; left:0; width:68%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; border:1px solid var(--b1) }
.ai1 img { width:100%; height:100%; object-fit:cover }
.ai2 { position:absolute; bottom:0; right:0; width:52%; aspect-ratio:1; border-radius:16px; overflow:hidden; border:3px solid var(--bg0) }
html.light .ai2 { border-color:var(--bg0) }
.ai2 img { width:100%; height:100%; object-fit:cover }
.ai-badge { position:absolute; top:46%; right:-14px; transform:translateY(-50%); background:var(--G); border-radius:12px; padding:18px 22px; text-align:center; z-index:4; box-shadow:0 22px 56px rgba(0,0,0,.45) }
.ai-badge-n { font-family:"Cormorant Garamond",serif; font-size:2.2rem; font-weight:700; color:#fff; line-height:1 }
.ai-badge-l { font-size:.61rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.78); margin-top:3px }
.about-p { font-size:.96rem; line-height:1.88; color:var(--t2); margin:20px 0 32px; font-weight:300 }
.about-checks { display:flex; flex-direction:column }
.ach { display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--b1) }
.ach:last-child { border:none }
.ach-ico { font-size:1.1rem; flex-shrink:0; padding-top:2px }
.ach-t { font-size:.94rem; font-weight:600; color:var(--t1); margin-bottom:3px }
.ach-s { font-size:.82rem; line-height:1.68; color:var(--t3) }
.about-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px }

/* ═══ TESTIMONIALS ═══ */
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--b1); border-radius:16px; overflow:hidden; margin-top:56px }
.tc { background:var(--card); padding:40px 36px; transition:background .28s; border-radius:0 }
.tc:hover { background:var(--card2) }
.tc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px }
.tc-stars { font-size:.72rem; letter-spacing:3px }
.tc-q { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:3.8rem; line-height:1; opacity:.5 }
.tc-body { font-size:.95rem; line-height:1.85; color:var(--t2); font-style:normal; margin-bottom:28px; font-weight:400 }
.tc-foot { display:flex; align-items:center; gap:12px; padding:0; background:none; border:none }
.tc-av { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--b3); background:var(--G); display:grid; place-items:center; font-family:"DM Sans",sans-serif; font-size:.82rem; font-weight:700; color:#fff }
.tc-av img { width:100%; height:100%; object-fit:cover }
.tc-name { font-size:.9rem; font-weight:600; color:var(--t1) }
.tc-role { font-size:.72rem; color:var(--t4); margin-top:2px }

/* ═══ STATS BAND ═══ */
.stats-band { background:var(--G); padding:60px 64px }
.sb-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center }
.sb-n { font-family:"Cormorant Garamond",serif; font-size:3rem; font-weight:700; color:#fff; line-height:1 }
.sb-l { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.75); margin-top:7px; text-transform:uppercase; letter-spacing:.08em }

/* ═══ CTA ═══ */
.cta-wrap { padding:0 64px 100px }
.cta-box { background:var(--card); border:1px solid var(--b1); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; position:relative }
.cta-glow { position:absolute; top:-180px; left:-180px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(92,45,154,.2),transparent 70%); filter:blur(80px); pointer-events:none }
.cta-left { padding:72px 60px; position:relative; z-index:2 }
.cta-h2 { font-family:"Cormorant Garamond",serif; font-size:clamp(2.2rem,3.8vw,3.5rem); font-weight:700; line-height:1.05; letter-spacing:-.025em; margin-bottom:16px }
.cta-p { font-size:.95rem; line-height:1.82; color:var(--t2); max-width:360px; margin-bottom:32px; font-weight:300 }
.cta-btns { display:flex; gap:12px; flex-wrap:wrap }
.cta-right { position:relative; overflow:hidden; min-height:340px }
.cta-right img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cta-fade { position:absolute; inset:0; background:linear-gradient(to right,var(--card),transparent 55%) }

/* ═══ PAGE HEADERS ═══ */
.ph { padding:calc(var(--nav-h) + 80px) 64px 72px; background:var(--bg1); position:relative; overflow:hidden }
.ph h1 { font-family:"Cormorant Garamond",serif; font-size:clamp(3rem,6vw,6.8rem); font-weight:700; line-height:.88; letter-spacing:-.033em; max-width:780px; margin-bottom:24px }
.ph h1 em { font-style:italic }
.ph-p { color:var(--t2); font-size:1.02rem; line-height:1.82; max-width:480px; font-weight:300 }
.ph-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px) }

/* ═══ BLOG ═══ */
.bgrid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:22px }
.bc { cursor:none }
.bc-img { border-radius:16px; overflow:hidden; aspect-ratio:16/10; margin-bottom:16px }
.bc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease) }
.bc:hover .bc-img img { transform:scale(1.06) }
.bc-cat { display:block; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px }
.bc-title { font-family:"Cormorant Garamond",serif; font-size:1.1rem; font-weight:700; line-height:1.35; color:var(--t1); margin-bottom:7px; transition:color .2s }
.bc:hover .bc-title { color:#B07EFF }
html.light .bc:hover .bc-title { color:var(--c2) }
.bc-meta { font-size:.71rem; color:var(--t4) }

/* ═══ TEAM ═══ */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px }
.tm { cursor:none }
.tm-img { border-radius:16px; overflow:hidden; aspect-ratio:3/4; margin-bottom:13px; border:1px solid var(--b1) }
.tm-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.tm:hover .tm-img img { transform:scale(1.05) }
.tm-name { font-size:.95rem; font-weight:600; color:var(--t1) }
.tm-role { font-size:.74rem; color:var(--t4); margin-top:2px }

/* ═══ CONTACT ═══ */
.con-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:72px }
.ci-lbl { font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#B07EFF; margin-bottom:5px }
html.light .ci-lbl { color:var(--c2) }
.ci-val { font-size:.92rem; color:var(--t2); line-height:1.6; margin-bottom:24px }
.ci-val a { transition:color .2s } .ci-val a:hover { color:#C880FF }
html.light .ci-val a:hover { color:var(--c2) }
.svc-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.svc-badge { font-size:.67rem; font-weight:600; background:rgba(139,63,204,.1); border:1px solid rgba(139,63,204,.22); border-radius:9999px; padding:5px 11px; color:#B07EFF }
html.light .svc-badge { color:var(--c2) }
.soc-row { display:flex; gap:7px; margin-top:24px }
.soc { width:38px; height:38px; background:var(--card); border:1px solid var(--b1); border-radius:8px; display:grid; place-items:center; font-size:.76rem; color:var(--t4); transition:all .2s; cursor:none }
.soc:hover { border-color:var(--b3); color:#C880FF }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.cf { display:flex; flex-direction:column; gap:7px; margin-bottom:12px }
.cf label { font-size:.63rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--t4) }
.cf input, .cf select, .cf textarea {
  background:var(--card); border:1px solid var(--b1); border-radius:10px;
  padding:13px 15px; color:var(--t1); font-family:"DM Sans",sans-serif; font-size:.89rem;
  outline:none; transition:border-color .2s, background .2s; -webkit-appearance:none;
}
.cf input:focus, .cf select:focus, .cf textarea:focus { border-color:rgba(192,64,184,.44); background:var(--card2) }
.cf input::placeholder, .cf textarea::placeholder { color:rgba(128,128,128,.5) }
.cf textarea { resize:vertical; min-height:120px }
.cf select option { background:var(--card2) }
.cf-sub { width:100%; background:var(--G); color:#fff; font-family:"DM Sans",sans-serif; font-weight:700; font-size:.96rem; padding:16px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s, box-shadow .2s; cursor:none }
.cf-sub:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(139,63,204,.4) }
.cf-note { font-size:.7rem; color:var(--t4); text-align:center; margin-top:10px }

/* ═══ FOOTER ═══ */
footer { background:var(--bg1); border-top:1px solid var(--b1); padding:72px 64px 36px; transition:background .35s }
.ft-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--b1) }
.ft-desc { font-size:.84rem; line-height:1.8; color:var(--t4); max-width:255px; margin:14px 0 20px }
.ft-socs { display:flex; gap:7px }
.ft-soc { width:32px; height:32px; border-radius:8px; background:var(--card); border:1px solid var(--b1); display:grid; place-items:center; font-size:.7rem; color:var(--t4); transition:all .2s; cursor:none }
.ft-soc:hover { border-color:var(--b3); color:#C880FF }
.ft-h { font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--t4); margin-bottom:18px }
.ft-links { display:flex; flex-direction:column; gap:9px }
.ft-links a { font-size:.83rem; color:rgba(160,144,200,.5); transition:color .2s, padding-left .2s; cursor:none }
html.light .ft-links a { color:rgba(58,31,92,.38) }
.ft-links a:hover { color:var(--t1); padding-left:5px }
.ft-btm { display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:10px }
.ft-copy { font-size:.74rem; color:var(--t4) }
.ft-legal { display:flex; gap:18px }
.ft-legal a { font-size:.74rem; color:var(--t4); transition:color .2s; cursor:none }
.ft-legal a:hover { color:var(--t1) }

/* ═══ REVEAL ═══ */
.r { opacity:0; transform:translateY(32px); transition:opacity .68s var(--ease), transform .68s var(--ease) }
.r.v { opacity:1; transform:none }
.r.d1{transition-delay:.1s} .r.d2{transition-delay:.2s} .r.d3{transition-delay:.3s} .r.d4{transition-delay:.4s}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px){
  :root{--nav-h:64px}
  #nav,#nav.scrolled{padding:0 32px}
  .nav-links{display:none}
  .ham{display:flex}
  .hero,.sec,.cta-wrap,.ph,footer,.stats-band{padding-left:32px;padding-right:32px}
  .hero{padding-top:var(--nav-h);padding-bottom:48px}
  .hero-inner{grid-template-columns:1fr;padding-top:44px;gap:0}
  .hero-right{display:none}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .svc-head{grid-template-columns:1fr;gap:20px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .about-split{grid-template-columns:1fr;gap:48px}
  .aimg-stack{height:360px}
  .tgrid{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta-box{grid-template-columns:1fr}
  .cta-right{min-height:240px}
  .cta-left{padding:52px 40px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .con-grid{grid-template-columns:1fr;gap:48px}
  section.srv-2col{grid-template-columns:1fr!important;gap:40px!important}
}
@media(max-width:640px){
  :root{--nav-h:60px}
  #nav,#nav.scrolled,
  .hero,.sec,.cta-wrap,.ph,footer,.stats-band{padding-left:22px;padding-right:22px}
  .cta-wrap{padding-bottom:72px}
  .hero{padding-top:calc(var(--nav-h)+8px);padding-bottom:36px}
  .hero-stats{grid-template-columns:repeat(2,1fr);padding-top:32px}
  .hst{padding:0 18px}
  .svc-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:28px}
  .fg2{grid-template-columns:1fr}
  .sb-inner{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .hero-btns .btn,.cta-btns .btn{width:100%;justify-content:center}
  .stats-band{padding:44px 22px}
  .mob-cta-row .btn{font-size:.88rem;padding:14px}
}
@media(max-width:380px){
  .hst-n{font-size:2.1rem}
}

/* ── SVG Logo — Light Mode ── */
html.light #site-logo .logo-bg,
html.light #footer-logo .logo-bg { opacity: 0 }
html.light #site-logo .logo-text,
html.light #footer-logo .logo-text { fill: #0A0A12 }


.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.sv {
  background: var(--bg1);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sv:hover {
  transform: translateY(-10px);
  border-color: var(--b3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.sv:hover::before {
  transform: scaleX(1);
}

.sv-icon {
  font-size: 2.5rem !important;
  margin-bottom: 1rem;
  display: block;
}

.sv-t {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem;
  color: var(--t1);
}

.sv-d {
  font-size: 1.1rem !important;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.sv-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent) !important;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sv-link:hover {
  color: var(--accent-h) !important;
  transform: translateX(5px);
}

.sv-num {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.875rem;
}

/* ─── Service list hover ─── */
.service-other-link:hover { border-color:var(--b3) !important; color:var(--t1) !important }