/* ============================================================
   SHRADHYA TECH SOLUTIONS — style.css
   ============================================================ */

/* === MAIN STYLES === */
/* ============================================================
   SHRADHYA TECH SOLUTIONS — style.css
   Layout · Components · Sections · Responsive
   ============================================================ */

/* RESET & ROOT */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }

/* ══════════════════════════════════════════════════════
   THEME SYSTEM — 5 themes, CSS variables
   ══════════════════════════════════════════════════════ */

/* ── DEFAULT: Ocean Dark ── */
:root {
  --dark:       #0D1F36;  --navy:  #132844;  --navy-2: #1A3354;
  --teal:       #00D4AA;  --teal-2:#00B8F5;
  --gold:       #FFB800;  --gold-2:#FF8C42;
  --text:       #EEF5FF;  --muted: #7A90B5;
  --border:     rgba(0,212,170,.15);
  --card:       rgba(19,40,68,.92);
  --fh:         'Syne', sans-serif;
  --fb:         'Plus Jakarta Sans', sans-serif;
  --radius:     16px;
  --shadow:     0 24px 70px rgba(0,0,0,.5);
  --nav-bg:     rgba(9,22,42,.92);
  --mob-bg:     rgba(9,22,42,.99);
  --input-bg:   rgba(255,255,255,.05);
  --input-bd:   rgba(255,255,255,.1);
  --btn-s-bd:   rgba(255,255,255,.22);
  --hero-bg:    rgba(13,35,71,.45);
  --is-light:   0;         /* 0 = dark theme, 1 = light theme */
}

/* ── THEME 2: Midnight (Very Deep) ── */
[data-theme="midnight"] {
  --dark:     #000306;  --navy:  #010912;  --navy-2: #020E1C;
  --card:     rgba(2,14,28,.96);
  --border:   rgba(0,212,170,.10);
  --nav-bg:   rgba(0,2,5,.96);
  --mob-bg:   rgba(0,2,5,.99);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEMES — text/bg flip + nav/card overrides
   ══════════════════════════════════════════════════════ */

/* ── THEME 3: Snow White ── */
[data-theme="white"] {
  --dark:     #F4F7FB;  --navy:  #E8EEF8;  --navy-2: #DCE6F4;
  --text:     #0D1F36;  --muted: #4A6080;
  --card:     rgba(255,255,255,.97);
  --border:   rgba(0,180,150,.22);
  --shadow:   0 24px 70px rgba(0,0,0,.1);
  --nav-bg:   rgba(244,247,251,.96);
  --mob-bg:   rgba(244,247,251,.99);
  --input-bg: rgba(0,0,0,.04);
  --input-bd: rgba(0,0,0,.12);
  --btn-s-bd: rgba(0,150,120,.35);
  --hero-bg:  rgba(180,210,240,.3);
  --is-light: 1;
}

/* ── THEME 4: Sky Blue ── */
[data-theme="sky"] {
  --dark:     #E3F2FD;  --navy:  #BBDEFB;  --navy-2: #A8D4F7;
  --text:     #0B2545;  --muted: #2A6090;
  --card:     rgba(227,242,253,.97);
  --border:   rgba(0,150,200,.25);
  --shadow:   0 24px 70px rgba(0,0,0,.08);
  --nav-bg:   rgba(220,240,255,.96);
  --mob-bg:   rgba(220,240,255,.99);
  --input-bg: rgba(0,0,0,.04);
  --input-bd: rgba(0,0,0,.1);
  --btn-s-bd: rgba(0,130,200,.35);
  --hero-bg:  rgba(100,180,240,.25);
  --teal:     #0097A7;  --teal-2: #006DAA;
  --is-light: 1;
}

/* ── THEME 5: Cream Yellow ── */
[data-theme="cream"] {
  --dark:     #FDF6E3;  --navy:  #F5EACC;  --navy-2: #EDE0BA;
  --text:     #2C1A00;  --muted: #7A5A20;
  --card:     rgba(253,246,227,.97);
  --border:   rgba(180,130,0,.22);
  --shadow:   0 24px 70px rgba(0,0,0,.08);
  --nav-bg:   rgba(253,246,227,.96);
  --mob-bg:   rgba(253,246,227,.99);
  --input-bg: rgba(0,0,0,.04);
  --input-bd: rgba(0,0,0,.1);
  --btn-s-bd: rgba(150,100,0,.35);
  --hero-bg:  rgba(220,190,100,.2);
  --teal:     #00897B;  --teal-2: #00695C;
  --is-light: 1;
}

/* ── ALIAS: --white → --text (backwards compat) ── */
:root, [data-theme] { --white: var(--text) }

/* ── THEME SMOOTH TRANSITIONS ── */
body, nav, footer, section, .svc-c, .why-f, .float-card,
.pf-c, .yt-card, #chat-window, #wa-modal, .val-i, .step-i,
.stat-i, .testi-c, .ct-form, .ct-info { 
  transition: background-color .4s ease, border-color .35s ease, color .35s ease;
}

html  { scroll-behavior: smooth }
body  { font-family: var(--fb); background: var(--dark); color: var(--text); overflow-x: hidden }
img   { display: block; max-width: 100% }
a     { text-decoration: none }

/* ── CURSOR ─────────────────────────────────────── */


/* ── PRELOADER ───────────────────────────────────── */
#preloader { position:fixed; inset:0; background:var(--dark); z-index:99999; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.2rem; transition:opacity .7s,visibility .7s }
#preloader.done { opacity:0; visibility:hidden; pointer-events:none }
.pre-logo { font-family:var(--fh); font-size:2.4rem; font-weight:800; background:linear-gradient(135deg,var(--teal),var(--teal-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:glow 1.5s ease-in-out infinite alternate }
.pre-sub  { font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted) }
.pre-bar  { width:220px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden }
.pre-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-2)); width:0; animation:preload 1.8s ease forwards }

/* ── NAV ─────────────────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:9900; padding:1.2rem 5%; display:flex; align-items:center; justify-content:space-between; background:var(--nav-bg); backdrop-filter:blur(22px); border-bottom:1px solid var(--border); transition:all .3s }
.logo { display:flex; align-items:center; gap:12px }
.logo-mark { width:42px; height:42px; background:linear-gradient(135deg,var(--teal),var(--teal-2)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:800; font-size:16px; color:var(--dark); position:relative; overflow:hidden; flex-shrink:0 }
.logo-mark::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2)) }
.logo-name { font-family:var(--fh); font-size:.95rem; font-weight:700; background:linear-gradient(135deg,var(--text),var(--teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; letter-spacing:.02em }
.logo-sub  { font-size:.58rem; color:var(--muted); letter-spacing:.15em; text-transform:uppercase }
.nav-ul { display:flex; align-items:center; gap:1.8rem; list-style:none }
.nav-ul a { color:var(--muted); font-size:.83rem; font-weight:500; letter-spacing:.04em; transition:color .3s; position:relative }
.nav-ul a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--teal); transition:width .3s }
.nav-ul a:hover { color:var(--text) }
.nav-ul a:hover::after { width:100% }
.nav-cta { padding:.48rem 1.3rem; background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark)!important; border-radius:50px; font-weight:700!important; box-shadow:0 0 20px rgba(0,212,170,.3) }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 30px rgba(0,212,170,.5)!important }
.nav-cta::after { display:none!important }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none }
.hamburger span { width:24px; height:2px; background:var(--text); transition:all .3s; display:block }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
.mob-menu { display:none; position:fixed; inset:0; background:var(--mob-bg); z-index:9910; flex-direction:column; align-items:center; justify-content:center; gap:2rem; backdrop-filter:blur(30px) }
.mob-menu.open { display:flex }
.mob-menu a { color:var(--text); font-family:var(--fh); font-size:2.2rem; font-weight:700; transition:color .3s }
.mob-menu a:hover { color:var(--teal) }

/* ── GLOWLINE ────────────────────────────────────── */
.gl-line { height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,170,.3),transparent) }

/* ── SHARED SECTION ──────────────────────────────── */
section { padding:6rem 5% }
.inner  { max-width:1200px; margin:0 auto }
.s-head { text-align:center; margin-bottom:4rem }
.s-tag  { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:.8rem }
.s-title{ font-family:var(--fh); font-size:clamp(1.9rem,4vw,3rem); font-weight:800; line-height:1.15; letter-spacing:-.02em }
.s-title span { background:linear-gradient(135deg,var(--teal),var(--teal-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.s-desc { color:var(--muted); font-size:.95rem; max-width:550px; margin:.9rem auto 0; line-height:1.75 }

/* ── BUTTONS ─────────────────────────────────────── */
.btn    { padding:.9rem 2.4rem; border-radius:50px; font-weight:700; font-size:.88rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all .3s; letter-spacing:.04em; font-family:var(--fb) }
.btn-p  { background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark); box-shadow:0 0 30px rgba(0,212,170,.25) }
.btn-p:hover { transform:translateY(-3px); box-shadow:0 0 50px rgba(0,212,170,.5) }
.btn-s  { background:transparent; color:var(--text); border:1.5px solid var(--btn-s-bd) }
.btn-s:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-3px) }

/* ── HERO ────────────────────────────────────────── */
#hero     { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6rem 4% 4rem }
#hcanvas  { position:absolute; inset:0; z-index:0 }
.hero-c   { position:relative; z-index:2; text-align:center; max-width:1060px; margin:0 auto; width:100% }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.25); border-radius:50px; padding:.4rem 1.2rem; font-size:.75rem; font-weight:600; color:var(--teal); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.4rem; animation:fadeUp .8s ease both }
.badge-dot{ width:6px; height:6px; background:var(--teal); border-radius:50%; animation:pulse 2s infinite }
.tw-wrap  { min-height:2.8em; display:flex; align-items:center; justify-content:center; margin:1.4rem 0 .6rem }
.tw       { font-family:var(--fh); font-size:clamp(1.3rem,3.2vw,2rem); font-weight:800; letter-spacing:-.01em; color:var(--white); border-right:3px solid var(--teal); animation:blink 1s infinite; padding-right:5px; line-height:1.2 }
.hero-desc{ font-size:1rem; color:var(--muted); max-width:580px; margin:0 auto 2.2rem; line-height:1.8; animation:fadeUp .8s .3s ease both }
.hero-btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .8s .4s ease both }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; animation:fadeUp .8s .8s ease both; color:var(--muted); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase }
.scroll-ln{ width:1px; height:50px; background:linear-gradient(to bottom,var(--teal),transparent); animation:scrolldn 2s ease-in-out infinite }

/* ── IMAGE SHOWCASE ──────────────────────────────── */
.hero-showcase { position:relative; width:100%; max-width:1060px; margin:0 auto; animation:fadeUp .8s .12s ease both }
.showcase-frame { position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(0,212,170,.32); box-shadow:0 0 0 1px rgba(0,212,170,.07),0 40px 100px rgba(0,0,0,.75),0 0 80px rgba(0,212,170,.1); background:#020d1a }
.showcase-frame::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 80%,rgba(2,11,24,.45) 100%); z-index:2; pointer-events:none }
.showcase-scanline { display:none }
.showcase-corner { position:absolute; width:26px; height:26px; z-index:5; pointer-events:none }
.sc-tl { top:12px;  left:12px;  border-top:2px solid var(--teal); border-left:2px solid var(--teal);  border-radius:3px 0 0 0 }
.sc-tr { top:12px;  right:12px; border-top:2px solid var(--teal); border-right:2px solid var(--teal); border-radius:0 3px 0 0 }
.sc-bl { bottom:30px; left:12px;  border-bottom:2px solid var(--teal); border-left:2px solid var(--teal);  border-radius:0 0 0 3px }
.sc-br { bottom:30px; right:12px; border-bottom:2px solid var(--teal); border-right:2px solid var(--teal); border-radius:0 0 3px 0 }
.sh-tag { position:absolute; top:14px; right:14px; z-index:6; background:rgba(2,11,24,.82); border:1px solid rgba(0,212,170,.28); border-radius:6px; padding:.28rem .8rem; font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--teal); backdrop-filter:blur(8px); transition:opacity .4s }
.showcase-imgs { position:relative; height:420px; width:100% }
.sh-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:0; transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.4s cubic-bezier(.4,0,.2,1); transform:scale(1.03); filter:brightness(1.0) saturate(1.05) contrast(1.02) }
.sh-img.active { opacity:1; transform:scale(1) }
.showcase-hud  { position:absolute; bottom:0; left:0; right:0; z-index:4; padding:1rem 1.5rem; display:flex; align-items:flex-end; justify-content:space-between }
.sh-label { display:flex; align-items:center; gap:8px; background:rgba(2,11,24,.88); border:1px solid rgba(0,212,170,.28); border-radius:50px; padding:.38rem 1.1rem; backdrop-filter:blur(14px) }
.sh-dot   { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.5s infinite; flex-shrink:0 }
.sh-txt   { font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal) }
.sh-pips  { display:flex; gap:6px; align-items:center }
.sh-pip   { width:26px; height:3px; border-radius:3px; background:rgba(255,255,255,.2); transition:all .45s; cursor:pointer }
.sh-pip.on{ background:var(--teal); width:40px; box-shadow:0 0 10px rgba(0,212,170,.55) }
.showcase-bar  { height:3px; background:rgba(255,255,255,.05); overflow:hidden; border-radius:0 0 20px 20px }
.showcase-prog { height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-2)); width:0; transition:width .1s linear }

/* ── STATS ───────────────────────────────────────── */
#stats   { padding:1.6rem 5%; background:var(--navy); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.stats-g { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:1200px; margin:0 auto }
.stat-i  { text-align:center; padding:.6rem .5rem; border-right:1px solid var(--border) }
.stat-i:last-child { border-right:none }
.stat-n  { font-family:var(--fh); font-size:clamp(1.4rem,2.8vw,2.2rem); font-weight:800; background:linear-gradient(135deg,var(--teal),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1 }
.stat-l  { color:var(--muted); font-size:.75rem; margin-top:.3rem; letter-spacing:.04em }

/* ── SERVICES ────────────────────────────────────── */
#services{ background:var(--dark) }
.svc-g   { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem }

/* Full-image card — TCS style */
.svc-c {
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:var(--radius); height:360px;
  border:1px solid rgba(0,212,170,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:transform .42s ease, box-shadow .42s ease, border-color .42s ease;
}
.svc-c:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 56px rgba(0,0,0,.55), 0 0 40px rgba(0,212,170,.12);
  border-color:rgba(0,212,170,.35);
}

/* Teal top-bar on hover */
.svc-c::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--teal-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s ease; z-index:5;
}
.svc-c:hover::after { transform:scaleX(1) }

/* ── IMAGE fills the full card ── */
.svc-img-wrap {
  position:absolute; inset:0;
  border-radius:var(--radius); overflow:hidden;
}
.svc-img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(1.0) saturate(1.05) contrast(1.0);
  transform:scale(1.02);
  transition:transform .7s cubic-bezier(.4,0,.2,1), filter .5s ease;
}
.svc-c:hover .svc-img {
  transform:scale(1.10);
  filter:brightness(.88) saturate(1.08) contrast(1.02);
}

/* ── Dark gradient overlay ── */
.svc-img-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(2,11,24,.0)   0%,
    rgba(2,11,24,.05) 30%,
    rgba(2,11,24,.55) 62%,
    rgba(2,11,24,.90) 100%
  );
  transition:background .5s ease;
}
.svc-c:hover .svc-img-overlay {
  background:linear-gradient(
    to bottom,
    rgba(2,11,24,.0)   0%,
    rgba(2,11,24,.10) 28%,
    rgba(2,11,24,.68) 60%,
    rgba(2,11,24,.95) 100%
  );
}

/* ── Number watermark ── */
.svc-num {
  position:absolute; top:.8rem; right:1rem; z-index:2;
  font-family:var(--fh); font-size:1.6rem; font-weight:800;
  color:rgba(255,255,255,.22); line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  transition:color .4s;
}
.svc-c:hover .svc-num { color:rgba(0,212,170,.4) }

/* ── Content block pinned to bottom ── */
.svc-content {
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  padding:1.4rem 1.5rem 1.6rem;
  transform:translateY(0);
  transition:padding .4s ease;
}

/* ── Icon ── */
.svc-icon {
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; margin-bottom:.85rem;
  background:rgba(0,212,170,.18);
  border:1px solid rgba(0,212,170,.35);
  backdrop-filter:blur(8px);
  box-shadow:0 0 16px rgba(0,212,170,.2);
  transition:all .4s;
}
.svc-c:hover .svc-icon {
  background:linear-gradient(135deg,var(--teal),var(--teal-2));
  border-color:transparent;
  box-shadow:0 0 24px rgba(0,212,170,.5);
  transform:scale(1.08);
}

/* ── Title ── */
.svc-t {
  font-family:var(--fh); font-size:1.08rem; font-weight:700;
  color:var(--white); margin-bottom:.55rem; line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* ── Description — hidden by default, slides up on hover ── */
.svc-d {
  color:rgba(238,245,255,.78); font-size:.83rem; line-height:1.65;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s ease, opacity .4s ease;
}
.svc-c:hover .svc-d { max-height:120px; opacity:1 }

/* ── Arrow link ── */
.svc-arr {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--teal); font-size:.78rem; font-weight:700;
  margin-top:.9rem; opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
  letter-spacing:.06em;
}
.svc-c:hover .svc-arr { opacity:1; transform:translateY(0) }

/* ── ABOUT ───────────────────────────────────────── */
#about   { background:var(--navy) }
.about-g { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.about-photo-wrap { position:relative; width:100%; aspect-ratio:4/3; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.6) }
.about-photo { width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(.93) saturate(1.05) }
.about-photo-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(2,11,24,.35)) }
.float-card { position:absolute; background:rgba(11,30,62,.95); border:1px solid var(--border); border-radius:12px; padding:.9rem 1.2rem; display:flex; align-items:center; gap:10px; backdrop-filter:blur(20px) }
.fc-1 { bottom:-22px; right:-22px }
.fc-2 { top:18px; left:-22px }
.fc-icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.1rem }
.fc-t { background:rgba(0,212,170,.12) }
.fc-g { background:rgba(255,184,0,.12) }
.fc-n { font-family:var(--fh); font-size:1.25rem; font-weight:800; line-height:1 }
.fc-l { font-size:.68rem; color:var(--muted); margin-top:2px }
.about-content .s-tag { text-align:left }
.about-ht { font-family:var(--fh); font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:800; line-height:1.2; margin-bottom:1.5rem }
.about-ht span { background:linear-gradient(135deg,var(--teal),var(--teal-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.about-p { color:var(--muted); line-height:1.8; margin-bottom:1.1rem; font-size:.93rem }
.vals-g  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem }
.val-i   { display:flex; align-items:flex-start; gap:10px; padding:1rem; background:rgba(0,212,170,.04); border:1px solid rgba(0,212,170,.1); border-radius:10px; transition:all .3s }
.val-i:hover { background:rgba(0,212,170,.08); border-color:rgba(0,212,170,.2); transform:translateY(-2px) }
.val-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); margin-top:7px; flex-shrink:0 }
.val-t   { font-family:var(--fh); font-size:.85rem; font-weight:700; margin-bottom:4px }
.val-d   { font-size:.78rem; color:var(--muted); line-height:1.5 }

/* ── WHY US ──────────────────────────────────────── */
#why     { background:var(--dark) }
.why-g   { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.why-feats { display:flex; flex-direction:column; gap:1.2rem }
.why-f   { display:flex; gap:1.2rem; padding:1.4rem; background:var(--card); border:1px solid var(--border); border-radius:12px; transition:all .35s }
.why-f:hover { border-color:rgba(0,212,170,.3); transform:translateX(7px); box-shadow:0 8px 30px rgba(0,0,0,.3) }
.why-fi  { width:46px; height:46px; flex-shrink:0; border-radius:12px; background:linear-gradient(135deg,rgba(0,212,170,.12),rgba(0,184,245,.07)); display:flex; align-items:center; justify-content:center; font-size:1.3rem }
.why-ft  { font-family:var(--fh); font-size:.95rem; font-weight:700; margin-bottom:4px }
.why-fd  { font-size:.83rem; color:var(--muted); line-height:1.6 }
.why-photo-wrap { border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.5); position:relative; height:480px }
.why-photo { width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(.90) saturate(1.05) }
.why-photo-badge { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); background:rgba(2,11,24,.92); border:1px solid rgba(0,212,170,.3); border-radius:16px; padding:1rem 2rem; text-align:center; backdrop-filter:blur(14px); white-space:nowrap }
.why-photo-badge .why-cn { font-family:var(--fh); font-size:2.6rem; font-weight:800; background:linear-gradient(135deg,var(--teal),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1 }
.why-photo-badge .why-cl { color:var(--muted); font-size:.73rem; margin-top:4px; letter-spacing:.05em }

/* ── PROCESS ─────────────────────────────────────── */
#process { background:var(--navy) }
.process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; position:relative }
.process-steps::before { content:''; position:absolute; top:40px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--teal),var(--teal),transparent); opacity:.2 }
.step-i  { text-align:center; padding:2rem 1.5rem; position:relative }
.step-num{ width:80px; height:80px; border-radius:50%; border:2px solid rgba(0,212,170,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; font-family:var(--fh); font-size:1.6rem; font-weight:800; background:linear-gradient(135deg,rgba(0,212,170,.1),rgba(0,184,245,.05)); transition:all .4s; color:var(--teal) }
.step-i:hover .step-num { background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark); border-color:transparent; box-shadow:0 0 30px rgba(0,212,170,.4); transform:scale(1.1) }
.step-t  { font-family:var(--fh); font-size:1rem; font-weight:700; margin-bottom:.6rem }
.step-d  { color:var(--muted); font-size:.82rem; line-height:1.6 }
.process-strip { margin-top:4rem; position:relative; height:220px; border-radius:18px; overflow:hidden; border:1px solid var(--border) }
.process-strip img { width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:brightness(.55) saturate(1.1) }
.process-strip-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,11,24,.85) 0%,rgba(2,11,24,.3) 50%,rgba(2,11,24,.85) 100%); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem }
.ps-quote { font-family:var(--fh); font-size:clamp(1.1rem,2.5vw,1.6rem); font-weight:800; text-align:center; background:linear-gradient(135deg,var(--white),var(--teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.ps-sub   { font-size:.8rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase }

/* ── PORTFOLIO ───────────────────────────────────── */
#portfolio{ background:var(--dark) }
.pf-filter{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-bottom:3rem }
.pf-btn   { padding:.45rem 1.4rem; border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:50px; font-size:.82rem; cursor:pointer; font-family:var(--fb); font-weight:500; letter-spacing:.04em; transition:all .3s }
.pf-btn:hover,.pf-btn.act { background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark); border-color:transparent }
.pf-g     { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem }
.pf-c     { background:var(--navy-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all .4s; cursor:pointer }
.pf-c:hover { transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,0,0,.6); border-color:rgba(0,212,170,.35) }
.pf-thumb { height:200px; position:relative; overflow:hidden }
.pf-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.90) saturate(1.05); transition:transform .55s ease,filter .4s }
.pf-c:hover .pf-thumb img { transform:scale(1.07); filter:brightness(.72) saturate(1.15) }
.pf-ov  { position:absolute; inset:0; background:rgba(0,212,170,.12); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s }
.pf-c:hover .pf-ov { opacity:1 }
.pf-vb  { padding:.55rem 1.4rem; background:var(--teal); color:var(--dark); border-radius:50px; font-weight:700; font-size:.78rem; transform:translateY(10px); transition:transform .3s }
.pf-c:hover .pf-vb { transform:translateY(0) }
.pf-info{ padding:1.4rem }
.pf-tag { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:.4rem }
.pf-t   { font-family:var(--fh); font-size:1rem; font-weight:700; margin-bottom:.5rem }
.pf-d   { font-size:.83rem; color:var(--muted); line-height:1.6 }
.pf-tech{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem }
.tech-p { padding:.18rem .65rem; background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.18); border-radius:50px; font-size:.68rem; color:var(--teal); font-weight:500 }

/* ── YOUTUBE VIDEOS ──────────────────────────────── */
#videos  { background:var(--navy) }
.yt-g    { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem }
.yt-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:all .4s; position:relative }
.yt-card:hover { transform:translateY(-7px); border-color:rgba(255,0,0,.4); box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(255,0,0,.1) }
.yt-thumb{ position:relative; height:190px; overflow:hidden; background:#000 }
.yt-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease,filter .4s; filter:brightness(.93) }
.yt-card:hover .yt-thumb img { transform:scale(1.06); filter:brightness(.72) }
.yt-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.yt-play-btn { width:64px; height:64px; background:rgba(255,0,0,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .35s; box-shadow:0 0 0 0 rgba(255,0,0,.5) }
.yt-card:hover .yt-play-btn { background:rgba(255,0,0,1); transform:scale(1.12); box-shadow:0 0 0 12px rgba(255,0,0,.18) }
.yt-play-icon { width:0; height:0; border-style:solid; border-width:10px 0 10px 20px; border-color:transparent transparent transparent #fff; margin-left:5px }
.yt-dur { position:absolute; bottom:8px; right:10px; background:rgba(0,0,0,.85); color:#fff; font-size:.68rem; font-weight:700; padding:.18rem .5rem; border-radius:4px }
.yt-info { padding:1.2rem }
.yt-cat  { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#ff4444; margin-bottom:.4rem }
.yt-t    { font-family:var(--fh); font-size:.95rem; font-weight:700; margin-bottom:.5rem; line-height:1.35 }
.yt-meta { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.75rem }
.yt-meta span { display:flex; align-items:center; gap:4px }

/* ── YOUTUBE LIGHTBOX MODAL ──────────────────────── */
#yt-modal { position:fixed; inset:0; z-index:9950; display:none; align-items:center; justify-content:center; padding:1rem }
#yt-modal.open { display:flex }
.yt-backdrop { position:absolute; inset:0; background:rgba(2,11,24,.96); backdrop-filter:blur(18px); animation:overlayIn .3s ease }
.yt-modal-box { position:relative; z-index:1; width:100%; max-width:860px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,50,50,.3); box-shadow:0 40px 100px rgba(0,0,0,.8); animation:modalIn .4s ease }
.yt-modal-close { position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(255,50,50,.85); border:none; color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s }
.yt-modal-close:hover { background:#ff3333; transform:scale(1.1) }
.yt-iframe-wrap { position:relative; padding-bottom:56.25%; height:0; background:#000 }
.yt-iframe-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.yt-modal-info { padding:1.2rem 1.5rem; background:var(--navy-2) }
.yt-modal-title { font-family:var(--fh); font-size:1.1rem; font-weight:700; margin-bottom:.4rem }
.yt-modal-desc  { font-size:.83rem; color:var(--muted); line-height:1.6 }

/* ── TESTIMONIALS ────────────────────────────────── */
#testimonials { background:var(--navy) }
.testi-banner { position:relative; height:160px; border-radius:var(--radius); overflow:hidden; margin-bottom:3rem }
.testi-banner img { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:brightness(.4) saturate(1.1) }
.testi-banner-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,11,24,.9),rgba(0,212,170,.12),rgba(2,11,24,.9)); display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; padding:1.5rem }
.tb-stat { text-align:center }
.tb-n { font-family:var(--fh); font-size:2rem; font-weight:800; background:linear-gradient(135deg,var(--teal),var(--teal-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1 }
.tb-l { font-size:.7rem; color:var(--muted); margin-top:4px; letter-spacing:.08em; text-transform:uppercase }
.testi-wrap  { overflow:hidden }
.testi-track { display:flex; gap:1.5rem; transition:transform .5s cubic-bezier(.4,0,.2,1) }
.testi-c     { flex:0 0 calc(50% - .75rem); background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; transition:border-color .3s }
.testi-c:hover { border-color:rgba(0,212,170,.3) }
.testi-q { font-size:3.5rem; color:var(--teal); line-height:.9; margin-bottom:1rem; font-family:Georgia,serif; opacity:.7 }
.testi-txt { color:var(--muted); font-size:.93rem; line-height:1.75; margin-bottom:1.5rem; font-style:italic }
.testi-auth { display:flex; align-items:center; gap:12px }
.auth-av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-2)); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:.9rem; font-weight:800; color:var(--dark); flex-shrink:0 }
.auth-n  { font-family:var(--fh); font-weight:700; font-size:.88rem }
.auth-r  { font-size:.73rem; color:var(--muted) }
.auth-s  { color:var(--gold); font-size:.82rem; margin-top:2px }
.sl-ctrl { display:flex; gap:1rem; justify-content:center; margin-top:2.5rem }
.sl-btn  { width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--white); cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:all .3s; font-family:var(--fb) }
.sl-btn:hover { background:var(--teal); color:var(--dark); border-color:var(--teal) }

/* ── CTA BAND ────────────────────────────────────── */
#cta-band { background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(0,184,245,.04)); border-top:1px solid rgba(0,212,170,.18); border-bottom:1px solid rgba(0,212,170,.18); padding:5rem 5%; text-align:center; position:relative; overflow:hidden }
.cta-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.18) saturate(.8); z-index:0 }
#cta-band .inner { position:relative; z-index:1 }
.cta-h { font-family:var(--fh); font-size:clamp(1.8rem,4vw,3rem); font-weight:800; margin-bottom:1rem; line-height:1.2 }
.cta-p { color:var(--muted); max-width:500px; margin:0 auto 2rem; line-height:1.75 }

/* ── CONTACT ─────────────────────────────────────── */
#contact { background:var(--dark) }
.contact-strip { position:relative; height:90px; border-radius:14px; overflow:hidden; margin-bottom:3rem; border:1px solid var(--border) }
.contact-strip img { width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:brightness(.28) saturate(.7) }
.contact-strip-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1.8rem; flex-wrap:wrap; padding:0 2rem }
.cs-item { display:flex; align-items:center; gap:.55rem; font-size:.82rem; font-weight:500; color:var(--white); white-space:nowrap }
.cs-icon { font-size:1rem }
.cs-divider { width:1px; height:28px; background:rgba(0,212,170,.25) }
.contact-team-photo { position:relative; border-radius:var(--radius); overflow:hidden; height:220px; border:1px solid var(--border) }
.contact-team-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(.90) saturate(1.05) }
.contact-team-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(2,11,24,.95) 0%,rgba(2,11,24,.2) 55%,transparent 100%); display:flex; align-items:flex-end; padding:1.2rem }
.ct-team-badge { display:flex; align-items:center; gap:1rem }
.ct-team-avatars { display:flex }
.cta-av { width:36px; height:36px; border-radius:50%; border:2px solid var(--dark); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:.72rem; font-weight:800; color:var(--dark); margin-left:-10px; flex-shrink:0 }
.cta-av:first-child { margin-left:0 }
.ct-g  { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start }
.ct-info h3 { font-family:var(--fh); font-size:1.5rem; font-weight:800; margin-bottom:1rem; margin-top:1.5rem }
.ct-info p  { color:var(--muted); line-height:1.75; margin-bottom:2rem; font-size:.93rem }
.ct-det  { display:flex; flex-direction:column; gap:1.2rem }
.ct-item { display:flex; gap:1rem; align-items:flex-start }
.ct-ico  { width:44px; height:44px; border-radius:10px; background:rgba(0,212,170,.08); border:1px solid rgba(0,212,170,.18); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; transition:all .3s }
.ct-item:hover .ct-ico { background:linear-gradient(135deg,rgba(0,212,170,.2),rgba(0,184,245,.15)) }
.ct-il { font-size:.72rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px }
.ct-iv { font-size:.88rem; font-weight:500 }
.ct-soc { display:flex; gap:.7rem; margin-top:2rem }
.soc-b  { width:40px; height:40px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; transition:all .3s; color:var(--muted) }
.soc-b:hover { transform:translateY(-3px) }
.soc-b.li:hover  { background:#0A66C2; border-color:#0A66C2; color:#fff }
.soc-b.tw:hover  { background:#000;    border-color:#000;    color:#fff }
.soc-b.fb:hover  { background:#1877F2; border-color:#1877F2; color:#fff }
.soc-b.ig:hover  { background:linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045); border-color:transparent; color:#fff }
.soc-b.wa:hover  { background:#25D366; border-color:#25D366; color:#fff }
.soc-b.yt:hover  { background:#FF0000; border-color:#FF0000; color:#fff }
.ct-form { background:var(--navy-2); border:1px solid var(--border); border-radius:20px; padding:2.5rem }
.fr  { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.fg  { margin-bottom:1.2rem }
.fg label { display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:.45rem; letter-spacing:.06em; text-transform:uppercase }
.fg input,.fg select,.fg textarea { width:100%; padding:.82rem 1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:var(--white); font-family:var(--fb); font-size:.88rem; outline:none; transition:border-color .3s,box-shadow .3s }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,212,170,.08) }
.fg textarea { resize:vertical; min-height:130px }
.fg select option { background:var(--navy-2) }
.form-sub { width:100%; padding:1rem; background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark); font-weight:800; font-size:.9rem; border:none; border-radius:10px; cursor:pointer; font-family:var(--fb); letter-spacing:.06em; text-transform:uppercase; transition:all .3s; box-shadow:0 0 25px rgba(0,212,170,.2) }
.form-sub:hover { transform:translateY(-2px); box-shadow:0 0 45px rgba(0,212,170,.4) }

/* ── SOCIAL MEDIA SECTION ────────────────────────── */
#social-feed { background:var(--dark); padding:4rem 5% }
.social-links-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem }
.social-card { display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:1.8rem 1rem; border:1px solid var(--border); border-radius:var(--radius); transition:all .4s; cursor:pointer; text-decoration:none; color:var(--white); background:var(--card) }
.social-card:hover { transform:translateY(-7px); box-shadow:var(--shadow) }
.social-card.li:hover { border-color:#0A66C2; box-shadow:0 20px 50px rgba(10,102,194,.25) }
.social-card.fb:hover { border-color:#1877F2; box-shadow:0 20px 50px rgba(24,119,242,.25) }
.social-card.ig:hover { border-color:#FD1D1D; box-shadow:0 20px 50px rgba(253,29,29,.2) }
.social-card.wa:hover { border-color:#25D366; box-shadow:0 20px 50px rgba(37,211,102,.2) }
.social-card.yt:hover { border-color:#FF0000; box-shadow:0 20px 50px rgba(255,0,0,.2) }
.social-card.tw:hover { border-color:#555;    box-shadow:0 20px 50px rgba(0,0,0,.4) }
.sc-ico  { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; transition:transform .35s }
.social-card:hover .sc-ico { transform:scale(1.12) }
.sc-ico.li-c { background:rgba(10,102,194,.15) }
.sc-ico.fb-c { background:rgba(24,119,242,.15) }
.sc-ico.ig-c { background:rgba(253,29,29,.1) }
.sc-ico.wa-c { background:rgba(37,211,102,.12) }
.sc-ico.yt-c { background:rgba(255,0,0,.12) }
.sc-ico.tw-c { background:rgba(255,255,255,.06) }
.sc-name { font-family:var(--fh); font-size:.9rem; font-weight:700 }
.sc-handle { font-size:.75rem; color:var(--muted) }
.sc-cta   { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-top:.2rem }

/* ── WHATSAPP FLOAT ──────────────────────────────── */
#wa-float { position:fixed !important; bottom:6.2rem; right:2rem; z-index:9920; display:flex !important; flex-direction:column; align-items:center; gap:.3rem; transition:right .35s ease, bottom .35s ease, opacity .35s ease, transform .35s ease }
/* When chatbot is open, slide WA button to the left to avoid covering send button */
#wa-float.chat-active { right:5.6rem }
#wa-float.chat-active .wa-btn { animation:none; box-shadow:0 4px 14px rgba(37,211,102,.3) }
/* Completely hidden when chatbot is open */
#wa-float.chat-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.7) translateY(12px) !important;
  visibility: hidden !important;
}
.wa-btn   { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#25D366,#128C7E); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.35rem; box-shadow:0 6px 22px rgba(37,211,102,.45); transition:all .3s; animation:waBounce 3.5s ease-in-out infinite }
.wa-btn:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(37,211,102,.6) }
.wa-label { font-size:.55rem; font-weight:700; letter-spacing:.05em; color:#25D366; text-transform:uppercase; background:rgba(2,11,24,.9); padding:.1rem .4rem; border-radius:50px; border:1px solid rgba(37,211,102,.22); white-space:nowrap }

/* ── WHATSAPP MODAL ──────────────────────────────── */
#wa-modal { position:fixed; inset:0; z-index:9950; display:none; align-items:center; justify-content:center; padding:1rem }
#wa-modal.open { display:flex }
.wa-backdrop { position:absolute; inset:0; background:rgba(2,11,24,.9); backdrop-filter:blur(16px); animation:overlayIn .3s ease }
.wa-box  { position:relative; z-index:1; background:var(--navy-2); border:1px solid rgba(37,211,102,.3); border-radius:24px; padding:2.5rem; max-width:440px; width:100%; box-shadow:0 40px 100px rgba(0,0,0,.8); animation:modalIn .4s ease }
.wa-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.8rem }
.wa-logo  { width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#25D366,#128C7E); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0 }
.wa-title { font-family:var(--fh); font-size:1.3rem; font-weight:800 }
.wa-sub   { font-size:.8rem; color:var(--muted); margin-top:2px }
.wa-close { position:absolute; top:1.2rem; right:1.2rem; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--white); cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all .3s }
.wa-close:hover { background:rgba(255,255,255,.12) }
.wa-qr-wrap { display:flex; justify-content:center; margin-bottom:1.5rem }
.qr-frame  { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10px; background:#fff; border-radius:14px; border:3px solid rgba(37,211,102,.35); box-shadow:0 0 24px rgba(37,211,102,.2); min-width:180px; min-height:180px }
#wa-qr-img { display:block; border-radius:6px; opacity:0; transition:opacity .4s }
#wa-qr-img.loaded { opacity:1 }
.qr-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; border-radius:11px }
.qr-loading.hidden { display:none }
.qr-spinner { width:28px; height:28px; border:3px solid rgba(37,211,102,.2); border-top-color:#25D366; border-radius:50%; animation:spin .8s linear infinite }
.qr-loading span { font-size:.72rem; color:#25D366; font-weight:600; letter-spacing:.05em }
@keyframes spin { to { transform:rotate(360deg) } }
.qr-fallback { display:none; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; width:180px; height:180px; background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(18,140,126,.08)); border-radius:12px; text-align:center; padding:1rem }
.qr-fallback .qf-ico { font-size:2.5rem }
.qr-fallback .qf-txt { font-size:.72rem; color:#25D366; font-weight:700; line-height:1.4 }
.qr-fallback .qf-num { font-size:.68rem; color:#7A90B5; margin-top:.2rem }
.wa-divider { text-align:center; color:var(--muted); font-size:.78rem; margin:.8rem 0; position:relative }
.wa-divider::before,.wa-divider::after { content:''; position:absolute; top:50%; width:38%; height:1px; background:var(--border) }
.wa-divider::before { left:0 }
.wa-divider::after  { right:0 }
.wa-num   { display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:1.4rem }
.wa-num-badge { display:flex; align-items:center; gap:.5rem; background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.25); border-radius:50px; padding:.5rem 1.2rem; font-family:var(--fh); font-weight:700; font-size:1rem }
.wa-direct { width:100%; padding:.9rem; background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; font-weight:800; font-size:.9rem; border:none; border-radius:12px; cursor:pointer; font-family:var(--fb); letter-spacing:.04em; display:flex; align-items:center; justify-content:center; gap:.6rem; transition:all .3s }
.wa-direct:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.4) }
.wa-msg-preview { background:rgba(37,211,102,.06); border:1px solid rgba(37,211,102,.18); border-radius:10px; padding:.8rem 1rem; font-size:.8rem; color:var(--muted); line-height:1.55; margin-bottom:1.2rem }
.wa-msg-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#25D366; margin-bottom:.4rem }

/* ── BACK TO TOP ─────────────────────────────────── */
#btt { position:fixed; bottom:2rem; right:5.5rem; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:var(--dark); font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; z-index:999; opacity:0; transform:translateY(20px); transition:all .3s; box-shadow:0 0 20px rgba(0,212,170,.3) }
#btt.show { opacity:1; transform:translateY(0) }
#btt:hover { transform:translateY(-3px); box-shadow:0 0 30px rgba(0,212,170,.5) }

/* ── FOOTER ──────────────────────────────────────── */
footer { background:#010812; border-top:1px solid var(--border); padding:4rem 5% 2rem }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.ft-brand p { color:var(--muted); font-size:.85rem; line-height:1.75; max-width:280px; margin-top:1rem }
.ft-mini { font-size:.78rem; color:var(--muted) }
.fc-col h4 { font-family:var(--fh); font-size:.88rem; font-weight:700; margin-bottom:1.2rem; letter-spacing:.04em }
.fc-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem }
.fc-col ul a { color:var(--muted); font-size:.83rem; transition:color .3s; display:flex; align-items:center; gap:6px }
.fc-col ul a:hover { color:var(--teal) }
.fc-col ul a::before { content:'→'; font-size:.7rem; opacity:0; transform:translateX(-6px); transition:all .3s }
.fc-col ul a:hover::before { opacity:1; transform:translateX(0) }
.ft-social { display:flex; gap:.6rem; margin-top:1.2rem }
.ft-soc-b { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; transition:all .3s; color:var(--muted) }
.ft-soc-b:hover { transform:translateY(-2px); color:#fff }
.ft-soc-b.li:hover { background:#0A66C2; border-color:#0A66C2 }
.ft-soc-b.fb:hover { background:#1877F2; border-color:#1877F2 }
.ft-soc-b.ig:hover { background:linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045); border-color:transparent }
.ft-soc-b.wa:hover { background:#25D366; border-color:#25D366 }
.ft-soc-b.yt:hover { background:#FF0000; border-color:#FF0000 }
.footer-bot { border-top:1px solid var(--border); padding-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.f-copy { color:var(--muted); font-size:.78rem }
.f-copy span { color:var(--teal) }
.f-links { display:flex; gap:1.5rem }
.f-links a { color:var(--muted); font-size:.78rem; transition:color .3s }
.f-links a:hover { color:var(--teal) }

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1024px){
  .about-g,.ct-g { grid-template-columns:1fr }
  .why-g         { grid-template-columns:1fr }
  .footer-top    { grid-template-columns:1fr 1fr }
  .stats-g       { grid-template-columns:repeat(2,1fr); gap:.8rem }
  .stat-i:nth-child(2){ border-right:none }
  .stat-i:nth-child(3),
  .stat-i:nth-child(4) { border-top:1px solid var(--border) }
  .why-photo-wrap{ height:280px }
  .about-g { gap:3rem }
}
@media(max-width:768px){
  .nav-ul  { display:none }
  .hamburger{ display:flex }
  .testi-c { flex:0 0 90% }
  .fr      { grid-template-columns:1fr }
  .vals-g  { grid-template-columns:1fr }
  .footer-top { grid-template-columns:1fr }
  .process-steps::before { display:none }
  .stats-g { grid-template-columns:1fr 1fr; gap:.5rem }
  #stats    { padding:1.2rem 4%; overflow:hidden }
  .stat-i   { padding:.5rem .3rem; border-right:1px solid var(--border) }
  .stat-i:nth-child(2),
  .stat-i:last-child { border-right:none }
  .stat-i:nth-child(3),
  .stat-i:nth-child(4) { border-top:1px solid var(--border) }
  section  { padding:4.5rem 5% }
  .showcase-imgs { height:230px }
  .hero-showcase { margin:0 auto }
  .contact-strip { height:auto; min-height:70px }
  .contact-strip-overlay { gap:.8rem; padding:.7rem 1rem; justify-content:flex-start; flex-wrap:wrap }
  .cs-divider { display:none }
  .testi-banner-overlay { gap:1rem }
  .tb-stat { min-width:80px }
  .why-photo-wrap { height:220px }
  .yt-g { grid-template-columns:1fr }
  .social-links-g { grid-template-columns:repeat(3,1fr) }
  #wa-float { bottom:5.8rem; right:.9rem }
  #wa-float.chat-active { right:4.8rem }
}
@media(max-width:480px){
  .social-links-g { grid-template-columns:repeat(2,1fr) }
  .testi-banner-overlay { gap:.7rem }
}

/* ══════════════════════════════════════════════════════
   THEME BAR — left-side hover, horizontal circles
   ══════════════════════════════════════════════════════ */

#theme-bar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9800;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ── The visible tab on the left edge ── */
#theme-tab {
  width: 24px;
  padding: 1rem 0;
  background: linear-gradient(180deg, var(--teal), var(--teal-2));
  border-radius: 0 10px 10px 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 3px 0 16px rgba(0,212,170,.35);
  transition: width .3s ease;
  writing-mode: vertical-rl;
  font-size: .58rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dark);
  user-select: none;
}
#theme-bar:hover #theme-tab { width: 28px; }

/* ── Hidden circles strip ── */
#theme-circles {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  padding: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  background: rgba(8,18,36,.96);
  border: 1px solid rgba(0,212,170,.2);
  border-left: none;
  border-radius: 0 14px 14px 0;
  backdrop-filter: blur(20px);
  box-shadow: 6px 0 30px rgba(0,0,0,.5);
  transition: max-width .42s cubic-bezier(.4,0,.2,1),
              opacity .32s ease,
              padding .35s ease;
  white-space: nowrap;
}
#theme-bar:hover #theme-circles {
  max-width: 300px;
  opacity: 1;
  padding: .75rem .9rem;
}

/* ── Each colour circle ── */
.tc-dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  border: 2.5px solid transparent;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
}
.tc-dot:hover { transform: scale(1.22); }
.tc-dot.active {
  border-color: var(--teal);
  box-shadow: 0 0 14px rgba(0,212,170,.6);
  transform: scale(1.12);
}

/* ── Tooltip on each dot ── */
.tc-dot::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.92);
  color: #fff; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; padding: .3rem .65rem;
  border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.tc-dot:hover::after { opacity: 1; }

/* ── Light theme bar bg ── */
[data-theme="white"] #theme-circles,
[data-theme="sky"]   #theme-circles,
[data-theme="cream"] #theme-circles {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,150,120,.2);
  box-shadow: 6px 0 30px rgba(0,0,0,.15);
}

/* ── Mobile: make tab smaller ── */
@media(max-width:768px){
  #theme-tab { padding: .7rem 0; font-size:.5rem; }
  .tc-dot { width: 28px; height: 28px; }
}



/* ══════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Targets elements with hardcoded dark colours
   ══════════════════════════════════════════════════════ */

/* Apply to all 3 light themes at once */
[data-theme="white"],
[data-theme="sky"],
[data-theme="cream"] {

  /* ── Text that was white on dark ── */
  color: var(--text);
}

/* Section titles */
[data-theme="white"] .s-title,
[data-theme="sky"]   .s-title,
[data-theme="cream"] .s-title { color: var(--text) }

/* About / Why headings */
[data-theme="white"] .about-ht,
[data-theme="sky"]   .about-ht,
[data-theme="cream"] .about-ht { color: var(--text) }

/* Why feature cards */
[data-theme="white"] .why-ft,
[data-theme="sky"]   .why-ft,
[data-theme="cream"] .why-ft { color: var(--text) }

/* Why feature description */
[data-theme="white"] .why-fd,
[data-theme="sky"]   .why-fd,
[data-theme="cream"] .why-fd { color: var(--muted) }

/* Stat numbers */
[data-theme="white"] .stat-n,
[data-theme="sky"]   .stat-n,
[data-theme="cream"] .stat-n { -webkit-text-fill-color: transparent }

/* Stat labels */
[data-theme="white"] .stat-l,
[data-theme="sky"]   .stat-l,
[data-theme="cream"] .stat-l { color: var(--muted) }

/* Footer text */
[data-theme="white"] footer,
[data-theme="sky"]   footer,
[data-theme="cream"] footer {
  background: var(--navy);
  border-top: 1px solid var(--border);
}
[data-theme="white"] .fc-col h4,
[data-theme="sky"]   .fc-col h4,
[data-theme="cream"] .fc-col h4 { color: var(--text) }

/* Process steps */
[data-theme="white"] .step-num,
[data-theme="sky"]   .step-num,
[data-theme="cream"] .step-num { color: var(--teal) }

[data-theme="white"] .step-t,
[data-theme="sky"]   .step-t,
[data-theme="cream"] .step-t { color: var(--text) }

/* Portfolio cards */
[data-theme="white"] .pf-t,
[data-theme="sky"]   .pf-t,
[data-theme="cream"] .pf-t { color: var(--text) }

/* Section descriptions */
[data-theme="white"] .s-desc,
[data-theme="sky"]   .s-desc,
[data-theme="cream"] .s-desc { color: var(--muted) }

/* About paragraphs */
[data-theme="white"] .about-p,
[data-theme="sky"]   .about-p,
[data-theme="cream"] .about-p { color: var(--muted) }

/* Contact section */
[data-theme="white"] .ct-info h3,
[data-theme="sky"]   .ct-info h3,
[data-theme="cream"] .ct-info h3 { color: var(--text) }

[data-theme="white"] .ct-info p,
[data-theme="sky"]   .ct-info p,
[data-theme="cream"] .ct-info p { color: var(--muted) }

/* Form inputs */
[data-theme="white"] .ct-form input,
[data-theme="white"] .ct-form select,
[data-theme="white"] .ct-form textarea,
[data-theme="sky"]   .ct-form input,
[data-theme="sky"]   .ct-form select,
[data-theme="sky"]   .ct-form textarea,
[data-theme="cream"] .ct-form input,
[data-theme="cream"] .ct-form select,
[data-theme="cream"] .ct-form textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-bd) !important;
  color: var(--text) !important;
}

[data-theme="white"] .ct-form label,
[data-theme="sky"]   .ct-form label,
[data-theme="cream"] .ct-form label { color: var(--text) }

/* Val items in About */
[data-theme="white"] .val-t,
[data-theme="sky"]   .val-t,
[data-theme="cream"] .val-t { color: var(--text) }

/* Typewriter text */
[data-theme="white"] .tw,
[data-theme="sky"]   .tw,
[data-theme="cream"] .tw { color: var(--text) }

/* Testimonial text */
[data-theme="white"] .testi-txt,
[data-theme="sky"]   .testi-txt,
[data-theme="cream"] .testi-txt { color: var(--text) }

[data-theme="white"] .auth-n,
[data-theme="sky"]   .auth-n,
[data-theme="cream"] .auth-n { color: var(--text) }

/* Theme panel itself in light mode */
[data-theme="white"] #theme-panel,
[data-theme="sky"]   #theme-panel,
[data-theme="cream"] #theme-panel {
  background: rgba(255,255,255,.98);
  border-color: var(--border);
}

[data-theme="white"] .tp-name,
[data-theme="sky"]   .tp-name,
[data-theme="cream"] .tp-name { color: var(--text) }

[data-theme="white"] .tp-head,
[data-theme="sky"]   .tp-head,
[data-theme="cream"] .tp-head { color: var(--teal) }

[data-theme="white"] .tp-item:hover,
[data-theme="sky"]   .tp-item:hover,
[data-theme="cream"] .tp-item:hover { background: rgba(0,180,150,.08) }

/* Hero scroll indicator */
[data-theme="white"] .hero-scroll,
[data-theme="sky"]   .hero-scroll,
[data-theme="cream"] .hero-scroll { color: var(--muted) }

/* GL divider lines — lighter on light themes */
[data-theme="white"] .gl-line,
[data-theme="sky"]   .gl-line,
[data-theme="cream"] .gl-line { background: linear-gradient(90deg,transparent,var(--border),transparent) }