/*
Theme Name: Kunal Designs
Theme URI: https://kunaldesigns.in
Author: Kunal
Description: Astra child theme for KUNAL DES!GNS — dynamic header, footer & mega menu powered by ACF PRO. Build the homepage with Elementor and the portfolio as a Custom Post Type.
Template: astra
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: kunal-designs
*/

/* =========================================================================
   Astra override layer — Kunal Designs
   Neutralises Astra's default CSS so YOUR design wins. This file is enqueued
   LAST (after Astra's dynamic inline CSS) in functions.php, so plain element
   rules here beat Astra by load order. Your own component classes are more
   specific, so they still win over these — this only resets the bare defaults.
   ========================================================================= */

/* 1. Links — drop Astra's default blue. Inherit by default, brand on hover.
   Your classes (.link, .nav-links a, .foot-col a, .mega a …) are more
   specific, so they keep their own colours. */

button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focusa { color:#e63f9f; text-decoration: none; }
button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus {
    color: #ffffff;
    background-color: Inherit;
    border-color: Inherit;
}
a:hover,
a:focus { color: var(--brand); }

/* 2. Focus — remove the blue ring; show a brand ring for keyboard users only
   (accessible: pointer clicks get no ring, Tab navigation does). */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 3. Lists — remove Astra's left indent + list-item margins across the design.
   Real bullet/number lists are restored inside written post content only. */
ul, ol { margin: 0; padding: 0; list-style: none; }
li { margin: 0; }

.entry-content ul,
.entry-content ol { margin: 0 0 1.4em 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin: 0 0 .4em; }

/* 4. Headings & body text take YOUR colours, not Astra's global palette. */
h1, h2, h3, h4, h5, h6 { color: #fff !important; }

/* 5. Form fields — remove Astra's blue focus border / glow.
   (!important because Astra's form-focus rule is highly specific.) */
input:focus,
textarea:focus,
select:focus {
  border-color: #000 !important;
  border-width: 2px !important;
  box-shadow: none !important;
  outline: none !important;
}

.elementor-field-type-acceptance .elementor-acceptance-field{
    position: relative;
    top: 3px;
}
.elementor-field-type-acceptance .elementor-field-option {
    line-height: 1;
}
.elementor-field-type-acceptance .elementor-field-option label{
    font-size: 12px !important;
    font-weight: 200 !important;
    line-height: 1;
}
.legal-box {
    padding: 18px;
    background: beige;
    font-size: 13px;
    font-weight: 100;
    border-radius: 20px;
}
/* 6. Buttons — your .btn classes own all styling; just normalise the cursor. */
button { cursor: pointer; }

/* 7. Optional: stop Astra constraining width on non-Elementor pages.
   Uncomment if your full-width sections look boxed-in.*/
.ast-container,
.site-content .ast-container { max-width: none; padding-left: 0; padding-right: 0; }



/* ---- minimal helper added by the theme (rest of your design is below) ---- */
.brand-logo{ display:block; height:34px; width:auto; }

/* =========================================================================
   PASTE / KEEP YOUR FULL DESIGN CSS BELOW THIS LINE
   (your uploaded styles.css is already included below)
   ========================================================================= */

/* ============================================================
   KUNAL DES!GNS — portfolio
   Dark + crimson→pink. Space Grotesk / Hanken Grotesk.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --bg:        #08080b;
  --bg-2:      #0d0d12;
  --panel:     #121218;
  --panel-2:   #17171f;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);

  /* light section */
  --paper:     #f4f1ee;
  --paper-2:   #ffffff;
  --ink:       #14121a;
  --ink-soft:  #4a4654;

  /* text on dark */
  --fg:        #f5f3f7;
  --fg-soft:   #b7b3c2;
  --fg-mut:    #7d7989;

  /* single brand color (pink) */
  --brand:     oklch(0.64 0.22 350);
  --brand-ink: oklch(0.72 0.20 350);
  --crimson:   var(--brand);
  --rose:      var(--brand);
  --pink:      var(--brand);
  --magenta:   var(--brand);
  /* legacy aliases — now resolve to the single solid brand color */
  --grad: var(--brand);
  --grad-soft: var(--brand);

  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "Entrempio", system-ui, sans-serif;
  --font-body: "Entrempio Body", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:oklch(0.62 0.22 350 / .35); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
.section{ padding-block:96px; position:relative; }
.eyebrow{
  font-family:var(--font-display);
  font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pink); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--pink); display:inline-block; }
.h-sec{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4vw,46px) !important; line-height:1.05; letter-spacing:-.02em;
  margin-top:18px; text-wrap:balance;
}
.sub-sec{ color:var(--fg-soft); font-size:17px; max-width:48ch; margin-top:16px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Buttons (black / white only, subtle radius) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:500; font-size:15px;
  padding:13px 22px; border-radius:5px; transition:.25s var(--ease);
  white-space:nowrap; border:1px solid transparent;
}
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
/* white solid button — primary action on dark backgrounds */
.btn-primary,.btn-grad{ background:#fff; color:#0a0a0a; }
.btn-primary:hover,.btn-grad:hover{ background:#fff; transform:translateY(-2px); }
/* bordered button — secondary on dark backgrounds */
.btn-ghost{ border-color:var(--line-2); color:var(--fg); background:transparent; }
.btn-ghost:hover{ border-color:#fff; color:#fff; }
/* black solid button — primary action on light backgrounds */
.btn-dark{ background:#0a0a0a; color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); background:#000; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; }
.pl-mark{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,4vw,32px);
  letter-spacing:-.01em; color:var(--fg);
  opacity:0; animation:plIn .6s var(--ease) .1s forwards;
}
.pl-mark .dot{ color:var(--brand); }
.pl-bar{ width:180px; height:2px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.pl-bar span{ display:block; height:100%; width:40%; background:var(--brand); border-radius:2px; animation:plBar 1.1s var(--ease) infinite; }
@keyframes plIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes plBar{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(360%); } }
@media (prefers-reduced-motion: reduce){ .pl-bar span{ animation:none; width:100%; } .pl-mark{ animation:none; opacity:1; } }

/* ============================================================
   HEADER
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,11,.72); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:68px; max-width:1440px; margin-inline:auto; }
.logo{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; white-space:nowrap; flex-shrink:0; }
.logo .wordmark {white-space: nowrap;color: #fff;}
.logo .dot{ color:var(--brand); }
.logo .mk{
  width:26px; height:26px; border-radius:5px; background:var(--brand);
  display:grid; place-items:center; font-size:13px; color:#fff; font-weight:700;
}
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-size:14.5px; color:var(--fg-soft); padding:8px 12px; transition:color .2s;
}
.nav-links a:hover{ color:var(--brand); background:transparent; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle {
    display: none;
	padding:0px;
    width: 28px;
    height: 28px;
    /* border-radius: 5px; */
    /* border: 1px solid var(--line-2); */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .2s;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--fg);
    border-radius: 0px;
    transition: .3s var(--ease);
}
.nav-toggle:hover{ border-color:#fff; }

/* mobile slide menu */
.mnav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:90; }
.mnav-scrim.open{ opacity:1; visibility:visible; }
.mnav{
  position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); z-index:95;
  background:#0d0d12; border-left:1px solid var(--line);
  display:flex; flex-direction:column; padding:24px 26px 30px;
  transform:translateX(100%); transition:transform .4s var(--ease);
  overflow-y:auto;
}
.mnav.open{ transform:none; }
.mnav-head{ display:flex; align-items:center; justify-content:space-between; }
.mnav-head .logo{ font-size:17px; }
.mnav-close{ width:42px; height:42px; border-radius:5px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--fg); transition:.2s; padding:0;}
.mnav-close:hover{ border-color:#fff; }
.mnav-close svg{ width:23px; height:23px; }
.mnav-links{ display:flex; flex-direction:column; margin-top:30px; }
.mnav-links > a{
  font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--fg); padding:15px 0; border-bottom:1px solid var(--line); transition:color .2s;
}
.mnav-links > a:hover{ color:var(--brand); }
.mnav-group{ border-bottom:1px solid var(--line); }
.mnav-acc{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--fg); padding:15px 0; transition:color .2s;
}
.mnav-acc:hover{ color:var(--brand); }
.mnav-acc .chev{ width:14px; height:14px; color:var(--fg-soft); transition:transform .3s var(--ease); }
.mnav-group.open .mnav-acc{ color:var(--brand); }
.mnav-group.open .mnav-acc .chev{ transform:rotate(90deg); color:var(--brand); }
.mnav-sub{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.mnav-group.open .mnav-sub{ max-height:360px; }
.mnav-sub a{
  display:block; font-size:14px; color:var(--fg-soft); padding:11px 0 11px 16px; transition:color .2s;
}
.mnav-group.open .mnav-sub{ padding-bottom:10px; }
.mnav-sub a:hover{ color:var(--brand); }
.mnav-cta{ display:flex; flex-direction:row; gap:11px; margin-top:28px; }
.mnav-cta .btn{ width:100%; justify-content:center; padding:15px; }
.mnav-socials{ display:flex; gap:10px; margin-top:auto; padding-top:30px; }
.mnav-socials a{ width:44px; height:44px; border-radius:5px; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg-soft); transition:.25s; }
.mnav-socials a svg{ width:19px; height:19px; }
.mnav-socials a:hover{ color:var(--brand); border-color:var(--brand); }

/* mega menu */
.has-mega{ position:static; }
.nav-trigger{
  font-family:var(--font-body); font-size:14.5px; color:var(--fg-soft); padding:8px 12px;
  transition:color .2s;
}
.has-mega:hover .nav-trigger, .nav-trigger[aria-expanded="true"]{ color:var(--brand); background:transparent; }
.mega{
  position:absolute; left:50%; top:64px; transform:translateX(-50%) translateY(8px);
  width:min(1080px, calc(100vw - 32px)); padding:40px 44px 28px;
  background:#101015; border:1px solid var(--line);
  border-radius:22px; box-shadow:0 50px 100px -30px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s var(--ease), transform .24s var(--ease);
  z-index:80;
}
.has-mega:hover .mega, .mega.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px 24px; }
.mega-col{ display:flex; flex-direction:column; gap:2px; }
.mega-h{
  display:flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-size:16px; font-weight:600; color:var(--fg); margin-bottom:16px; letter-spacing:-.01em;
}
.mega-h .mh-ic{ color:var(--pink); width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.mega-h .mh-ic svg{ width:18px; height:18px; }
.mega-col a{ font-size:14.5px; color:var(--fg-soft); padding:7px 10px; border-radius:5px; transition:color .18s, background .18s; }
.mega-col a:hover{ color:var(--brand); background:transparent; }
.mega-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:30px; padding:16px 6px 0; width:100%;
  background:none;
}
.mega-foot-txt{ font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--fg-soft); }
.mega-foot-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--fg); transition:.2s;
}
.mega-foot-btn:hover{ background:var(--grad); border-color:transparent; color:#fff; }
.mega-foot-btn .arr{ width:15px; height:15px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:68px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--bg); }

/* dark base + two color glows anchored in opposite corners that slowly
   drift and shift hue — color lives in the corners, center stays dark */
.hero-bg .glow{ position:absolute; width:70vw; height:70vw; border-radius:50%; filter:blur(80px); opacity:.5; }
.hero-bg .gtr{ top:-34vw; right:-22vw; background:radial-gradient(circle, oklch(0.55 0.23 16), transparent 66%); animation:glowTR 16s ease-in-out infinite, hueA 24s linear infinite; }
.hero-bg .gbl{ bottom:-32vw; left:-20vw; background:radial-gradient(circle, oklch(0.52 0.22 348), transparent 66%); animation:glowBL 19s ease-in-out infinite, hueB 28s linear infinite; }
@keyframes glowTR{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,4vw) scale(1.1);} }
@keyframes glowBL{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(5vw,-3vw) scale(1.08);} }
@keyframes hueA{ 0%,100%{ filter:blur(80px) hue-rotate(0deg);} 50%{ filter:blur(80px) hue-rotate(26deg);} }
@keyframes hueB{ 0%,100%{ filter:blur(80px) hue-rotate(0deg);} 50%{ filter:blur(80px) hue-rotate(-24deg);} }

.hero-grain{ position:absolute; inset:0; opacity:.4; background:repeating-linear-gradient(118deg, transparent 0 40px, rgba(255,255,255,.012) 40px 41px); mask:linear-gradient(180deg,#000 55%,transparent); }

@media (prefers-reduced-motion: reduce){
  .hero-bg .glow{ animation:none; }
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.35fr .8fr; gap:48px; align-items:center; min-height:calc(100vh - 68px); padding-block:60px; }

.hero-pill{
  display:inline-flex; align-items:center; gap:10px; padding:7px 12px 7px 12px;
  border:1px solid var(--line-2); border-radius:8px; background:rgba(255,255,255,.04);
  font-size:12px; color:var(--fg-soft); backdrop-filter:blur(8px);
}
.hero-pill b{ color:var(--fg); font-weight:500; }
.hero-pill .tag{ background:var(--grad); color:#fff; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; font-family:var(--font-display); }
.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(38px,6.2vw,62px);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-top: 26px;
    text-wrap: balance;
}
.hero h1 .em{
  background:linear-gradient(100deg, oklch(0.78 0.16 350), oklch(0.7 0.2 20));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ color:var(--fg-soft); font-size:18.5px; max-width:46ch; margin-top:24px; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:30px; margin-top:40px; }
.hero-meta .m{ display:flex; flex-direction:column; gap:2px; }
.hero-meta .m b{ font-family:var(--font-display); font-size:26px; font-weight:600; }
.hero-meta .m span{ font-size:13px; color:var(--fg-mut); }

/* right side — Magnific-style rotating ticker: fixed pink ▶, text scrolls
   vertically through it, fading at top & bottom */
.hero-aside {
    align-self: center;
    margin-left: 40px;
}
.hero-ticker{
  --ih:54px; position:relative; height:calc(var(--ih) * 5);
  padding-left:65px; overflow:hidden;
  -webkit-mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.ticker-arrow{
  position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:3;
  color:var(--pink); font-size:18px; line-height:1;
  filter:drop-shadow(0 0 12px oklch(0.68 0.21 350 / .85));
}
.ticker-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; transition:transform .65s var(--ease); will-change:transform; }
.ticker-list .ti{
  height:var(--ih); display:flex; align-items:center;
  font-family:var(--font-display); font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em;
  color:oklch(0.78 0.04 350 / .32); white-space:nowrap;
  transition:color .5s var(--ease), opacity .5s var(--ease);
}
.ticker-list .ti.on{ color:#fff; }
.hero-scrim{ position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(transparent,var(--bg)); z-index:1; pointer-events:none; }

/* hero trust strip (in-banner, Magnific style) */
.hero-trust{ position:relative; z-index:2; padding-bottom:56px; }
.trust-line{ text-align:center; color:var(--fg-soft); font-size:14px; opacity:.85; }
.trust-row{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; margin-top:20px; }
.trust-row .tc{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-.01em;
  color:var(--fg); opacity:.5; transition:opacity .3s; white-space:nowrap;
}
.trust-row .tc:hover{ opacity:.9; }
@media (max-width:680px){ .trust-row{ gap:16px 22px; } .trust-row .tc{ font-size:13px; } }

/* variation B — centered */
.hero[data-variant="b"] .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; padding-block:100px 120px; }
.hero[data-variant="b"] .hero-aside{ display:none; }
.hero[data-variant="b"] h1{ font-size:clamp(42px,8vw,96px); }
.hero[data-variant="b"] p.lead{ margin-inline:auto; }
.hero[data-variant="b"] .hero-cta{ justify-content:center; }
.hero[data-variant="b"] .hero-meta{ justify-content:center; }
.hero[data-variant="b"] .hero-bg::before{
  background:
    radial-gradient(80% 70% at 50% -10%, oklch(0.55 0.22 8 / .9), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, oklch(0.5 0.2 350 / .5), transparent 60%),
    var(--bg);
}
.hero[data-variant="a"] .hero-centeronly{ display:none; }

/* ============================================================
   CLIENTS
   ============================================================ */
.clients{ padding-block:54px; border-block:1px solid var(--line); background:var(--bg-2); }
.clients .lbl{ text-align:center; color:var(--fg-mut); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-display); }
.client-row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.client{
  font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em;
  color:var(--fg-soft); opacity:.7; transition:.3s; display:flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid var(--line); border-radius:12px;
}
.client:hover{ opacity:1; color:var(--fg); border-color:var(--line-2); }
.client .gem{ width:14px; height:14px; border-radius:4px; background:var(--grad-soft); transform:rotate(45deg); }

/* ============================================================
   SERVICES BENTO
   ============================================================ */
/* services section header with right-aligned CTA */
.serv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.serv-head-cta{ flex:0 0 auto; }
.light .btn-dark{ background:var(--ink); color:#fff; }
.light .btn-dark:hover{ background:#000; }

.bento{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(298px,auto); gap:16px; margin-top:50px; }
.bt{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:0px ; display:flex; flex-direction:column; transition:.35s var(--ease); }
.bt:hover{ transform:translateY(-3px); }
.bt-copy{ position:relative; z-index:3; padding:30px 30px 0; }
.bt .ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px; border:1px solid transparent; }
.bt .ico svg{ width:22px; height:22px; }
.bt h3{ font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.015em; }
.bt p{ font-size:14.5px; margin-top:9px; max-width:38ch; line-height:1.5; }
.bt .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.bt .tags span{ font-size:11.5px; padding:4px 11px; border-radius:999px; font-family:var(--font-display); font-weight:500; border:1px solid transparent; }
.bt .bt-vis{ position:relative; flex:1; min-height:200px; overflow:hidden; }

/* placement */
.bt-a{ grid-column:1/6; grid-row:1/3; }
.bt-b{ grid-column:6/13; grid-row:1/2; }
.bt-c{ grid-column:6/10; grid-row:2/3; }
.bt-d{ grid-column:10/13; grid-row:2/3; }
.bt-e{ grid-column:1/8; grid-row:3/4; }
.bt-f{ grid-column:8/13; grid-row:3/4; }

/* tile colors */
.bt-a{ background:#e8e3de; border-color:rgba(0,0,0,.07); }
.bt-a h3{ color:var(--ink) !important; } .bt-a p{ color:var(--ink-soft); }
.bt-a .ico{ background:#fff; border-color:rgba(0,0,0,.08); color:var(--crimson); }
.bt-a .tags span{ color:#6a6470; border-color:rgba(0,0,0,.14); }
.bt-b,.bt-f{ background:linear-gradient(160deg,#101017,#08080b); }
.bt-c{ background:linear-gradient(150deg, oklch(0.42 0.17 22), oklch(0.28 0.13 16)); border-color:transparent; }
.bt-d{ background:linear-gradient(150deg, oklch(0.44 0.2 345), oklch(0.29 0.15 340)); border-color:transparent; }
.bt-e{ background:linear-gradient(150deg, oklch(0.36 0.13 300), oklch(0.24 0.09 295)); border-color:transparent; }
.bt-b h3,.bt-c h3,.bt-d h3,.bt-e h3,.bt-f h3{ color:#fff; }
.bt-b p,.bt-c p,.bt-d p,.bt-e p,.bt-f p{ color:rgba(255,255,255,.74); }
.bt-b .ico,.bt-f .ico{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; }
.bt-c .ico,.bt-d .ico,.bt-e .ico{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; }
.bt-b .tags span,.bt-f .tags span{ color:var(--fg-soft); border-color:var(--line-2); }
.bt-c .tags span,.bt-d .tags span,.bt-e .tags span{ color:#fff; border-color:rgba(255,255,255,.32); }

/* ============================================================
   SERVICE MOCKUPS v2 — clean UI components, clipped in the vis zone
   ============================================================ */
.bt .mw {
    position: absolute;
    left: 24px;
    right: -9px;
    bottom: 0;
    top: 0;
    border-radius: 12px 12px 0 0;
    padding: 16px;
    background: #0e0e14;
    border: 1px solid rgba(255,255,255,.12);
    border-bottom: none;
    box-shadow: 0 -16px 44px -26px rgba(0,0,0,.7);
    margin-top: 27px;
}
.bt-a .mw.mw-light{ background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:-16px -12px 40px -24px rgba(0,0,0,.25); }

/* --- A: browser page (light) --- */
.mw-top{ display:flex; align-items:center; gap:6px; margin-bottom:13px; }
.mw-top i{ width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.14); }
.mw-top i:first-child{ background:var(--crimson); }
.mw-top .mw-url{ margin-left:10px; height:18px; flex:1; border-radius:6px; background:rgba(0,0,0,.05); font-family:var(--font-body); font-size:10px; color:#9a94a0; display:flex; align-items:center; padding:0 10px; }
.mw-pg{ display:flex; flex-direction:column; gap:12px; }
.mw-nav{ display:flex; align-items:center; justify-content:space-between; }
.mw-brand{ width:46px; height:11px; border-radius:4px; background:var(--grad-soft); }
.mw-menu{ display:flex; gap:7px; }
.mw-menu i{ width:24px; height:7px; border-radius:4px; background:rgba(0,0,0,.1); }
.mw-band{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; align-items:center; padding:8px 0; }
.mw-txt{ display:flex; flex-direction:column; gap:8px; }
.mw-txt .l{ height:10px; border-radius:5px; background:rgba(0,0,0,.12); }
.mw-txt .l1{ width:90%; } .mw-txt .l2{ width:65%; }
.mw-txt .mw-btn{ height:20px; width:74px; border-radius:7px; background:var(--grad); margin-top:5px; }
.mw-art{ height:74px; border-radius:10px; background:linear-gradient(135deg, oklch(0.7 0.16 350 / .5), oklch(0.62 0.18 20 / .35)); }
.mw-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mw-grid3 div{ height:40px; border-radius:8px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.04); }

/* --- B: code editor --- */
.mw-tabs{ display:flex; gap:6px; margin-bottom:13px; }
.mw-tabs .tab{ font-family:var(--font-display); font-size:11px; color:var(--fg-mut); padding:5px 11px; border-radius:7px 7px 0 0; background:rgba(255,255,255,.04); }
.mw-tabs .tab.on{ color:#fff; background:rgba(255,255,255,.1); }
.code2{ display:flex; flex-direction:column; gap:9px; }
.code2 .cl{ display:flex; align-items:center; gap:9px; }
.code2 .no{ width:12px; font-family:var(--font-display); font-size:10px; color:rgba(255,255,255,.25); text-align:right; flex:0 0 auto; }
.code2 .t{ height:8px; border-radius:4px; }
.code2 .kw{ width:46px; background:oklch(0.72 0.2 350); }
.code2 .fn{ width:96px; background:oklch(0.74 0.15 200); }
.code2 .in{ width:30px; background:rgba(255,255,255,.28); margin-left:16px; }
.code2 .st{ width:120px; background:oklch(0.78 0.15 135); }
.code2 .pr{ width:80px; background:rgba(255,255,255,.16); }
.code2 .vr{ width:64px; background:oklch(0.74 0.16 60); }

/* --- shared dark panel --- */
.bt-c .mw, .bt-d .mw, .bt-f .mw{ background:rgba(8,8,11,.78); backdrop-filter:blur(6px); }

/* --- C: WordPress pages list --- */
.mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mp-title{ font-family:var(--font-display); font-size:13px; font-weight:600; color:#fff; }
.mp-add{ width:22px; height:22px; border-radius:7px; background:var(--grad); display:grid; place-items:center; color:#fff; }
.mp-add svg{ width:13px; height:13px; }
.mp-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:rgba(255,255,255,.05); margin-bottom:8px; }
.mp-nm{ font-family:var(--font-display); font-size:12.5px; color:rgba(255,255,255,.9); flex:1; }
.mp-badge{ font-family:var(--font-display); font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px; }
.mp-badge.live{ background:oklch(0.7 0.16 150 / .22); color:oklch(0.85 0.14 150); }
.mp-badge.draft{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); }

/* --- D: shop --- */
.shop2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pc{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px; }
.pc-img{ height:48px; border-radius:7px; background:linear-gradient(135deg, oklch(0.7 0.16 350 / .55), oklch(0.6 0.16 320 / .35)); margin-bottom:8px; }
.pc-nm{ height:7px; width:75%; border-radius:4px; background:rgba(255,255,255,.3); margin-bottom:6px; }
.pc-pr{ height:7px; width:42%; border-radius:4px; background:var(--grad-soft); }
.cart2{ display:flex; align-items:center; gap:9px; margin-top:11px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.06); }
.cart2-lbl{ font-family:var(--font-display); font-size:11px; color:rgba(255,255,255,.6); }
.cart2-amt{ font-family:var(--font-display); font-size:14px; font-weight:600; color:#fff; }
.cart2-btn{ margin-left:auto; font-family:var(--font-display); font-size:11px; font-weight:600; color:#fff; padding:7px 13px; border-radius:8px; background:var(--grad); }

/* --- E: figma canvas --- */
.bt-e .mw.mw-fig{ background:rgba(10,8,16,.8); }
.fig-stage{ position:relative; height:128px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:14px 14px; overflow:hidden; }
.fig-frame{ position:absolute; border:1.5px solid rgba(255,255,255,.4); border-radius:7px; background:rgba(255,255,255,.06); }
.fig-frame .fig-tag{ position:absolute; top:-16px; left:0; font-family:var(--font-display); font-size:9px; color:rgba(255,255,255,.55); }
.fig-frame.f1{ left:16px; top:24px; width:78px; height:78px; }
.fig-frame.f2{ right:18px; top:34px; width:92px; height:62px; }
.fig-cursor{ position:absolute; top:18px; left:20%; color:#fff; filter:drop-shadow(0 0 6px oklch(0.62 0.22 350)); }
.fig-cursor svg{ width:16px; height:16px; }
.fig-layers{ display:flex; gap:7px; margin-top:11px; }
.fig-layers span{ height:9px; border-radius:5px; background:rgba(255,255,255,.14); }
.fig-layers span:nth-child(1){ width:40%; } .fig-layers span:nth-child(2){ width:26%; } .fig-layers span:nth-child(3){ width:18%; }

/* --- F: SEO analytics --- */
.an-metrics{ display:flex; gap:9px; margin-bottom:14px; }
.an-chip{ flex:1; padding:10px 11px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.an-chip b{ font-family:var(--font-display); font-size:18px; font-weight:600; color:#fff; display:block; line-height:1; }
.an-chip span{ font-size:10px; color:rgba(255,255,255,.55); }
.an-chip.up b{ background:linear-gradient(100deg, oklch(0.82 0.16 150), oklch(0.78 0.16 130)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.an-chart{ display:flex; align-items:flex-end; gap:8px; height:78px; }
.an-chart i{ flex:1; height:var(--h); border-radius:5px 5px 0 0; background:var(--grad-soft); opacity:.92; }

@keyframes fadeRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
@keyframes barGrow{ from{ transform:scaleY(0); opacity:.3; } to{ transform:scaleY(1); opacity:1; } }
@keyframes typeLine{ 0%{ opacity:0; transform:translateX(-4px);} 6%{ opacity:1; transform:none;} 100%{ opacity:1; } }
@keyframes cartPulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 oklch(0.6 0.22 350 / .5);} 50%{ transform:scale(1.03); box-shadow:0 0 22px 0 oklch(0.6 0.22 350 / .55);} }
@keyframes selGlow{ 0%,100%{ border-color:rgba(255,255,255,.28); box-shadow:none;} 50%{ border-color:rgba(255,255,255,.8); box-shadow:0 0 16px -2px rgba(255,255,255,.35);} }
@keyframes cursorMove{ 0%{ top:18px; left:20%; } 35%{ top:22px; left:60%; } 65%{ top:74px; left:54%; } 100%{ top:18px; left:20%; } }


/* ============================================================
   TECH MARQUEE
   ============================================================ */
.tech{ background:var(--bg-2); padding-block:72px; }
.marquee{ overflow:hidden; margin-top:8px; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:scroll 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.chip {
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    background: var(--panel);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--fg-soft);
    white-space: nowrap;
    transition: .3s;
    justify-content: center;
}
.chip:hover{ color:var(--fg); border-color:var(--line-2); }
.chip .sq {
    width: auto;
    height: 40px;
    object-fit: cover;
    border-radius: 7px;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
}

/* ============================================================
   PROJECTS (tabs)
   ============================================================ */
section#work {
    background: #000;
}
.proj-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.tabs{ display:inline-flex; gap:4px; margin-top:34px; padding:6px; background:#fff; border-radius:999px; max-width:100%; }
.tab{
  font-family:var(--font-display); font-size:14px; font-weight:600; padding:11px 22px; border-radius:999px;
  border:none; color:#6a6470; transition:.25s; background:transparent; white-space:nowrap;
}
.tab:hover{ color:#0a0a0a; border:none; }
.tab.active{ background:#0a0a0a; color:#fff; border:none; }
@media (max-width:680px){
  .tabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; gap:2px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; padding:10px 16px; font-size:13px; }
}
.proj-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 30px;
}
.card{
  border-radius:var(--radius); overflow:hidden; background:var(--panel);
  transition:.4s var(--ease); display:flex; flex-direction:column;
}
.card.hide{ display:none; }
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 24px 50px -28px rgba(0,0,0,.8); }
.card .thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.card image-slot{ width:100%; height:100%; }
.card .cat{
  position:absolute; top:12px; left:12px; z-index:3; font-family:var(--font-display); font-size:11px;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:rgba(8,8,11,.7); backdrop-filter:blur(8px); border:1px solid var(--line-2); color:var(--fg);
}
.card .body{ padding:20px 22px 24px; }
.card h3{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.card p{ color:var(--fg-soft); font-size:14.5px; margin-top:7px; }
.card .meta{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.card .meta span{ font-size:12px; color:var(--fg-mut); border:1px solid var(--line); padding:3px 9px; border-radius:999px; }
.card .meta .link{ margin-left:auto; color:var(--pink); font-family:var(--font-display); font-size:13px; font-weight:600; display:flex; align-items:center; gap:5px; }




/* ============================================================
   ABOUT (dark feature block)
   ============================================================ */

/* About intro — compact, small round headshot */
.about-intro{ --shot:104px; max-width:720px; margin-top:8px; }
.about-headshot{
  display:block; width:var(--shot); height:var(--shot); border-radius:50%;
  overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 0 0 4px rgba(255,255,255,.04), 0 16px 40px -20px rgba(0,0,0,.85);
  margin-bottom:24px;
}
.about-headshot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-lead{ color:var(--fg-soft); font-size:16px; margin-top:18px; max-width:46ch; }

.about{ background:linear-gradient(180deg,var(--bg),#060608); padding-block:104px; border-top:1px solid var(--line); }
.about-top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; }
.about-top .h-sec{ font-size:clamp(30px,4.4vw,52px); }
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
.about-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; background:var(--panel);
  position:relative; overflow:hidden;
}
.tb-cols.tb-intro {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 20px !important;
    align-items: flex-start;
    align-content: space-around;
}
.tb-cols.tb-intro .reveal.in{width:50%;}
.about-card.photo{ padding:0; }
.about-card.photo image-slot{ width:100%; height:100%; min-height:340px; }
.about-card h3{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.about-card p{ color:var(--fg-soft); font-size:15.5px; margin-top:12px; }
.about-stats {
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    gap: 14px;
    max-width: 425px;
    align-self: flex-start;
    margin-left: 20px;
}
.about-photo img {
    height: 230px;
    width: 230px !important;
    width: 100%;
    display: flex;
    align-items: center;
	border-radius:8px;
}
.reveal.about-photo {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 230px !important;
    border: 0px !important;
    border-radius: 0px !important;
}
.info-abt {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding:10px;
}
span.name {
    font-size: 18px;
    color: #e63f9f;
    font-weight: 600;
    font-family: 'Entrempio';
}
span.designation {
    font-size: 14px;
    font-weight: 100;
    color: #fff;
}
.about-photo image-slot{ min-height:330px; }
.about-stats .st b{ font-family:var(--font-display); font-size:30px; font-weight:600; display:block;color:#e63f9f; }
.about-stats .st span{ font-size:13px; color:var(--fg-mut); }
.about-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.about-list .li{ display:flex; gap:13px; align-items:flex-start; }
.about-list .li .tick{ width:22px; height:22px; flex:0 0 22px; border-radius:7px; background:var(--grad); display:grid; place-items:center; color:#fff; font-size:12px; margin-top:1px; }
.about-list .li p{ margin:0; color:var(--fg-soft); font-size:15px; }
.about-list .li b{ color:var(--fg); font-weight:600; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ padding-block:100px; }
.price-toggle{ display:inline-flex; align-items:center; gap:4px; padding:5px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel); margin-top:26px; }
.price-toggle button{ font-family:var(--font-display); font-size:14px; font-weight:600; padding:9px 20px; border-radius:999px; color:var(--fg-soft); transition:.25s; }
.price-toggle button.on{ background:var(--grad); color:#fff; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; align-items:start; }
.plan{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; background:var(--panel);
  position:relative; transition:.35s var(--ease); display:flex; flex-direction:column; gap:8px;
}
.plan:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.plan.feat{ background:var(--panel); border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.plan .pop{ position:absolute; top:-12px; right:24px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:999px; background:var(--grad); color:#fff; }
.plan .pname{ font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--pink); }
.plan .ptag{ color:var(--fg-soft); font-size:14.5px; min-height:42px; }
.plan .price{ display:flex; align-items:baseline; gap:4px; margin-top:6px; }
.plan .price .cur{ font-family:var(--font-body); font-size:24px; font-weight:600; color:var(--fg-soft); align-self:flex-start; margin-top:8px; }
.plan .price .amt{ font-family:var(--font-body); font-size:32px; font-weight:200; letter-spacing:-.02em; }
.plan .price .per{ color:var(--fg-mut); font-size:14px; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:20px; padding-top:22px; border-top:1px solid var(--line); }
.plan li{ display:flex; gap:11px; font-size:14.5px; color:var(--fg-soft); align-items:flex-start; }
.plan li .ck{ color:var(--pink); flex:0 0 auto; margin-top:2px; }
.plan .btn{ width:100%; justify-content:center; margin-top:24px; }
.plan-note{ text-align:center; color:var(--fg-mut); font-size:13.5px; margin-top:26px; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; padding-block:0; }
.cta-inner{ position:relative; text-align:center; padding:110px 28px 120px; }
.cta-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 120% at 50% 130%, oklch(0.72 0.2 40 / .9), transparent 60%),
    radial-gradient(70% 90% at 50% -20%, oklch(0.5 0.2 350 / .7), transparent 55%),
    linear-gradient(180deg, #0b0710, #1a0a14);
}
.cta-bg::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.025) 60px 61px); mask:linear-gradient(180deg,transparent,#000 70%); }
.cta h2{ position:relative; z-index:2; font-family:var(--font-display); font-weight:600; font-size:clamp(40px,7vw,82px); letter-spacing:-.03em; line-height:1; }
.cta p{ position:relative; z-index:2; color:rgba(255,255,255,.78); font-size:19px; margin-top:20px; max-width:46ch; margin-inline:auto; }
.cta-btns{ position:relative; z-index:2; display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:#060608; border-top:1px solid var(--line); padding-block:72px 36px; }
.foot-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.15fr; gap:48px; }
.foot .logo{ font-size:23px; }
.foot-brand .blurb{ color:var(--fg-soft); font-size:14.5px; margin-top:18px; max-width:36ch; line-height:1.6; }
.foot-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--fg); padding:11px 18px; border-radius:999px; border:1px solid var(--line-2); transition:.22s; }
.foot-cta:hover{ background:var(--grad); border-color:transparent; color:#fff; }
.foot-cta svg{ width:16px; height:16px; }
.foot h4{ font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pink); margin-bottom:18px; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.foot ul a{ color:var(--fg-soft); font-size:14.5px; transition:.2s; display:inline-flex; align-items:center; gap:10px; }
.foot ul a:hover{ color:var(--fg); }
.foot ul a svg{ width:16px; height:16px; color:var(--fg-mut); transition:.2s; }
.foot ul a:hover svg{ color:var(--pink); }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:58px; padding-top:28px; border-top:1px solid var(--line); color:var(--fg-mut); font-size:13.5px; flex-wrap:wrap; }
/* footer mobile tab bar (hidden on desktop) */
.foot-tabs{ display:none; }
.foot-socials{ display:flex; gap:10px; }
.foot-socials a{ width:40px; height:40px; border-radius:11px; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg-soft); transition:.25s; }
.foot-socials a svg{ width:18px; height:18px; }
.foot-socials a:hover{ color:#fff; border-color:transparent; background:var(--grad); transform:translateY(-2px); }

/* ============================================================
   FLOATING CONTACT FAB (speed-dial)
   ============================================================ */
.fab{ position:fixed; right:26px; bottom:26px; z-index:95; display:flex; flex-direction:column; align-items:center; gap:14px; }
.fab-menu{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.fab-item{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--fg);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7); position:relative;
  opacity:0; transform:translateY(14px) scale(.6); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s, color .2s;
}
.fab-item svg{ width:21px; height:21px; }
.fab-item:hover{ background:var(--grad); border-color:transparent; color:#fff; }
.fab-item::after{
  content:attr(data-tip); position:absolute; right:60px; top:50%; transform:translateY(-50%);
  background:var(--panel-2); border:1px solid var(--line); color:var(--fg); font-family:var(--font-display);
  font-size:12.5px; font-weight:500; padding:6px 11px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.fab-item:hover::after{ opacity:1; }
.fab.open .fab-item{ opacity:1; transform:none; pointer-events:auto; transition-delay:calc(var(--i) * .045s); }
.fab-btn{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#fff; box-shadow:0 14px 34px -10px oklch(0.55 0.22 350 / .75);
  transition:transform .3s var(--ease), box-shadow .3s; position:relative;
}
.fab-btn:hover{ transform:translateY(-2px) scale(1.04); }
.fab-btn svg{ width:25px; height:25px; position:absolute; transition:opacity .25s, transform .35s var(--ease); }
.fab-btn .fab-ic-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.fab.open .fab-btn{ transform:rotate(0); }
.fab.open .fab-btn .fab-ic-open{ opacity:0; transform:rotate(90deg) scale(.6); }
.fab.open .fab-btn .fab-ic-close{ opacity:1; transform:none; }
.fab-btn::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--grad); opacity:.5; animation:fabPulse 2.6s ease-out infinite; z-index:-1; }
.fab.open .fab-btn::before{ animation:none; opacity:0; }
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .fab-btn::before{ animation:none; } }

/* ============================================================
   HERO VARIANT SWITCHER (floating)
   ============================================================ */
.vswitch{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:8px; padding:8px 8px 8px 16px; border-radius:999px;
  background:rgba(13,13,18,.82); border:1px solid var(--line-2); backdrop-filter:blur(14px);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
}
.vswitch .lab{ font-family:var(--font-display); font-size:12.5px; color:var(--fg-soft); letter-spacing:.04em; }
.vswitch .opts{ display:flex; gap:4px; }
.vswitch button{ font-family:var(--font-display); font-size:13px; font-weight:600; width:34px; height:30px; border-radius:999px; color:var(--fg-soft); transition:.2s; }
.vswitch button.on{ background:var(--grad); color:#fff; }

/* ============================================================
   SERVICES BENTO
   ============================================================ */
/* services section header with right-aligned CTA */
.serv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.serv-head-cta{ flex:0 0 auto; }
.light .btn-dark{ background:var(--ink); color:#fff; }
.light .btn-dark:hover{ background:#000; }

.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:16px; margin-top:50px; }
.bt{ position:relative; min-height:440px; border-radius:var(--radius-lg); overflow:hidden;display:flex; flex-direction:column; transition:.35s var(--ease); }
.bt:hover{ transform:translateY(-3px); }
.bt-copy{ position:relative; z-index:3; padding:28px 28px 0; }
.bt .ico{ width:44px; height:44px; border-radius:5px; display:grid; place-items:center; margin-bottom:16px; border:1px solid transparent; }
.bt .ico svg{ width:22px; height:22px; }
.bt h3{ font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-.015em; }
.bt p{ font-size:14px; margin-top:8px; max-width:38ch; line-height:1.5; }
.bt .tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.bt .tags span{ font-size:11.5px; padding:4px 11px; border-radius:999px; font-family:var(--font-display); font-weight:500; border:1px solid transparent; }
.bt .bt-vis{ position:relative; flex:1; min-height:200px; overflow:hidden; }

/* tile colors */
.bt-a{ background:#e8e3de; border-color:rgba(0,0,0,.07); }
.bt-a h3{ color:var(--ink); } .bt-a p{ color:var(--ink-soft); }
.bt-a .ico{ background:#fff; border-color:rgba(0,0,0,.08); color:var(--crimson); }
.bt-a .tags span{ color:#6a6470; border-color:rgba(0,0,0,.14); }
.bt-b,.bt-f{ background:linear-gradient(160deg,#101017,#08080b); }
.bt-c{ background:linear-gradient(150deg, oklch(0.42 0.17 22), oklch(0.28 0.13 16)); border-color:transparent; }
.bt-d{ background:linear-gradient(150deg, oklch(0.44 0.2 345), oklch(0.29 0.15 340)); border-color:transparent; }
.bt-e{ background:linear-gradient(150deg, oklch(0.36 0.13 300), oklch(0.24 0.09 295)); border-color:transparent; }
.bt-b h3,.bt-c h3,.bt-d h3,.bt-e h3,.bt-f h3{ color:#fff; }
.bt-b p,.bt-c p,.bt-d p,.bt-e p,.bt-f p{ color:rgba(255,255,255,.74); }
.bt-b .ico,.bt-f .ico{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff; }
.bt-c .ico,.bt-d .ico,.bt-e .ico{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; }
.bt-b .tags span,.bt-f .tags span{ color:var(--fg-soft); border-color:var(--line-2); }
.bt-c .tags span,.bt-d .tags span,.bt-e .tags span{ color:#fff; border-color:rgba(255,255,255,.32); }

/* ============================================================
   SERVICE MOCKUPS v2 — clean UI components, clipped in the vis zone
   ============================================================ */
.bt .mw {
    position: absolute;
    left: 24px;
    right: -9px;
    bottom: 0;
    top: 0;
    border-radius: 12px 12px 0 0;
    padding: 16px;
    background: #0e0e14;
    border: 1px solid rgba(255,255,255,.12);
    border-bottom: none;
    box-shadow: 0 -16px 44px -26px rgba(0,0,0,.7);
    margin-top: 27px;
}
.bt-a .mw.mw-light{ background:#ffffff; border-color:rgba(0,0,0,.08); box-shadow:-16px -12px 40px -24px rgba(0,0,0,.25); }

/* --- A: browser page (light) --- */
.mw-top{ display:flex; align-items:center; gap:6px; margin-bottom:13px; }
.mw-top i{ width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.14); }
.mw-top i:first-child{ background:var(--crimson); }
.mw-top .mw-url{ margin-left:10px; height:18px; flex:1; border-radius:6px; background:rgba(0,0,0,.05); font-family:var(--font-body); font-size:10px; color:#9a94a0; display:flex; align-items:center; padding:0 10px; }
.mw-pg{ display:flex; flex-direction:column; gap:12px; }
.mw-nav{ display:flex; align-items:center; justify-content:space-between; }
.mw-brand{ width:46px; height:11px; border-radius:4px; background:var(--grad-soft); }
.mw-menu{ display:flex; gap:7px; }
.mw-menu i{ width:24px; height:7px; border-radius:4px; background:rgba(0,0,0,.1); }
.mw-band{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; align-items:center; padding:8px 0; }
.mw-txt{ display:flex; flex-direction:column; gap:8px; }
.mw-txt .l{ height:10px; border-radius:5px; background:rgba(0,0,0,.12); }
.mw-txt .l1{ width:90%; } .mw-txt .l2{ width:65%; }
.mw-txt .mw-btn{ height:20px; width:74px; border-radius:7px; background:var(--grad); margin-top:5px; }
.mw-art{ height:74px; border-radius:10px; background:linear-gradient(135deg, oklch(0.7 0.16 350 / .5), oklch(0.62 0.18 20 / .35)); }
.mw-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mw-grid3 div{ height:40px; border-radius:8px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.04); }

/* --- B: code editor --- */
.mw-tabs{ display:flex; gap:6px; margin-bottom:13px; }
.mw-tabs .tab{ font-family:var(--font-display); font-size:11px; color:var(--fg-mut); padding:5px 11px; border-radius:7px 7px 0 0; background:rgba(255,255,255,.04); }
.mw-tabs .tab.on{ color:#fff; background:rgba(255,255,255,.1); }
.code2{ display:flex; flex-direction:column; gap:9px; }
.code2 .cl{ display:flex; align-items:center; gap:9px; }
.code2 .no{ width:12px; font-family:var(--font-display); font-size:10px; color:rgba(255,255,255,.25); text-align:right; flex:0 0 auto; }
.code2 .t{ height:8px; border-radius:4px; }
.code2 .kw{ width:46px; background:oklch(0.72 0.2 350); }
.code2 .fn{ width:96px; background:oklch(0.74 0.15 200); }
.code2 .in{ width:30px; background:rgba(255,255,255,.28); margin-left:16px; }
.code2 .st{ width:120px; background:oklch(0.78 0.15 135); }
.code2 .pr{ width:80px; background:rgba(255,255,255,.16); }
.code2 .vr{ width:64px; background:oklch(0.74 0.16 60); }

/* --- shared dark panel --- */
.bt-c .mw, .bt-d .mw, .bt-f .mw{ background:rgba(8,8,11,.78); backdrop-filter:blur(6px); }

/* --- C: WordPress pages list --- */
.mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mp-title{ font-family:var(--font-display); font-size:13px; font-weight:600; color:#fff; }
.mp-add{ width:22px; height:22px; border-radius:7px; background:var(--grad); display:grid; place-items:center; color:#fff; }
.mp-add svg{ width:13px; height:13px; }
.mp-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:rgba(255,255,255,.05); margin-bottom:8px; }
.mp-nm{ font-family:var(--font-display); font-size:12.5px; color:rgba(255,255,255,.9); flex:1; }
.mp-badge{ font-family:var(--font-display); font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px; }
.mp-badge.live{ background:oklch(0.7 0.16 150 / .22); color:oklch(0.85 0.14 150); }
.mp-badge.draft{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); }

/* --- D: shop --- */
.shop2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pc{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px; }
.pc-img{ height:48px; border-radius:7px; background:linear-gradient(135deg, oklch(0.7 0.16 350 / .55), oklch(0.6 0.16 320 / .35)); margin-bottom:8px; }
.pc-nm{ height:7px; width:75%; border-radius:4px; background:rgba(255,255,255,.3); margin-bottom:6px; }
.pc-pr{ height:7px; width:42%; border-radius:4px; background:var(--grad-soft); }
.cart2{ display:flex; align-items:center; gap:9px; margin-top:11px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.06); }
.cart2-lbl{ font-family:var(--font-display); font-size:11px; color:rgba(255,255,255,.6); }
.cart2-amt{ font-family:var(--font-display); font-size:14px; font-weight:600; color:#fff; }
.cart2-btn{ margin-left:auto; font-family:var(--font-display); font-size:11px; font-weight:600; color:#fff; padding:7px 13px; border-radius:8px; background:var(--grad); }

/* --- E: figma canvas --- */
.bt-e .mw.mw-fig{ background:rgba(10,8,16,.8); }
.fig-stage{ position:relative; height:128px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:14px 14px; overflow:hidden; }
.fig-frame{ position:absolute; border:1.5px solid rgba(255,255,255,.4); border-radius:7px; background:rgba(255,255,255,.06); }
.fig-frame .fig-tag{ position:absolute; top:-16px; left:0; font-family:var(--font-display); font-size:9px; color:rgba(255,255,255,.55); }
.fig-frame.f1{ left:16px; top:24px; width:78px; height:78px; }
.fig-frame.f2{ right:18px; top:34px; width:92px; height:62px; }
.fig-cursor{ position:absolute; top:18px; left:20%; color:#fff; filter:drop-shadow(0 0 6px oklch(0.62 0.22 350)); }
.fig-cursor svg{ width:16px; height:16px; }
.fig-layers{ display:flex; gap:7px; margin-top:11px; }
.fig-layers span{ height:9px; border-radius:5px; background:rgba(255,255,255,.14); }
.fig-layers span:nth-child(1){ width:40%; } .fig-layers span:nth-child(2){ width:26%; } .fig-layers span:nth-child(3){ width:18%; }

/* --- F: SEO analytics --- */
.an-metrics{ display:flex; gap:9px; margin-bottom:14px; }
.an-chip{ flex:1; padding:10px 11px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.an-chip b{ font-family:var(--font-display); font-size:18px; font-weight:600; color:#fff; display:block; line-height:1; }
.an-chip span{ font-size:10px; color:rgba(255,255,255,.55); }
.an-chip.up b{ background:linear-gradient(100deg, oklch(0.82 0.16 150), oklch(0.78 0.16 130)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.an-chart{ display:flex; align-items:flex-end; gap:8px; height:78px; }
.an-chart i{ flex:1; height:var(--h); border-radius:5px 5px 0 0; background:var(--grad-soft); opacity:.92; }

/* ============================================================
   ABOUT — "team plans" style block
   ============================================================ */
.teamblock{ background:#1a1a1a; padding-block:104px; border-top:1px solid var(--line); }
.teamblock .h-sec.big{ font-size:clamp(30px,4.6vw,54px); max-width:34ch; margin-top:0px;}
.tb-cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:46px; }
.tb-intro{ grid-template-columns:1.5fr .85fr; align-items:center; gap:54px; }
.tb-col h3{ font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.tb-col p{ color:var(--fg-soft); font-size:15.5px; margin-top:13px; max-width:46ch; }
.tb-col .btn{ margin-top:22px; }
.tb-big{ display:grid; grid-template-columns:1fr 1fr !important; gap:16px; margin-top:40px; }
.tb-card{border-radius:var(--radius-lg); background:#1c1c23; padding:30px; overflow:hidden; position:relative; }
.tb-card h3{ font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.tb-card p{ color:var(--fg-soft); font-size:14.5px; margin-top:10px; max-width:42ch; }
.tb-card .tb-mock{ margin-top:24px; }

/* table mock */
.tbl{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02); }
.tbl .tr{ display:flex; align-items:center; gap:12px; padding:12px 15px; border-top:1px solid var(--line); }
.tbl .tr:first-child{ border-top:none; }
.tbl .tr .nm{ font-family:var(--font-display); font-size:13.5px; color:var(--fg); flex:1; }
.tbl .tr .bd{ font-size:11px; padding:3px 9px; border-radius:999px; font-family:var(--font-display); font-weight:500; }
.tbl .tr .bd.des{ background:oklch(0.55 0.2 350 / .2); color:oklch(0.82 0.12 350); }
.tbl .tr .bd.dev{ background:oklch(0.6 0.13 200 / .18); color:oklch(0.82 0.1 200); }
.sw{ width:34px; height:19px; border-radius:999px; background:rgba(255,255,255,.13); position:relative; flex:0 0 auto; }
.sw.on{ background:var(--grad-soft); }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s; }
.sw.on::after{ left:17px; }

/* progress / milestones mock */
.prog{ display:flex; flex-direction:column; gap:15px; }
.prog .pr{ display:flex; align-items:center; gap:12px; }
.prog .pr .av{ width:32px; height:32px; border-radius:9px; background:var(--grad-soft); flex:0 0 auto; display:grid; place-items:center; font-family:var(--font-display); font-size:11px; font-weight:700; color:#fff; }
.prog .pr .info{ flex:1; }
.prog .pr .info b{ font-family:var(--font-display); font-size:13px; display:block; color:var(--fg); }
.prog .pr .bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.1); margin-top:6px; overflow:hidden; }
.prog .pr .bar i{ display:block; height:100%; background:var(--grad-soft); border-radius:3px; }
.prog .pr .pct{ font-family:var(--font-display); font-size:12px; color:var(--fg-mut); flex:0 0 auto; }

/* features grid */
.tb-feats {
    margin-top: 40px;
    background: #1c1c23;
    padding: 30px;
    border-radius: 20px;
}
.tb-feats h3.h-sec{
    font-size:clamp(24px,4vw,32px) !important;
}
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 40px; margin-top:38px; }
.whyitem{ display:flex; gap:15px; }
.whyitem .fi{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.04); display:grid; place-items:center; color:var(--pink); }
.whyitem .fi svg{ width:18px; height:18px; }
.whyitem h4{ font-family:var(--font-display); font-size:16px; font-weight:600; }
.whyitem p{ color:var(--fg-soft); font-size:14px; margin-top:6px; line-height:1.5; }

/* testimonials — Magnific style (text columns) */
.tb-tmonials {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    margin-top: 40px;
    padding: 50px 30px 0px 30px;
    /* border-top: 1px solid var(--line); */
}
.qt .logo-wm{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff; margin-bottom:20px; letter-spacing:-.01em; }
.qt .logo-wm .gem{ width:16px; height:16px; border-radius:4px; background:var(--grad-soft); transform:rotate(45deg); }
.qt blockquote {
    font-size: 16px;
    line-height: 1.55;
    color: var(--fg-soft);
    font-weight: 500;
    margin: 0;
    border: 0;
    padding: 0;
}
.qt .by{ margin-top:22px; }
.qt .by b{ font-family:var(--font-display); font-size:14.5px; display:block; color:#fff; font-weight:600; }
.qt .by span{ font-size:13px; color:var(--fg-mut); }

/* ============================================================
   PRICING — denser, smaller type
   ============================================================ */
.plan{ padding:26px 26px 28px; gap:0; }
.plan .pname-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan .pname{ font-size:13px; }
.plan .badge2{ font-family:var(--font-display); font-size:11px; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-soft); }
.plan.feat .badge2{ background:var(--grad); border-color:transparent; color:#fff; }
.plan .ptag{ font-size:13px; min-height:34px; margin-top:9px; }
.plan .price{ margin-top:12px; align-items:baseline; gap:5px; }
.plan .price .amt{ font-size:32px; }
.plan .price .cur{ font-size:17px; margin-top:5px; }
.plan .per{ font-size:11.5px; color:var(--fg-mut); margin-top:0; }
.plan .credits{ font-size:12.5px; color:var(--fg-mut); margin-top:10px; }
.plan .credits b{ color:var(--fg-soft); font-weight:600; }
.plan .btn{ margin-top:18px; font-size:14px; padding:11px; }
.plan ul{ gap:9px; margin-top:18px; padding-top:18px; }
.plan li{ font-size:13px; align-items:center; }
.plan li .ck{ font-size:11px; margin-top:0; }
.plan li.off{ opacity:.4; }
.plan li.off .ck{ color:var(--fg-mut); }
.plan li .info{ margin-left:6px; color:var(--fg-mut); font-size:11px; cursor:help; }
.plan .subbox{ margin-top:18px; border:1px solid var(--line); border-radius:12px; padding:14px 15px; }
.plan .subbox .sh{ font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mut); }
.plan .subbox .sr{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fg-soft); margin-top:10px; }
.plan .subbox .sr .tick{ color:var(--pink); font-size:11px; }

/* pricing light overrides for new bits */
.light .plan .credits{ color:#8a8593; } .light .plan .credits b{ color:#3b3744; }
.light .plan .per{ color:#9a94a0; }
.light .plan .badge2{ border-color:rgba(0,0,0,.14); color:#6a6470; }
.light .plan li .info{ color:#a8a2ae; }
.light .plan .subbox{ border-color:rgba(0,0,0,.1); }
.light .plan .subbox .sh{ color:#8a8593; }
.light .plan .subbox .sr{ color:#3b3744; }
.light .plan.feat .credits{ color:var(--ink-soft); } .light .plan.feat .credits b{ color:var(--ink); }
.light .plan.feat .per{ color:#8a8593; }
.light .plan.feat .subbox{ border-color:rgba(0,0,0,.1); }
.light .plan.feat .subbox .sh{ color:#8a8593; }
.light .plan.feat .subbox .sr{ color:#3b3744; }
.light .plan.feat .badge2{ background:var(--brand); border-color:transparent; color:#fff; }

/* ============================================================
   LIGHT SECTIONS
   ============================================================ */
.section.light, .pricing.light{ background:var(--paper); color:var(--ink); }
.light .h-sec{ color:var(--ink) !important; }
.light .sub-sec{ color:var(--ink-soft); }
.light .eyebrow{ color:var(--crimson); }
.light .eyebrow::before{ background:var(--crimson); }
.light .btn-ghost{ border-color:rgba(0,0,0,.14); color:var(--ink); background:rgba(0,0,0,.02); }
.light .btn-ghost:hover{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.28); }
.light .plan-note{ color:var(--ink-soft); }

/* tech marquee on light */
.tech.light{ background:var(--paper); border-color:rgba(0,0,0,.08); }
.light .chip{ background:var(--paper-2); border-color:rgba(0,0,0,.09); color:#3b3744;  }
.light .chip:hover{ color:var(--ink); border-color:rgba(0,0,0,.2); }

/* pricing plans on light */
.light .plan{ background:var(--paper-2); border-color:rgba(0,0,0,.09); box-shadow:0 1px 0 rgba(0,0,0,.03); }
.light .plan:hover{ border-color:rgba(0,0,0,.18); box-shadow:0 24px 50px -30px rgba(0,0,0,.3); }
.light .plan .ptag{ color:var(--ink-soft); }
.light .plan .price .amt{ color:var(--ink); }
.light .plan .price .cur{ color:var(--ink-soft); }
.light .plan ul{ border-top-color:rgba(0,0,0,.1); }
.light .plan li{ color:#3b3744; }
.light .plan .per{ color:#8a8593; }
.light .price-toggle{ background:var(--paper-2); border-color:rgba(0,0,0,.12); }
.light .price-toggle button{ color:var(--ink-soft); }
.light .price-toggle button.on{ color:#fff; }
/* featured plan — border highlight only, same surface as others */
.light .plan.feat{ background:var(--paper-2); border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.light .plan.feat .ptag{ color:var(--ink-soft); }
.light .plan.feat .price .amt{ color:var(--ink); }
.light .plan.feat .price .cur{ color:var(--ink-soft); }
.light .plan.feat ul{ border-top-color:rgba(0,0,0,.1); }
.light .plan.feat li{ color:#3b3744; }
.light .plan.feat .per{ color:#8a8593; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tmonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.tm{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; background:var(--panel);
  display:flex; flex-direction:column; transition:.3s var(--ease);
}
.tm:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.tm .stars{ display:flex; gap:3px; color:var(--pink); font-size:14px; margin-bottom:14px; }
.tm blockquote{ font-size:16px; line-height:1.55; color:var(--fg); }
.tm blockquote b{ color:#fff; }
.tm .by{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.tm .by .av{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; background:var(--grad-soft); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:15px; }
.tm .by .who b{ display:block; font-family:var(--font-display); font-size:15px; font-weight:600; }
.tm .by .who span{ font-size:13px; color:var(--fg-mut); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; gap:30px; }
  .serv-grid,.proj-grid,.price-grid,.about-cols,.about-top,.tmonials,.tb-cols,.tb-big,.tb-tmonials{ grid-template-columns:1fr; }
   .tb-tmonials {
            margin-top: 48px;
            padding-top: 36px;
            gap: 32px;
            padding: 30px 10px 0px 10px;
        }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .serv-card{ grid-template-columns:1fr; min-height:0; }
  .serv-card .vis{ min-height:260px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  /* bento → 2 columns on tablet */
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }
  /* mobile nav */
.tb-cols.tb-intro {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.tb-big {
    display: grid;
    grid-template-columns: 1fr !important;
}
.tb-cols.tb-intro .reveal.in{width:50%;}
  .nav-links{ display:none; }
  .nav-cta-desktop{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-in .logo{ margin-right:auto; margin-left:4px; font-size:16px; }
  .nav-cta .btn-grad{ padding:9px 16px !important; font-size:14px; }
  .serv-grid,.proj-grid,.price-grid,.about-cols,.about-top,.tmonials,.tb-cols,.tb-big,.tb-tmonials{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .serv-card{ grid-template-columns:1fr; min-height:0; }
  .serv-card .vis{ min-height:260px; }
  .about-stats {grid-template-columns: repeat(3,1fr);gap: 15px; margin-left:0px;}
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:680px){
    .legal-box {
    padding: 12px;
    background: beige;
    font-size: 10px;
    font-weight: 100;
    border-radius: 20px;
}
.btn {
    font-size: 14px;
    padding: 9px 16px;
}
	.tb-cols.tb-intro .reveal.in {
width:100%;
}
  .section{ padding-block:64px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-aside{ display:none; }
  .proj-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:repeat(3,1fr); gap:11px;margin-top: 10px;margin-bottom: 20px;}
  .st {text-align: left;}
  .feat-grid{ grid-template-columns:1fr; }
  .hero-meta{ flex-wrap:wrap; gap:18px 30px; }
  .wrap{ padding-inline:20px; }
  .bento{ display: flex;flex-direction: column;}
  .bt{ min-height:400px; }
  .chip, #ai-tools .chip {
    min-width: 120px !important;
    gap: 5px !important;
    padding: 9px 16px; !important}
	.chip .sq img {height: 27px;object-fit: contain;border-radius: 5px;max-width: 80px;}
  /* about / teamblock */
  .teamblock{ padding-block:68px; }
  .tb-cols,.tb-intro{ gap:30px; margin-top:30px; }
  .about-photo {
    height: 200px;
    border-radius: 100% !important;
    max-width: 200px;
    width: 100%;
    display: flex;
    align-items: center;
}
	.info-abt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0px;
    width: 100%;
}
   .about-stats {
    grid-template-columns: repeat(1,1fr);
    gap: 11px;
    margin-top: 0px;
    margin-bottom: 20px;
}
	.tb-cols.tb-intro a.btn.btn-ghost {
    margin-top: 10px !important;
    margin-bottom: 15px;
}
  .about-photo image-slot{ min-height:260px; }
  .tb-big{ margin-top:24px; }
  .tb-card{ padding:24px; }
  .tb-feats{ margin-top:16px; padding:24px;}
  .feat-grid{ gap:24px; margin-top:26px; }
  .tb-tmonials{ margin-top:48px; padding-top:36px; gap:32px; }
  .about-stats .st b{ font-size:26px; }
	.teamblock .h-sec.big{
		max-width:100%;
	}
  /* hero text spacing */\
  .hero h1{ font-size:clamp(34px,9vw,52px); }
  .hero p.lead{ font-size:16px; }
  .trust-line {font-size: 12px;}
  /* footer: brand on top, tabbed link columns */
  .foot-top{ display:flex; flex-direction:column; gap:0; }
  .foot-brand{ width:100%; margin-bottom:26px; }
  .foot-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; }
  .foot-tabs .ft-tab{
    font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--fg-mut);
    padding:10px 4px; flex:1; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s; border-radius:0px;
  }
	button.ft-tab.active {
    background-color: transparent !important;
  }
  .foot-tabs .ft-tab.active{ color:var(--fg); border-bottom-color:var(--brand); }
  .foot-col{ display:none; }
  .foot-col.active{ display:block; }
  .foot-col h4{ display:none; }
  .foot ul{ gap:14px; }
  .foot ul a{ font-size:15px; }
  .foot-bot{ margin-top:40px; flex-direction:column; align-items:flex-start; gap:18px; }
  /* pricing + CTA breathing room */
  .price-grid{ gap:14px; }
  .cta-inner{ padding:72px 20px 80px; }
}