/* =============================================
   WEB LAUNCH CO — style.css (v4 · fixed)
   ============================================= */

/* ── TOKENS ─────────────────────────────────── */
:root{
  --bg:#06090f;
  --s1:#0d1117;
  --s2:#111827;
  --s3:#1a2236;
  --border:rgba(255,255,255,0.07);
  --accent:#00d4ff;
  --accent2:#7c3aed;
  --gold:#f59e0b;
  --text:#e8eaf0;
  --muted:#8892a4;
  --grad:linear-gradient(135deg,#00d4ff,#7c3aed);
  --shadow:0 24px 64px rgba(0,0,0,0.55);
  --r:14px;
  --ff-head:'Syne',sans-serif;
  --ff-body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --pink:#ec4899;
  --pink2:#a855f7;
  --pink-glow:rgba(236,72,153,0.45);
  --pink-grad:linear-gradient(135deg,#ec4899,#a855f7);
  --green-check:#22c55e;
  --btn-start-grad:linear-gradient(135deg,#ec4899,#a855f7);
  --btn-start-glow-a:rgba(236,72,153,0.55);
  --btn-start-glow-b:rgba(168,85,247,0.35);
  --nav-bg:rgba(6,9,15,0.92);
  --nav-bg-scrolled:rgba(6,9,15,0.97);
}

/* ── LIGHT MODE TOKENS ───────────────────────── */
body.light-mode{
  --bg:#f0f4ff;
  --s1:#e6ebf8;
  --s2:#dce3f5;
  --s3:#c8d2ea;
  --border:rgba(100,116,200,0.15);
  --text:#0f1523;
  --muted:#4a5578;
  --shadow:0 24px 64px rgba(99,102,241,0.12);
  --nav-bg:rgba(240,244,255,0.93);
  --nav-bg-scrolled:rgba(240,244,255,0.98);
}

/* ── GLOBAL THEME TRANSITION ─────────────────── */
*,*::before,*::after{
  transition-property:background-color,border-color,color,box-shadow,fill,stroke;
  transition-duration:0.35s;
  transition-timing-function:var(--ease);
}

/* ── RESET ───────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  max-width:100%;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:var(--ff-body)}

/* ── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--pink)}

/* ── NOISE ───────────────────────────────────── */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ── UTILITIES ───────────────────────────────── */
.container{max-width:1180px;margin:0 auto;padding:0 20px}

.section-tag{
  display:inline-flex;align-items:center;
  font-family:var(--ff-head);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);
  background:rgba(236,72,153,.08);
  border:1px solid rgba(236,72,153,.25);
  border-radius:100px;padding:5px 14px;margin-bottom:14px;
}
.section-heading{
  font-family:var(--ff-head);
  font-size:clamp(1.6rem,3.5vw,2.9rem);
  font-weight:800;line-height:1.18;
  color:var(--text);margin-bottom:14px;
}
.section-heading br{display:block}
.gradient-text{
  background: linear-gradient(90deg, #ff9de2, #ec4899, #a855f7, #818cf8, #38bdf8, #a855f7, #ff72d2, #ff9de2);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s linear infinite;
  display: inline-block;
  padding-top: 2px;
}
@keyframes shimmer { to { background-position: 300% center; } }
.section-body{font-size:1rem;color:var(--muted);line-height:1.75;max-width:440px}
.section-subtext{font-size:1rem;color:var(--muted);line-height:1.75;max-width:520px;margin:0 auto}
.section-center-header{text-align:center;margin-bottom:56px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:100px;
  font-family:var(--ff-head);font-weight:700;font-size:.9rem;
  border:none;cursor:pointer;transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--pink-grad);color:#fff;
  box-shadow:0 0 28px var(--pink-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(236,72,153,.6)}
.btn-outline{
  background:transparent;color:var(--text);
  border:1.5px solid var(--border);
}
.btn-outline:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.btn-lg{padding:15px 34px;font-size:1rem}
.full-btn{width:100%;justify-content:center}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(32px) rotateX(8deg);
  transform-origin:top center;
  transition:opacity .65s var(--ease),transform .65s var(--ease);
  backface-visibility:hidden;
  perspective:600px;
}
.reveal.visible{opacity:1;transform:translateY(0) rotateX(0deg)}

/* ── HEADER ─────────────────────────────────── */
#header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;
  background:var(--nav-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;
  /* Stunning gradient underline effect */
  box-shadow:0 0 0 0 transparent;
}
#header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(236,72,153,0.6) 30%,rgba(168,85,247,0.6) 60%,transparent 100%);
  opacity:0;
  transition:opacity 0.4s var(--ease);
}
#header.scrolled{
  background:var(--nav-bg-scrolled);
  border-bottom-color:transparent;
  padding:8px 0;
  box-shadow:0 4px 40px rgba(0,0,0,0.25),0 1px 0 var(--border);
}
#header.scrolled::after{opacity:1;}

/* Stunning nav glow bar on top */
#header::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,#ec4899,#a855f7,#00d4ff,#a855f7,#ec4899);
  background-size:300% 100%;
  animation:navBarShimmer 4s linear infinite;
}
@keyframes navBarShimmer{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* Light mode nav links stronger text */
body.light-mode .nav-links a{color:var(--muted);font-weight:700;}
body.light-mode .nav-links a:hover{color:var(--pink);}
body.light-mode #header{box-shadow:0 2px 20px rgba(100,116,200,0.12);}

/* ── LIGHT MODE SPECIFIC OVERRIDES ───────────── */
body.light-mode .section-heading{color:var(--text);}
body.light-mode .section-body,
body.light-mode .section-subtext,
body.light-mode .hero-sub{color:var(--muted);}
body.light-mode .svc-card{background:var(--s1);border-color:var(--border);}
body.light-mode .svc-card:hover{background:var(--s2);border-color:rgba(236,72,153,0.35);}
body.light-mode .portfolio-section{background:var(--s1);}
body.light-mode .pn-card{background:var(--s1);border-color:var(--border);}
body.light-mode .pn-featured{ padding-top:32px !important;background:linear-gradient(160deg,#f0e6ff 0%,#e8d5ff 100%);}
body.light-mode .pn-addons,body.light-mode .pn-why{background:var(--s1);border-color:var(--border);}
body.light-mode .pn-addon-item{background:var(--s2);}
body.light-mode .about-stat-card{background:var(--s2);border-color:rgba(236,72,153,0.2);}
body.light-mode .about-value-card{background:var(--s1);}
body.light-mode .about-svc-item{background:var(--s2);}
body.light-mode .about-who-card{background:var(--s2);}
body.light-mode .about-who-area-section{background:var(--s1);}
body.light-mode .trust-strip-section{background:var(--bg);}
body.light-mode .trust-item{background:var(--s2);border-color:var(--border);}
body.light-mode .who-card{background:var(--s1);border-color:var(--border);}
body.light-mode .who-card:hover{background:var(--s2);}
body.light-mode .faq-item{background:var(--s1);border-color:var(--border);}
body.light-mode .faq-item.open{background:var(--s2);}
body.light-mode .faq-question{color:var(--text);font-weight:700;}
body.light-mode .faq-answer{color:var(--muted);}
body.light-mode .contact-form-col{background:var(--s1);border-color:var(--border);}
body.light-mode .form-field input,
body.light-mode .form-field select,
body.light-mode .form-field textarea{
  background:var(--s2);border-color:var(--border);color:var(--text);
}
body.light-mode .form-field label{color:var(--muted);font-weight:600;}
body.light-mode .contact-option,
body.light-mode .contact-option-primary{background:var(--s1);border-color:var(--border);}
body.light-mode .co-label{color:var(--muted);}
body.light-mode .co-body span{color:var(--text);}
body.light-mode .chat-panel{background:#ffffff !important;border-color:rgba(236,72,153,0.2) !important;}
body.light-mode .chat-head{background:linear-gradient(135deg,#ec4899,#a855f7) !important;border-color:transparent !important;}
body.light-mode .chat-body{background:#f5f7ff !important;}
body.light-mode .cb.bot .bubble{background:#fff !important;border:1px solid rgba(236,72,153,0.15) !important;color:#0f1523 !important;}
body.light-mode .cb.user .bubble{color:#fff !important;}
body.light-mode .chat-foot{background:#fff !important;border-color:rgba(236,72,153,0.15) !important;}
body.light-mode #chatInput{background:#f0f4ff !important;border-color:rgba(236,72,153,0.2) !important;color:#0f1523 !important;}
body.light-mode #chatInput::placeholder{color:#8892a4 !important;}
body.light-mode .btime{color:#6b7280 !important;}
body.light-mode .ch-info strong{color:#fff !important;}
body.light-mode .ch-info span{color:rgba(255,255,255,0.85) !important;}
body.light-mode .chat-x{color:rgba(255,255,255,0.85) !important;}
body.light-mode .chat-back{color:rgba(255,255,255,0.85) !important;border-color:rgba(255,255,255,0.2) !important;}
body.light-mode .ch-dot{border-color:#fff !important;}
body.light-mode .ch-info strong{color:var(--text);}
body.light-mode .music-toggle{background:rgba(240,244,255,0.92);color:var(--muted);}
body.light-mode .site-footer{background:var(--s1);border-color:var(--border);}
body.light-mode .footer-col h5{color:var(--text);}
body.light-mode .pricing-section-new{background:var(--bg);}
body.light-mode .pn-price{color:var(--text);}
body.light-mode .pn-label{color:var(--pink);}
body.light-mode .about-stat-num{color:var(--text);}
body.light-mode .about-stat-label{color:var(--muted);}
body.light-mode .about-value-card h4{color:var(--text);}
body.light-mode .about-value-card p{color:var(--muted);}
body.light-mode .svc-card h3{color:var(--text);}
body.light-mode .svc-card p{color:var(--muted);}
body.light-mode .svc-list li{color:var(--muted);}
body.light-mode .browser-frame{background:var(--s2);border-color:var(--border);}
body.light-mode .browser-topbar{background:var(--s3);}
body.light-mode .browser-url{background:var(--bg);color:var(--muted);}
body.light-mode .mock-nav-bar,body.light-mode .mock-col-card,body.light-mode .mock-score-wrap{filter:invert(1) hue-rotate(180deg) brightness(0.8);}
body.light-mode .hero-title{color:var(--text);;color:#fff;text-shadow:0 2px 32px rgba(168,85,247,0.25);}
body.light-mode .hero-title em {
  background: linear-gradient(110deg,#fbbf24 0%,#f59e0b 30%,#fde68a 55%,#f59e0b 75%,#fbbf24 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
body.light-mode .btn-outline{color:var(--text);border-color:var(--border);}
body.light-mode .btn-outline:hover{color:var(--pink);}
body.light-mode .hamburger span{background:var(--text);}
body.light-mode .nav-links{background:rgba(240,244,255,0.99);}
body.light-mode .scroll-hint span{color:var(--muted);}
body.light-mode .pn-features li{color:var(--muted);}
body.light-mode .pn-why-item{color:var(--muted);}
body.light-mode .pn-addons-title{color:var(--text);}
body.light-mode .pn-why-title{color:var(--text);}
body.light-mode .pn-bottom-cta p{color:var(--text);}
body.light-mode .pn-addon-item span:nth-child(2){color:var(--text);}
body.light-mode .about-who-card > p{color:var(--muted);}
body.light-mode .about-who-list li{color:var(--muted);}
body.light-mode .page-hero { background: linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important; border-bottom: 1px solid rgba(236,72,153,.14) !important; }
body.light-mode .svc-detail-card{background:var(--s1);border-color:var(--border);}
body.light-mode .port-detail-card,body.light-mode .port-detail-card--reverse{border-color:var(--border);}
body.light-mode .port-detail-info h3{color:var(--text);}
body.light-mode .port-detail-info p{color:var(--muted);}
body.light-mode .cta-banner{background:linear-gradient(135deg,#e8d5ff 0%,#fce7f3 100%);}
body.light-mode .cta-heading{color:#0f1523;}
body.light-mode .cta-sub{color:#4a5578;}
body.light-mode .trust-item span:last-child{color:var(--text);font-weight:600;}
body.light-mode .who-card h3{color:var(--text);}
body.light-mode .who-card p{color:var(--muted);}
body.light-mode #siteLoader{background:var(--bg);}
body.light-mode .loader-logo{color:var(--pink);}
body.light-mode .section-tag{background:rgba(236,72,153,0.10);border-color:rgba(236,72,153,0.3);}
body.light-mode .footer-bottom p{color:var(--muted);}
body.light-mode .footer-brand-col p{color:var(--muted);}
body.light-mode .port-mock{opacity:0.85;}
body.light-mode .hero-badge{background:rgba(236,72,153,0.08);border-color:rgba(236,72,153,0.25);}
body.light-mode .scroll-track{background:linear-gradient(to bottom,var(--pink),transparent);}
body.light-mode .services-section{background:var(--bg);}
body.light-mode .contact-section{background:var(--bg);}
body.light-mode .who-section{background:var(--bg);}
body.light-mode .trust-strip-section{background:var(--s1);}
body.light-mode .faq-section{background:var(--bg);}

.nav-container{
  max-width:1180px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.logo{display:flex;align-items:center;gap:10px;border:none;outline:none;text-decoration:none;flex-shrink:0}
.header-logo-img{
  height:80px;width:auto;object-fit:cover;
  object-position:left center;max-width:360px;
  border:none;outline:none;box-shadow:none;
}
.footer-logo-img{
  height:80px;width:auto;object-fit:contain;
  object-position:left center;max-width:220px;
}

.nav-links{
  display:flex;align-items:center;gap:20px;
  list-style:none;margin:0;padding:0;
}
.nav-links li{display:inline-flex;align-items:center}
.nav-links a{
  font-family:var(--ff-head);font-weight:600;font-size:.85rem;
  color:var(--muted);transition:color .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--text)}
.nav-cta-btn{
  background:rgba(236,72,153,.1) !important;
  border:1px solid rgba(236,72,153,.3) !important;
  color:var(--pink) !important;
  padding:7px 18px;border-radius:100px;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  transition:background .2s,color .2s !important;
}
.nav-cta-btn:hover{background:var(--pink-grad) !important;color:#fff !important;border-color:transparent !important}

.nav-start-btn{
  display:inline-block;
  padding:10px 18px !important;
  background:var(--pink-grad) !important;
  color:#fff !important;
  font-family:var(--ff-head);
  font-weight:800 !important;
  font-size:0.78rem !important;
  letter-spacing:0.04em;
  border-radius:12px;
  box-shadow:0 0 18px var(--btn-start-glow-a),0 4px 16px var(--btn-start-glow-b);
  transition:transform 0.2s var(--ease),box-shadow 0.2s !important;
  white-space:normal;
  text-transform:uppercase;
  animation:navBtnPulsePink 2.5s ease-in-out infinite;
}
.nav-start-btn:hover{
  transform:translateY(-2px) scale(1.04) !important;
  box-shadow:0 0 30px var(--btn-start-glow-a),0 8px 24px var(--btn-start-glow-b) !important;
  color:#fff !important;
  animation:none;
}
@keyframes navBtnPulsePink{
  0%,100%{box-shadow:0 0 18px var(--btn-start-glow-a),0 4px 16px var(--btn-start-glow-b)}
  50%{box-shadow:0 0 32px rgba(236,72,153,.75),0 6px 22px rgba(168,85,247,.55)}
}

.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
  z-index:1003;position:relative;flex-shrink:0;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--text);border-radius:2px;
  transition:all .3s var(--ease);
}

/* ── HERO ────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:120px 0 80px;
  overflow:hidden;
  background:linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important;
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(236,72,153,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,72,153,.025) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:radial-gradient(ellipse 75% 55% at 50% 50%,black,transparent);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb-1{width:480px;height:480px;background:rgba(236,72,153,.07);top:-80px;right:-80px}
.orb-2{width:360px;height:360px;background:rgba(168,85,247,.07);bottom:-60px;left:-60px}
.orb-3{width:280px;height:280px;background:rgba(245,158,11,.04);top:50%;left:42%;transform:translate(-50%,-50%)}
.orb-1{animation:orbFloat1 8s ease-in-out infinite}
.orb-2{animation:orbFloat2 10s ease-in-out infinite}
.orb-3{animation:orbFloat3 12s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,25px) scale(1.08)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-20px) scale(1.05)}}
@keyframes orbFloat3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-55%,-45%) scale(1.12)}}

.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:56px;
  max-width:1180px;margin:0 auto;padding:0 20px;
  width:100%;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(236,72,153,.06);
  border:1px solid rgba(236,72,153,.2);
  border-radius:100px;padding:5px 14px 5px 10px;
  font-family:var(--ff-head);font-size:.78rem;font-weight:600;
  color:var(--pink);margin-bottom:22px;
  animation:fadeDown .6s both;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 8px var(--pink);
  animation:pulse 2s infinite;position:relative;
}
.live-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--pink);animation:ripple 2s infinite;opacity:0;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes ripple{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.2);opacity:0}}

.hero-title{
  font-family:var(--ff-head);
  font-size:clamp(2rem,4.5vw,3.8rem);
  font-weight:800;line-height:1.12;
  margin-bottom:18px;
  animation:fadeUp .7s .1s both;
}
.hero-title em{
  font-style:italic;
  background: linear-gradient(110deg,#fbbf24 0%,#f59e0b 30%,#fde68a 55%,#f59e0b 75%,#fbbf24 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 2.5s linear infinite;
  filter: drop-shadow(0 0 14px rgba(251,191,36,0.55)) drop-shadow(0 2px 8px rgba(245,158,11,0.4));
}
@keyframes goldShimmer { to { background-position: 250% center; } }
.typed-word{
  display: inline-block;
  min-width: 200px;
  vertical-align: bottom;
  filter: drop-shadow(0 0 18px rgba(236,72,153,0.55)) drop-shadow(0 0 40px rgba(168,85,247,0.35));
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero-sub{
  font-size:1.05rem;color:var(--muted);
  line-height:1.78;max-width:470px;
  margin-bottom:30px;
  animation:fadeUp .7s .2s both;
}
.hero-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:40px;animation:fadeUp .7s .3s both;
}
.hero-stats{display:flex;align-items:center;gap:24px;animation:fadeUp .7s .4s both;flex-wrap:wrap}

/* hero right: browser */
.hero-visual{
  position:relative;perspective:1000px;
  transform-style:preserve-3d;
  animation:fadeRight .8s .3s both;
}
.browser-frame{
  background:var(--s2);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow),0 0 0 1px rgba(236,72,153,.04),30px 30px 80px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  transform:rotateY(-8deg) rotateX(4deg);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.hero-visual:hover .browser-frame{
  transform:rotateY(0deg) rotateX(0deg);
  box-shadow:var(--shadow),0 0 0 1px rgba(236,72,153,.1),0 0 60px rgba(236,72,153,.12);
}
.browser-topbar{
  background:var(--s3);padding:9px 13px;
  display:flex;align-items:center;gap:6px;
}
.traffic{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.traffic.red{background:#ff5f57}.traffic.yellow{background:#ffbd2e}.traffic.green{background:#28c840}
.browser-url{
  flex:1;background:var(--bg);border-radius:5px;
  padding:3px 10px;font-size:.72rem;color:var(--muted);
  margin-left:8px;font-family:monospace;
}
.browser-body{padding:16px}
.mock-nav-bar{height:9px;background:var(--s3);border-radius:100px;margin-bottom:14px;width:55%}
.mock-banner{margin-bottom:14px}
.mock-line{height:10px;background:linear-gradient(90deg,var(--s3),rgba(236,72,153,.18));border-radius:4px;margin-bottom:7px}
.mock-line.w80{width:80%}.mock-line.w55{width:55%}
.mock-cta-bar{display:flex;gap:8px;margin-top:12px}
.mock-btn-solid{height:22px;width:80px;background:var(--pink-grad);border-radius:100px}
.mock-btn-ghost{height:22px;width:80px;background:transparent;border:1px solid var(--border);border-radius:100px}
.mock-3cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.mock-col-card{height:44px;background:var(--s3);border-radius:7px;border:1px solid var(--border)}
.mock-score-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.score-circle{position:relative;width:56px;height:56px}
.score-circle svg{transform:rotate(-90deg)}
.score-circle span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-head);font-weight:800;font-size:1rem;color:var(--pink);
}
.mock-score-wrap p{font-size:.7rem;color:var(--muted)}
.visual-ring{position:absolute;border-radius:50%;border:1px solid rgba(236,72,153,.06);pointer-events:none}
.ring-1{width:110%;height:110%;top:-5%;left:-5%}
.ring-2{width:125%;height:125%;top:-12.5%;left:-12.5%;border-color:rgba(168,85,247,.05)}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1;
}
.scroll-track{width:1px;height:36px;background:linear-gradient(to bottom,var(--pink),transparent);animation:scrollPulse 2s infinite}
.scroll-hint span{font-size:.68rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
@keyframes scrollPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── SERVICES ────────────────────────────────── */
.services-section{padding:96px 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r);padding:28px;position:relative;
  overflow:hidden;transition:all .25s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pink-grad);opacity:0;transition:opacity .3s}
.svc-card:hover{border-color:rgba(236,72,153,.25);transform:translateY(-4px);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px var(--pink-glow)}
.svc-card:hover::before,.svc-card.svc-featured::before{opacity:1}
.svc-card.svc-featured{background:var(--s2);border-color:rgba(236,72,153,.18)}
.svc-num{font-family:var(--ff-head);font-size:.7rem;font-weight:700;color:var(--muted);letter-spacing:.1em;margin-bottom:14px}
.svc-icon{width:44px;height:44px;border-radius:10px;background:rgba(236,72,153,.1);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--pink);margin-bottom:14px;border:1px solid rgba(236,72,153,.2)}
.svc-card h3{font-family:var(--ff-head);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.svc-card p{font-size:.85rem;color:var(--muted);line-height:1.65;margin-bottom:14px}
.svc-list li{font-size:.8rem;color:var(--muted);padding:3px 0 3px 14px;position:relative}
.svc-list li::before{content:'→';position:absolute;left:0;color:var(--pink);font-size:.78rem}

/* ── PORTFOLIO ───────────────────────────────── */
.portfolio-section{padding:96px 0;background:var(--s1)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:18px}
.port-item{border-radius:var(--r);overflow:hidden}
.port-item.port-tall{grid-row:1/3}
.port-inner{
  position:relative;height:100%;min-height:200px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);transform-style:preserve-3d;will-change:transform;
  box-shadow:0 8px 32px rgba(0,0,0,.4);transition:transform .15s ease,box-shadow .15s ease,border-color .2s;
}
.port-item.port-tall .port-inner{min-height:420px}
.port-mock{width:100%;height:100%;min-height:200px;padding:16px;transition:transform .4s var(--ease)}
.port-item:hover .port-mock{transform:scale(1.05) translateZ(10px)}
.port-inner:hover{box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 48px var(--pink-glow)}
.pm-1{background:linear-gradient(135deg,#0d1117,#1a2236)}
.pm-2{background:linear-gradient(135deg,#0d1117,#111827)}
.pm-3{background:linear-gradient(135deg,#0d1117,#1a1a2e)}
.pm-nav{height:7px;background:var(--s3);border-radius:100px;margin-bottom:16px;width:60%}
.pm-hero-area{padding:10px}
.pm-line{height:9px;background:rgba(236,72,153,.15);border-radius:3px;margin-bottom:7px}
.pm-line.w75{width:75%}.pm-line.w65{width:65%}.pm-line.w50{width:50%}.pm-line.w45{width:45%}
.pm-btn-row{margin-top:10px}.pm-btn{height:22px;width:75px;background:var(--pink-grad);border-radius:100px}
.pm-4grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.pm-gc{height:70px;background:var(--s3);border-radius:7px;border:1px solid var(--border)}
.pm-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;min-height:160px}
.pm-dual{display:flex;gap:8px}
.pm-btn.solid{height:22px;width:72px;background:var(--pink-grad);border-radius:100px}
.pm-btn.ghost{height:22px;width:72px;background:transparent;border:1px solid var(--border);border-radius:100px}
.port-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,5,15,.97) 0%,rgba(20,5,15,.5) 55%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;opacity:0;transition:opacity .3s var(--ease);
}
.port-item:hover .port-overlay{opacity:1}
.port-chip{
  display:inline-block;background:rgba(236,72,153,.14);
  border:1px solid rgba(236,72,153,.3);border-radius:100px;
  padding:3px 11px;font-size:.7rem;font-family:var(--ff-head);font-weight:600;
  color:#f9a8d4;margin-bottom:7px;width:fit-content;
}
.port-overlay h4{font-family:var(--ff-head);font-weight:700;font-size:1rem;margin-bottom:3px}
.port-overlay p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.link-arrow{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff-head);font-weight:600;font-size:.8rem;
  color:var(--pink);transition:gap .2s;
}
.link-arrow:hover{gap:9px}

/* ── TRUST STRIP ─────────────────────────────── */
.trust-strip-section{padding:64px 0;background:var(--s1);border-top:1px solid rgba(236,72,153,.06);border-bottom:1px solid rgba(236,72,153,.06)}
.trust-strip-header{text-align:center;margin-bottom:36px}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.trust-item{
  display:flex;align-items:center;gap:10px;
  background:var(--s2);border:1px solid var(--border);
  border-radius:100px;padding:10px 20px;
  font-family:var(--ff-head);font-weight:600;font-size:.82rem;
  color:var(--text);transition:border-color .2s,transform .2s;
}
.trust-item:hover{border-color:rgba(236,72,153,.35);transform:translateY(-2px)}
.trust-check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--pink-grad);display:flex;align-items:center;justify-content:center;
  font-size:.62rem;color:#fff;
}

/* ── FAQ ─────────────────────────────────────── */
.faq-section{padding:96px 0;background:var(--bg);border-top:1px solid rgba(236,72,153,.06)}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .25s}
.faq-item:hover{border-color:rgba(236,72,153,.2)}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--text);transition:color .2s;
}
.faq-question:hover{color:var(--pink)}
.faq-icon{
  width:28px;height:28px;border-radius:7px;
  background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--pink);font-size:.72rem;flex-shrink:0;
  transition:transform .3s var(--ease),background .2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(236,72,153,.18)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s;padding:0 24px}
.faq-item.open .faq-answer{max-height:300px;padding:0 24px 20px}
.faq-answer p{font-size:.9rem;color:var(--muted);line-height:1.78;padding-top:4px}

/* ── CTA BANNER ──────────────────────────────── */
.cta-banner-section{padding:72px 0;background:var(--s1);border-top:1px solid rgba(236,72,153,.06)}
.cta-banner{
  background:var(--s2);border:1px solid rgba(236,72,153,.2);
  border-radius:20px;padding:52px 48px;
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-glow{
  position:absolute;width:500px;height:300px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(236,72,153,.07),transparent 65%);
  top:-80px;left:-80px;pointer-events:none;
}
.cta-content{flex:1;min-width:260px;position:relative;z-index:1}
.cta-heading{
  font-family:var(--ff-head);font-size:clamp(1.3rem,2.8vw,2rem);
  font-weight:800;color:var(--text);margin-bottom:10px;line-height:1.2;
}
.cta-sub{font-size:.92rem;color:var(--muted);line-height:1.75;max-width:460px}
.cta-main-btn{flex-shrink:0;position:relative;z-index:1}

/* ── CONTACT ─────────────────────────────────── */
.contact-section{padding:96px 0}
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.contact-intro{font-size:.97rem;color:var(--muted);line-height:1.78;margin-bottom:24px}
.map-wrap{margin-top:4px}
.map-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);font-family:var(--ff-head);font-weight:600;margin-top:8px}
.map-label i{color:var(--pink)}
.contact-form-col{background:var(--s2);border:1px solid var(--border);border-radius:18px;padding:32px}
.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-family:var(--ff-head);font-weight:600;font-size:.8rem;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{
  background:var(--s3);border:1px solid var(--border);
  border-radius:9px;padding:11px 14px;
  color:var(--text);font-family:var(--ff-body);font-size:.9rem;
  outline:none;resize:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--pink);box-shadow:0 0 0 3px rgba(236,72,153,.12);
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--muted);opacity:.6}
.form-field select option{background:var(--s2);color:var(--text)}
.submit-btn{margin-top:4px;border:none}
.form-ok{
  display:none;align-items:center;gap:9px;
  background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.28);
  border-radius:9px;padding:12px 18px;
  font-family:var(--ff-head);font-weight:600;font-size:.87rem;color:var(--pink);
}
.contact-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:860px;margin:0 auto}
.contact-option-card{
  display:flex;align-items:center;gap:16px;
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r);padding:20px 24px;
  transition:all .25s var(--ease);text-decoration:none;color:var(--text);
}
.contact-option-card:hover{border-color:rgba(236,72,153,.35);transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.3),0 0 20px rgba(236,72,153,.1)}
.contact-option-primary{grid-column:1/3;background:var(--s2);border-color:rgba(236,72,153,.25)}
.co-icon{width:46px;height:46px;border-radius:11px;flex-shrink:0;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.22);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--pink)}
.co-body{flex:1;min-width:0}
.co-body strong{font-family:var(--ff-head);font-weight:700;font-size:.95rem;display:block;margin-bottom:3px}
.co-body span{font-size:.82rem;color:var(--muted);word-break:break-all}
.co-arrow{color:var(--muted);font-size:.8rem;transition:transform .2s;flex-shrink:0}
.contact-option-card:hover .co-arrow{transform:translateX(4px);color:var(--pink)}

/* ── FOOTER ──────────────────────────────────── */
.site-footer{background:var(--s1);border-top:1px solid var(--border);padding:64px 0 28px;position:relative}
.site-footer::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,72,153,.35),rgba(168,85,247,.35),transparent);
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.footer-brand-col .logo{display:inline-flex;margin-bottom:14px}
.footer-brand-col p{font-size:.85rem;color:var(--muted);line-height:1.6;max-width:260px;margin-bottom:18px}
.socials{display:flex;gap:10px}
.socials a{
  width:34px;height:34px;border-radius:8px;
  background:var(--s2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.88rem;transition:all .2s;
}
.socials a:hover{border-color:var(--pink);color:var(--pink)}
.socials a[aria-label="WhatsApp"]:hover{border-color:#25d366;color:#25d366}
.co-icon .fa-whatsapp{color:#25d366}
.footer-col h5{font-family:var(--ff-head);font-weight:700;font-size:.82rem;color:var(--text);margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col ul a{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:7px;transition:color .2s;word-break:break-all}
.footer-col ul a:hover{color:var(--pink)}
.footer-col ul i{width:13px;color:var(--pink);flex-shrink:0}
.footer-bottom{
  border-top:1px solid var(--border);padding:24px 0 32px;
  display:flex;flex-direction:column;align-items:center;
  font-size:.78rem;color:var(--muted);gap:.25rem;text-align:center;
}
.heart{color:#ef4444}
.back-to-top{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--pink-grad);color:#fff;font-size:1rem;
  text-decoration:none;margin-top:1rem;
  box-shadow:0 4px 20px var(--pink-glow);
  transition:transform .25s,box-shadow .25s;
}
.back-to-top:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 8px 30px rgba(236,72,153,.65)}

/* ── "START YOUR PROJECT" BODY BUTTON ──────────  */
.btn-start{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 36px;
  background:linear-gradient(135deg,#ec4899 0%,#a855f7 100%);
  color:#fff !important;
  font-family:var(--ff-head);font-weight:700;font-size:0.92rem;
  letter-spacing:0.1em;border-radius:12px;text-decoration:none;
  border:none;cursor:pointer;
  box-shadow:0 4px 22px rgba(236,72,153,0.4),0 2px 8px rgba(0,0,0,0.18);
  transition:transform 0.22s var(--ease),box-shadow 0.22s,filter 0.22s;
  text-transform:uppercase;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn-start::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 55%);
  pointer-events:none;border-radius:inherit;
}
.btn-start:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 32px rgba(236,72,153,0.6),0 4px 12px rgba(0,0,0,0.2);
  filter:brightness(1.08);color:#fff !important;
}

/* ── PAGE HERO ───────────────────────────────── */
.page-hero{
  position:relative;padding:140px 0 72px;overflow:hidden;
  background:linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important;
  border-bottom:1px solid rgba(236,72,153,.14);
}
.page-hero-inner{text-align:center;position:relative;z-index:1}
.page-hero-title{font-family:var(--ff-head);font-size:clamp(1.8rem,4.5vw,3.4rem);font-weight:800;line-height:1.15;color:var(--text);margin-bottom:16px}
.page-hero-sub{font-size:1.05rem;color:var(--muted);line-height:1.78;max-width:520px;margin:0 auto}

/* ── SERVICES DETAIL ─────────────────────────── */
.services-detail-section{padding:80px 0;background:var(--bg)}
.svc-detail-card{
  display:grid;grid-template-columns:80px 1fr;gap:32px;
  background:var(--s1);border:1px solid var(--border);
  border-radius:20px;padding:40px;margin-bottom:24px;
  transition:border-color .25s var(--ease),box-shadow .25s;
}
.svc-detail-card:hover{border-color:rgba(236,72,153,.25);box-shadow:0 12px 48px rgba(0,0,0,.3),0 0 24px rgba(236,72,153,.08)}
.svc-detail-icon{width:64px;height:64px;border-radius:14px;flex-shrink:0;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.22);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--pink)}
.svc-detail-num{font-family:var(--ff-head);font-size:.7rem;font-weight:700;color:var(--pink);letter-spacing:.12em;margin-bottom:8px}
.svc-detail-body h2{font-family:var(--ff-head);font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:12px}
.svc-detail-body p{font-size:.95rem;color:var(--muted);line-height:1.8;margin-bottom:20px}
.svc-detail-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.svc-detail-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.svc-detail-list i{color:var(--green-check);font-size:.72rem;flex-shrink:0}

/* ── PORTFOLIO DETAIL ────────────────────────── */
.port-detail-section{padding:80px 0;background:var(--bg)}
.port-detail-card{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;margin-bottom:64px;
  padding-bottom:64px;border-bottom:1px solid var(--border);
}
.port-detail-card:last-child{border-bottom:none;margin-bottom:0}
.port-detail-card--reverse{direction:rtl}
.port-detail-card--reverse>*{direction:ltr}
.port-detail-mock{
  border-radius:16px;overflow:hidden;border:1px solid var(--border);min-height:300px;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.port-detail-mock:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 32px var(--pink-glow)}
.port-detail-info .port-chip{margin-bottom:14px}
.port-detail-info h2{font-family:var(--ff-head);font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:14px}
.port-detail-info p{font-size:.95rem;color:var(--muted);line-height:1.8;margin-bottom:20px}
.port-detail-features{display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.port-detail-features li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.port-detail-features i{color:var(--green-check);font-size:.72rem;flex-shrink:0}

.port-github-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:8px 18px;
  font-family:var(--ff-head);font-weight:600;font-size:.82rem;
  color:var(--muted);transition:all .25s;
}
.port-github-link:hover{border-color:var(--pink);color:var(--pink);background:rgba(236,72,153,.07);transform:translateY(-2px)}
.port-github-link i{font-size:.95rem}

/* ── PARTICLES / CANVAS / MISC ───────────────── */
#particleCanvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55}
.mouse-glow{
  position:fixed;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.06) 0%,transparent 65%);
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  transition:opacity .4s;will-change:transform;
}
#scrollProgress{position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--pink-grad);width:0%;transition:width .1s linear;box-shadow:0 0 8px var(--pink-glow)}

/* ── PAGE ROUTING ────────────────────────────── */
.page-section{display:block}
.page-section[hidden]{display:none!important}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.page-section:not([hidden]){animation:pageFadeIn 0.35s var(--ease) both}
.nav-links a.nav-active{color:var(--pink)!important}

/* ── KEYFRAMES ───────────────────────────────── */
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* ── 3D TILT CARDS ──────────────────────────── */
.feat-card,.svc-card,.testi-card,.price-card,.port-inner{transform-style:preserve-3d;will-change:transform}

/* ── CHATBOT ─────────────────────────────────── */
.chatbot-wrap{
  position:fixed;bottom:24px;right:24px;z-index:99999;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;isolation:isolate;
}
.chat-fab{
  width:44px;height:44px;border-radius:50%;
  background:var(--pink-grad);
  border:none;cursor:pointer;display:flex!important;
  align-items:center;justify-content:center;
  font-size:1.05rem;color:#fff;position:relative;flex-shrink:0;
  box-shadow:0 6px 28px var(--pink-glow);
  animation:fabFloat 3s ease-in-out infinite;transition:box-shadow .25s;
}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.chat-fab:hover{animation-play-state:paused;transform:scale(1.12)!important;box-shadow:0 10px 40px rgba(236,72,153,.7)}
.fab-dot{
  position:absolute;top:2px;right:2px;
  width:13px;height:13px;border-radius:50%;
  background:#22c55e;border:2px solid #06090f;
  animation:fabPing 2s infinite;
}
@keyframes fabPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}

.chat-panel{
  position:fixed;bottom:24px;right:88px;width:360px;
  background:#111827;border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 0 1px rgba(236,72,153,.06);
  display:none;flex-direction:column;overflow:hidden;
  max-height:min(580px, calc(100vh - 40px));min-height:0;z-index:99998;
}
.chat-panel.open{display:flex;animation:panelSlide .3s cubic-bezier(.4,0,.2,1) both}
@keyframes panelSlide{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

.chat-head{
  background:#1a2236;border-bottom:1px solid rgba(255,255,255,0.07);
  padding:8px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.chat-back{
  background:none;border:none;cursor:pointer;
  color:#8892a4;
  padding:5px 10px;border-radius:8px;
  transition:color .2s,background .2s;
  flex-shrink:0;
  display:none;
  align-items:center;gap:6px;
  font-family:'Syne',sans-serif;font-weight:600;font-size:.73rem;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
}
.chat-back:hover{color:var(--pink);background:rgba(236,72,153,.1);border-color:rgba(236,72,153,.25)}
.chat-back i{font-size:.75rem}
.ch-avatar-wrap{position:relative;flex-shrink:0}
.ch-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--pink-grad);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.65rem;color:#fff;
}
.ch-dot{position:absolute;bottom:1px;right:1px;width:7px;height:7px;border-radius:50%;background:#22c55e;border:2px solid #1a2236}
.ch-info{flex:1;min-width:0}
.ch-info strong{font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;color:#e8eaf0;display:block}
.ch-info span{font-size:.65rem;color:#8892a4}
.chat-x{background:none;border:none;cursor:pointer;color:#8892a4;font-size:.9rem;padding:5px;border-radius:6px;transition:color .2s,background .2s;flex-shrink:0}
.chat-x:hover{color:#e8eaf0;background:rgba(255,255,255,.06)}

.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#111827}
.chat-body::-webkit-scrollbar{width:3px}
.chat-body::-webkit-scrollbar-thumb{background:#1a2236;border-radius:2px}
.cb{display:flex;flex-direction:column}
.cb.user{align-items:flex-end}
.bubble{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.55}
.cb.bot .bubble{background:#1a2236;border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:4px;color:#e8eaf0}
.cb.user .bubble{background:var(--pink-grad);color:#fff;border-bottom-right-radius:4px}
.btime{font-size:.65rem;color:#8892a4;margin-top:3px;padding:0 3px}
.quick-menu{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.qbtn{
  background:rgba(236,72,153,.07);border:1px solid rgba(236,72,153,.25);
  border-radius:100px;color:#f9a8d4;
  font-family:'Syne',sans-serif;font-weight:600;font-size:.73rem;
  padding:6px 12px;cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .15s;
}
.qbtn:hover{background:rgba(236,72,153,.2);transform:scale(1.04)}
.typing-anim{display:flex;gap:4px;align-items:center;padding:6px 10px}
.typing-anim span{width:5px;height:5px;border-radius:50%;background:#8892a4;animation:ta 1.3s infinite}
.typing-anim span:nth-child(2){animation-delay:.2s}
.typing-anim span:nth-child(3){animation-delay:.4s}
@keyframes ta{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

.chat-foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);background:#1a2236;flex-shrink:0}
#chatInput{
  flex:1;min-width:0;background:#0d1117;border:1px solid rgba(255,255,255,.08);
  border-radius:100px;padding:9px 15px;color:#e8eaf0;
  font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;transition:border-color .2s;
}
#chatInput:focus{border-color:rgba(236,72,153,.4)}
#chatInput::placeholder{color:#8892a4;opacity:.7}
#chatSend{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--pink-grad);
  border:none;cursor:pointer;color:#fff;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px var(--pink-glow);
}
#chatSend:hover{transform:scale(1.12);box-shadow:0 6px 20px rgba(236,72,153,.65)}

/* ══════════════════════════════════════════════
   PRICING SECTION
   ══════════════════════════════════════════════ */
.pricing-section-new{padding:96px 0;background:var(--bg);border-top:1px solid rgba(236,72,153,.06)}
.pn-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:56px;margin-bottom:56px;align-items:stretch}

.pn-card{
  overflow:visible !important;
  background:var(--s1);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:36px 30px 32px;
  display:flex;flex-direction:column;gap:0;
  position:relative;overflow:visible;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.pn-card:hover{transform:translateY(-8px);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 40px rgba(236,72,153,.1);border-color:rgba(236,72,153,.35)}
.pn-featured{
  background:linear-gradient(160deg,#1a1030 0%,#120d22 100%);
  border-color:rgba(236,72,153,.4);
  box-shadow:0 0 0 1px rgba(236,72,153,.15),0 20px 60px rgba(0,0,0,.5);
  transform:scale(1.03);
}
.pn-featured:hover{transform:scale(1.03) translateY(-8px);box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 60px rgba(236,72,153,.25);border-color:rgba(236,72,153,.65)}
.pn-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--pink-grad);color:#fff;
  font-family:var(--ff-head);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 20px;border-radius:100px;white-space:nowrap;
  box-shadow:0 4px 18px rgba(236,72,153,.5);z-index:5;
}
.pn-top{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.07)}
.pn-label{font-family:var(--ff-head);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ec4899;margin-bottom:14px}
.pn-price{font-family:var(--ff-head);font-size:3.2rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:10px;display:flex;align-items:flex-start;gap:2px}
.pn-dollar{font-size:1.6rem;margin-top:6px;color:#ec4899}
.pn-plus{font-size:1.8rem;margin-top:4px;color:var(--muted)}
.pn-pages{display:inline-flex;align-items:center;gap:7px;background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.2);border-radius:100px;padding:4px 13px;font-family:var(--ff-head);font-size:.76rem;font-weight:600;color:#f9a8d4}
.pn-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px;flex:1}
.pn-features li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted);line-height:1.4}
.pn-features i{color:#22c55e;font-size:.85rem;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(34,197,94,.4))}
.pn-cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:100px;font-family:var(--ff-head);font-weight:700;font-size:.88rem;text-decoration:none;border:1.5px solid rgba(236,72,153,.4);color:#f9a8d4;background:rgba(236,72,153,.07);transition:all .25s var(--ease);margin-top:auto}
.pn-cta:hover{background:rgba(236,72,153,.18);border-color:rgba(236,72,153,.7);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(236,72,153,.25)}
.pn-cta-featured{background:var(--pink-grad);border-color:transparent;color:#fff;box-shadow:0 6px 24px rgba(236,72,153,.4)}
.pn-cta-featured:hover{background:linear-gradient(135deg,#f472b6,#c084fc);box-shadow:0 10px 36px rgba(236,72,153,.55);transform:translateY(-3px);border-color:transparent;color:#fff}
.pn-addons{background:var(--s1);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:32px 36px;margin-bottom:40px}
.pn-addons-title{font-family:var(--ff-head);font-weight:800;font-size:1.05rem;color:var(--text);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.pn-addons-title i{color:#ec4899}
.pn-addons-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pn-addon-item{background:var(--s2);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:border-color .2s,transform .2s}
.pn-addon-item:hover{border-color:rgba(236,72,153,.3);transform:translateY(-3px)}
.pn-addon-icon{font-size:1.4rem}
.pn-addon-item span:nth-child(2){font-family:var(--ff-head);font-weight:600;font-size:.82rem;color:var(--text)}
.pn-addon-price{font-family:var(--ff-head);font-weight:700;font-size:.82rem;color:#ec4899}
.pn-why{background:var(--s1);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:32px 36px;margin-bottom:48px}
.pn-why-title{font-family:var(--ff-head);font-weight:800;font-size:1.15rem;color:var(--text);margin-bottom:22px}
.pn-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.pn-why-item{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted)}
.pn-why-item i{color:#22c55e;font-size:.8rem;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(34,197,94,.4))}
.pn-bottom-cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.pn-bottom-cta p{font-family:var(--ff-head);font-size:1.2rem;font-weight:700;color:var(--text)}
.pn-aftersale-row{display:flex;justify-content:center;align-items:center;gap:16px;margin:28px 0 8px;flex-wrap:wrap}
.btn-aftersale-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:12px;
  border:2px solid transparent;
  background:linear-gradient(#0f1523,#0f1523) padding-box,
             linear-gradient(135deg,#ec4899,#a855f7) border-box;
  color:#ec4899;
  font-family:var(--ff-head);font-size:.92rem;font-weight:700;
  letter-spacing:.05em;text-decoration:none;cursor:pointer;
  transition:transform .22s,box-shadow .22s,filter .22s;
  white-space:nowrap;
}
.btn-aftersale-cta:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 24px rgba(236,72,153,0.35);
  filter:brightness(1.1);color:#ec4899;
}
.btn-aftersale-alt{
  background:linear-gradient(135deg,#ec4899 0%,#a855f7 100%);
  border:2px solid transparent;
  color:#fff !important;
  box-shadow:0 4px 18px rgba(236,72,153,0.35);
}
.btn-aftersale-alt:hover{
  filter:brightness(1.1);
  box-shadow:0 8px 28px rgba(236,72,153,0.55);
  color:#fff !important;
}
body.light-mode .btn-aftersale-cta{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,#ec4899,#a855f7) border-box;
  color:#a855f7;
}
body.light-mode .btn-aftersale-cta:hover{color:#ec4899}
body.light-mode .btn-aftersale-alt{color:#fff !important}

/* ══════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════ */
.about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-story-text h2{margin-bottom:20px}
.about-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-stat-card{background:var(--s2);border:1px solid rgba(236,72,153,.15);border-radius:16px;padding:28px 22px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.about-stat-card:hover{transform:translateY(-5px);border-color:rgba(236,72,153,.4);box-shadow:0 16px 40px rgba(236,72,153,.15)}
.about-stat-icon{width:48px;height:48px;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#ec4899;font-size:1.2rem}
.about-stat-num{font-family:var(--ff-head);font-size:1.6rem;font-weight:800;color:var(--text);margin-bottom:4px}
.about-stat-label{font-size:.8rem;color:var(--muted)}
.about-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.about-svc-item{background:var(--s2);border:1px solid rgba(236,72,153,.12);border-radius:14px;padding:24px 20px;display:flex;align-items:center;gap:14px;font-family:var(--ff-head);font-weight:600;font-size:.88rem;color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.about-svc-item:hover{border-color:rgba(236,72,153,.35);transform:translateY(-3px);box-shadow:0 10px 28px rgba(236,72,153,.12)}
.about-svc-item i{color:#ec4899;font-size:1.2rem;flex-shrink:0;width:36px;height:36px;background:rgba(236,72,153,.08);border-radius:9px;display:flex;align-items:center;justify-content:center}
.about-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.about-value-card{background:var(--s1);border:1px solid rgba(236,72,153,.12);border-radius:18px;padding:32px 24px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.about-value-card:hover{transform:translateY(-6px);border-color:rgba(236,72,153,.4);box-shadow:0 20px 50px rgba(236,72,153,.15)}
.about-value-icon{width:54px;height:54px;background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.25);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:#ec4899;font-size:1.3rem}
.about-value-card h4{font-family:var(--ff-head);font-size:1rem;font-weight:700;color:var(--text);margin-bottom:10px}
.about-value-card p{font-size:.85rem;color:var(--muted);line-height:1.65}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ══════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding-top:20px}
  .hero-visual{display:none}
  .hero-content{text-align:center}
  .hero-badge,.hero-actions,.hero-stats{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}

  .services-grid{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .port-item.port-tall{grid-row:1;grid-column:1}

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand-col{grid-column:1/3}

  .about-values-grid{grid-template-columns:repeat(2,1fr)}
  .about-story-grid{gap:40px}

  .pn-grid{grid-template-columns:1fr 1fr}
  .pn-featured{transform:none;grid-column:1/3}
  .pn-featured:hover{transform:translateY(-8px)}
  .pn-addons-grid{grid-template-columns:repeat(2,1fr)}

  .contact-layout{gap:36px}

  .who-grid{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE NAV (≤900px)
   ══════════════════════════════════════════════ */
@media(max-width:900px){
  .hamburger{display:flex}

  .nav-links{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100vw;height:100dvh;
    background:rgba(6,9,15,.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    align-items:center;justify-content:center;
    gap:28px;z-index:1002;padding:80px 24px 40px;
    pointer-events:none;visibility:hidden;opacity:0;
    transition:opacity .3s ease,visibility .3s ease;
    list-style:none;
  }
  .nav-links.open{pointer-events:all;visibility:visible;opacity:1}
  .nav-links li{display:flex;width:100%;justify-content:center}
  .nav-links a{font-size:1.15rem;color:var(--text);font-weight:600;padding:8px 0;width:100%;text-align:center}
  .nav-links a:hover{color:var(--pink)}
  .nav-cta-btn{
    width:auto !important;
    padding:10px 28px !important;
    font-size:.95rem !important;
    justify-content:center !important;
  }
  .nav-start-btn{
    width:100% !important;
    max-width:280px;
    text-align:center;
    padding:14px 24px !important;
    font-size:.9rem !important;
  }
  .header-logo-img{height:60px;max-width:220px}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ══════════════════════════════════════════════ */
@media(max-width:768px){
  #header{padding:10px 0}
  .nav-container{padding:0 16px}
  .header-logo-img{height:52px;max-width:190px}

  .hero{padding:100px 0 60px;min-height:auto}
  .hero-title{font-size:clamp(1.8rem,7vw,2.6rem)}
  .hero-sub{font-size:.92rem}
  .hero-actions{flex-direction:column;align-items:center;gap:12px}
  .hero-actions .btn{width:100%;max-width:320px;justify-content:center}

  .services-grid{grid-template-columns:1fr}
  .services-section{padding:64px 0}

  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-section{padding:64px 0}
  .port-item.port-tall,.port-item{grid-column:1;grid-row:auto}
  .port-item.port-tall .port-inner{min-height:240px}

  .trust-strip{gap:10px}
  .trust-item{padding:8px 14px;font-size:.78rem}

  .cta-banner{padding:32px 20px;flex-direction:column;align-items:flex-start;gap:24px}
  .cta-main-btn{width:100%;justify-content:center}

  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand-col{grid-column:1/3}
  .footer-logo-img{height:60px}

  .form-row-2{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr;gap:32px}
  .contact-form-col{padding:24px 18px}
  .contact-options-grid{grid-template-columns:1fr}
  .contact-option-primary{grid-column:1}
  .co-body span{font-size:.76rem}

  .svc-detail-card{grid-template-columns:1fr;gap:16px;padding:28px 20px}
  .svc-detail-icon{width:48px;height:48px;font-size:1.2rem}

  .port-detail-card,.port-detail-card--reverse{grid-template-columns:1fr;direction:ltr;gap:28px;margin-bottom:40px;padding-bottom:40px}
  .port-detail-mock{min-height:180px}
  .port-detail-info .btn,.port-github-link{width:100%;justify-content:center;text-align:center}
  .port-github-link{margin-bottom:12px}

  .about-story-grid{grid-template-columns:1fr;gap:32px}
  .about-stat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .about-services-grid{grid-template-columns:repeat(2,1fr)}
  .about-values-grid{grid-template-columns:1fr}

  .pn-grid{grid-template-columns:1fr}
  .pn-featured{grid-column:1;transform:none}
  .pn-featured:hover{transform:translateY(-8px)}
  .pn-addons-grid{grid-template-columns:1fr 1fr}
  .pn-why-grid{grid-template-columns:1fr}
  .pn-addons,.pn-why{padding:24px 18px}
  .pn-card{padding:28px 20px 24px}

  .page-hero{padding:110px 0 56px}
  .page-hero-title{font-size:clamp(1.6rem,6vw,2.2rem)}
  .page-hero-sub{font-size:.9rem}

  .faq-section{padding:64px 0}
  .faq-question{padding:16px 18px;font-size:.88rem}
  .faq-item.open .faq-answer{padding:0 18px 16px}

  .section-heading{font-size:clamp(1.5rem,5vw,2rem)}
  .section-center-header{margin-bottom:36px}

  .who-grid{grid-template-columns:1fr}
  .who-section{padding:64px 0}

  /* Chatbot — full width on mobile */
  .chatbot-wrap{bottom:16px;right:16px}
  .chat-panel{
    position:fixed;
    top:70px !important;
    left:12px !important;
    right:12px !important;
    bottom:80px !important;
    width:auto !important;
    max-height:none !important;
    min-height:0 !important;
    border-radius:14px;
  }
  .chat-back .back-label{display:none}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
   ══════════════════════════════════════════════ */
@media(max-width:480px){
  .container{padding:0 16px}
  .hero-stats{flex-wrap:wrap;justify-content:center}
  .hero-badge{font-size:.72rem;padding:4px 12px 4px 8px}

  .footer-grid{grid-template-columns:1fr}
  .footer-brand-col{grid-column:1}

  .about-stat-grid{grid-template-columns:1fr 1fr}
  .about-services-grid{grid-template-columns:1fr}

  .pn-addons-grid{grid-template-columns:1fr 1fr}
  .pricing-section-new{padding:60px 0}

  .cta-banner-section{padding:48px 0}
  .cta-banner{padding:28px 16px}

  .btn-lg{padding:13px 24px;font-size:.9rem}
  .btn-start{padding:13px 24px;font-size:.9rem}

  .chatbot-wrap{right:12px;bottom:12px}
  .chat-panel{
    top:70px !important;
    left:10px !important;
    right:10px !important;
    bottom:76px !important;
    width:auto !important;
  }
  .chat-fab{width:40px;height:40px;font-size:1rem}

  .page-hero{padding:100px 0 48px}
  .section-heading{font-size:1.45rem}

  .services-section,.portfolio-section,.faq-section,.contact-section{padding:56px 0}
}



/* ══════════════════════════════════════════════
   MOBILE OVERFLOW & CARD FIXES
   ══════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 600px) {
  .btn-start,
  .btn-start.btn-lg {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    font-size: 0.88rem;
    box-sizing: border-box;
  }

  [style*="padding:48px 32px"],
  [style*="padding: 48px 32px"] {
    padding: 32px 16px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .cta-banner {
    padding: 28px 16px;
    overflow: hidden;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pn-bottom-cta {
    padding: 28px 16px;
    overflow: hidden;
  }
  .pn-bottom-cta .btn-start {
    width: 100%;
    max-width: 320px;
  }

  section > .container > div[style],
  main > section > .container > div[style] {
    box-sizing: border-box;
    overflow: hidden;
  }
}

@media (max-width: 400px) {
  .btn-start,
  .btn-start.btn-lg {
    font-size: 0.82rem;
    padding: 12px 16px;
    max-width: 100%;
  }

  [style*="padding:48px 32px"],
  [style*="padding: 48px 32px"] {
    padding: 24px 12px !important;
  }
}

.inline-cta-card {
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 600px) {
  .inline-cta-card {
    padding: 32px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .inline-cta-card .btn-start {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
}

@media (max-width: 400px) {
  .inline-cta-card {
    padding: 24px 14px !important;
  }
}

/* ══════════════════════════════════════════════
   WHO WE SERVE SECTION
   ══════════════════════════════════════════════ */
.who-section{padding:96px 0;background:var(--bg);border-top:1px solid rgba(236,72,153,.06)}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:0}
.who-card{
  background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r);padding:36px 28px;
  text-align:center;position:relative;overflow:hidden;
  transition:all .25s var(--ease);
}
.who-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pink-grad);opacity:0;transition:opacity .3s}
.who-card:hover{border-color:rgba(236,72,153,.3);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 32px rgba(236,72,153,.1)}
.who-card:hover::before{opacity:1}
.who-icon{
  width:60px;height:60px;border-radius:14px;margin:0 auto 20px;
  background:rgba(236,72,153,.1);border:1px solid rgba(236,72,153,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--pink);
  transition:background .2s,box-shadow .2s;
}
.who-card:hover .who-icon{background:rgba(236,72,153,.2);box-shadow:0 0 20px rgba(236,72,153,.25)}
.who-card h3{font-family:var(--ff-head);font-weight:700;font-size:1.05rem;color:var(--text);margin-bottom:10px}
.who-card p{font-size:.87rem;color:var(--muted);line-height:1.7}

/* ══════════════════════════════════════════════
   PREMIUM UPGRADES
   ══════════════════════════════════════════════ */

/* ── SKELETON LOADER ─────────────────────────── */
#siteLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#siteLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--pink-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 0 40px rgba(236,72,153,0.5);
  animation: loaderPulse 1.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 40px rgba(236,72,153,0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 60px rgba(236,72,153,0.8); }
}
.loader-bar {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  width: 0%;
  background: var(--pink-grad);
  border-radius: 100px;
  animation: loaderFill 1.4s var(--ease) forwards;
}
@keyframes loaderFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}



/* ── AURORA HERO BACKGROUND ─────────────────── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 60%, rgba(236,72,153,0.055) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(168,85,247,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(0,212,255,0.03) 0%, transparent 50%);
  animation: auroraShift 12s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { opacity: 0.7; transform: scale(1) translateY(0); }
  50%  { opacity: 1;   transform: scale(1.04) translateY(-10px); }
  100% { opacity: 0.8; transform: scale(1.01) translateY(5px); }
}

/* ── GLASSMORPHISM CARDS ─────────────────────── */
.svc-card,
.pn-card,
.who-card,
.about-value-card,
.about-stat-card,
.faq-item,
.contact-option-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── GRADIENT BORDER GLOW ON CARDS ──────────── */
.svc-card:hover,
.who-card:hover,
.pn-card:hover,
.about-value-card:hover,
.about-stat-card:hover {
  box-shadow:
    0 0 0 1px rgba(236,72,153,0.25),
    0 24px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(236,72,153,0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── CARD SHINE EFFECT ───────────────────────── */
.svc-card,
.pn-card,
.who-card,
.port-inner,
.about-value-card {
  position: relative;
  overflow: hidden;
}
.svc-card::after,
.pn-card::after,
.who-card::after,
.about-value-card::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s var(--ease), top 0.6s var(--ease);
  pointer-events: none;
}
.svc-card:hover::after,
.pn-card:hover::after,
.who-card:hover::after,
.about-value-card:hover::after {
  left: 120%;
  top: -60%;
}

/* ── BUTTON PRESS MICRO-INTERACTION ─────────── */
.btn-primary:active,
.btn-start:active,
.pn-cta:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 16px rgba(236,72,153,0.4);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-outline:active {
  transform: translateY(1px) scale(0.98);
}

/* ── REFINED BUTTON HOVER ────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: inherit;
}
.btn-primary:hover::before { opacity: 1; }

/* ── NAV LINK UNDERLINE ANIMATION ───────────── */
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn) {
  position: relative;
}
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--pink-grad);
  border-radius: 100px;
  transition: width 0.3s var(--ease);
}
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn):hover::after,
.nav-links a.nav-active:not(.nav-cta-btn):not(.nav-start-btn)::after {
  width: 100%;
}

/* ── SECTION GRADIENT DIVIDERS ───────────────── */
.trust-strip-section,
.services-section,
.portfolio-section,
.pricing-section-new,
.who-section,
.cta-banner-section,
.faq-section,
.contact-section,
.port-detail-section,
.services-detail-section {
  position: relative;
}
.trust-strip-section::before,
.services-section::before,
.portfolio-section::before,
.pricing-section-new::before,
.who-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,0.3), rgba(168,85,247,0.3), transparent);
  pointer-events: none;
}

/* ── PARALLAX DEPTH ON ORB ELEMENTS ─────────── */
.orb {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── REFINED SCROLL REVEAL ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
  backface-visibility: hidden;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── STAGGERED CARD ENTRANCE ─────────────────── */
.services-grid .svc-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .svc-card:nth-child(2) { transition-delay: 0.12s; }
.services-grid .svc-card:nth-child(3) { transition-delay: 0.19s; }
.services-grid .svc-card:nth-child(4) { transition-delay: 0.26s; }
.services-grid .svc-card:nth-child(5) { transition-delay: 0.33s; }
.services-grid .svc-card:nth-child(6) { transition-delay: 0.40s; }
.who-grid .who-card:nth-child(1) { transition-delay: 0.06s; }
.who-grid .who-card:nth-child(2) { transition-delay: 0.14s; }
.who-grid .who-card:nth-child(3) { transition-delay: 0.22s; }
.pn-grid .pn-card:nth-child(1) { transition-delay: 0.06s; }
.pn-grid .pn-card:nth-child(2) { transition-delay: 0.14s; }
.pn-grid .pn-card:nth-child(3) { transition-delay: 0.22s; }

/* ── ANIMATED COUNTER NUMBERS ────────────────── */
.about-stat-num {
  transition: color 0.3s;
  font-variant-numeric: tabular-nums;
}
.about-stat-card:hover .about-stat-num {
  background: var(--pink-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── REFINED HERO TYPOGRAPHY ─────────────────── */
.hero-title {
  letter-spacing: -0.02em;
  font-feature-settings: 'kern' 1;
}
.hero-sub {
  letter-spacing: 0.01em;
}
.section-heading {
  letter-spacing: -0.015em;
}
.page-hero-title {
  letter-spacing: -0.02em;
}

/* ── SCROLL PROGRESS GLOW ────────────────────── */
#scrollProgress {
  height: 2.5px;
  box-shadow: 0 0 12px rgba(236,72,153,0.8), 0 0 24px rgba(168,85,247,0.4);
}

/* ── FOOTER TOP DIVIDER ENHANCED ─────────────── */
.site-footer::before {
  width: 80%;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,0.5), rgba(168,85,247,0.5), rgba(236,72,153,0.5), transparent);
}

/* ── TRUST ITEMS SHIMMER ON HOVER ────────────── */
.trust-item {
  position: relative;
  overflow: hidden;
}
.trust-item::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,0.08), transparent);
  transition: left 0.5s var(--ease);
  pointer-events: none;
}
.trust-item:hover::after { left: 150%; }

/* ── HERO BADGE PULSE RING ───────────────────── */
.hero-badge {
  position: relative;
}

/* ── PAGE TRANSITION REFINEMENT ──────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.page-section:not([hidden]) {
  animation: pageFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── BACK TO TOP ENHANCED ────────────────────── */
.back-to-top {
  position: relative;
  overflow: hidden;
}
.back-to-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.back-to-top:hover::before { transform: scale(1); }

/* ── PORTFOLIO CARD BORDER GLOW ──────────────── */
.port-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(168,85,247,0.08));
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
  pointer-events: none;
}
.port-item:hover .port-inner::before { opacity: 1; }

/* ── HEADER BORDER GLOW ON SCROLL ────────────── */
#header.scrolled {
  box-shadow: 0 1px 0 rgba(236,72,153,0.1), 0 8px 32px rgba(0,0,0,0.3);
}

/* ── INPUT FOCUS GLOW ENHANCED ───────────────── */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236,72,153,0.12), 0 0 16px rgba(236,72,153,0.1);
}

/* ── CHATBOT FAB RING PULSE ───────────────────── */
.chat-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(236,72,153,0.35);
  animation: fabRingPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fabRingPulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* ── SECTION TAGS ENHANCED ───────────────────── */
.section-tag {
  position: relative;
  overflow: hidden;
}
.section-tag::before {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,0.15), transparent);
  animation: tagShimmer 3s ease-in-out infinite;
}
@keyframes tagShimmer {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}



/* ══════════════════════════════════════════════
   ABOUT — WHO I WORK WITH & SERVICE AREA
   ══════════════════════════════════════════════ */
.about-who-area-section {
  padding: 80px 0;
  background: var(--s1);
  border-top: 1px solid rgba(236,72,153,.08);
}
.about-who-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.about-who-card {
  background: var(--s2);
  border: 1px solid rgba(236,72,153,.15);
  border-radius: 20px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s, transform .25s;
}
.about-who-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pink-grad);
  opacity: 0;
  transition: opacity .3s;
}
.about-who-card:hover {
  border-color: rgba(236,72,153,.35);
  box-shadow: 0 20px 56px rgba(0,0,0,.4), 0 0 32px rgba(236,72,153,.1);
  transform: translateY(-4px);
}
.about-who-card:hover::before { opacity: 1; }
.about-who-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(236,72,153,.1);
  border: 1px solid rgba(236,72,153,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--pink);
  margin-bottom: 20px;
  transition: background .2s, box-shadow .2s;
}
.about-who-card:hover .about-who-icon {
  background: rgba(236,72,153,.2);
  box-shadow: 0 0 20px rgba(236,72,153,.25);
}
.about-who-card .section-tag { margin-bottom: 10px; }
.about-who-card .section-heading { font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-bottom: 14px; }
.about-who-card > p {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 24px;
}
.about-who-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}
.about-who-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
}
.about-who-list i {
  color: var(--green-check);
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 3px;
  filter: drop-shadow(0 0 4px rgba(34,197,94,.4));
}

@media (max-width: 768px) {
  .about-who-area-grid { grid-template-columns: 1fr; }
  .about-who-card { padding: 28px 22px; }
  .about-who-area-section { padding: 56px 0; }
}
/* ══════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════ */
.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(236,72,153,0.08);
  border:1.5px solid rgba(236,72,153,0.3);
  border-radius:100px;
  padding:7px 14px 7px 10px;
  cursor:pointer;
  font-family:var(--ff-head);font-weight:700;font-size:0.74rem;
  letter-spacing:0.04em;
  color:var(--pink);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:all 0.25s var(--ease) !important;
  white-space:nowrap;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.theme-toggle::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--pink-grad);
  opacity:0;
  transition:opacity 0.25s var(--ease);
  border-radius:inherit;
}
.theme-toggle:hover::before{opacity:1;}
.theme-toggle:hover{color:#fff;border-color:transparent;box-shadow:0 0 28px rgba(236,72,153,0.5);}
.theme-toggle:hover .theme-label,
.theme-toggle:hover .theme-icon-wrap{position:relative;z-index:1;color:#fff;}
.theme-label,.theme-icon-wrap{position:relative;z-index:1;transition:color 0.25s;}

.theme-icon-wrap{
  width:24px;height:24px;border-radius:50%;
  background:rgba(236,72,153,0.12);
  border:1px solid rgba(236,72,153,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;
  flex-shrink:0;
  transition:all 0.35s var(--ease) !important;
}
.theme-icon-dark,.theme-icon-light{
  position:absolute;
  transition:opacity 0.3s var(--ease),transform 0.35s var(--ease) !important;
}
.theme-icon-light{opacity:0;transform:rotate(90deg) scale(0.5);}
body.light-mode .theme-icon-dark{opacity:0;transform:rotate(-90deg) scale(0.5);}
body.light-mode .theme-icon-light{opacity:1;transform:rotate(0deg) scale(1);}

/* Animate toggle on switch */
body.light-mode .theme-toggle{
  background:rgba(245,158,11,0.10);
  border-color:rgba(245,158,11,0.4);
  color:#d97706;
}
body.light-mode .theme-toggle:hover{color:#fff;}
body.light-mode .theme-icon-wrap{
  background:rgba(245,158,11,0.12);
  border-color:rgba(245,158,11,0.3);
  color:#d97706;
}
body.light-mode .theme-toggle::before{background:linear-gradient(135deg,#f59e0b,#f97316);}
body.light-mode .theme-toggle:hover{box-shadow:0 0 28px rgba(245,158,11,0.45);}

/* ── ENHANCED CARD HOVER ANIMATIONS ─────────── */
.svc-card{
  animation-fill-mode:both;
}
.svc-card:hover{
  transform:translateY(-6px) scale(1.01) !important;
  box-shadow:0 32px 80px rgba(0,0,0,0.55),0 0 40px var(--pink-glow),inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
body.light-mode .svc-card:hover{
  box-shadow:0 20px 50px rgba(99,102,241,0.15),0 0 30px rgba(236,72,153,0.15) !important;
}

.who-card{
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r);
  padding:28px;position:relative;overflow:hidden;
  transition:all 0.28s var(--ease);
}
.who-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--pink-grad);opacity:0;transition:opacity 0.3s;
}
.who-card:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(236,72,153,0.35);
  box-shadow:0 24px 60px rgba(0,0,0,0.45),0 0 32px rgba(236,72,153,0.12);
}
.who-card:hover::before{opacity:1;}
body.light-mode .who-card:hover{box-shadow:0 16px 40px rgba(99,102,241,0.12),0 0 24px rgba(236,72,153,0.1);}

.pn-card{
  transition:transform 0.28s var(--ease),box-shadow 0.28s var(--ease),border-color 0.28s !important;
}
.pn-card:hover{
  transform:translateY(-10px) !important;
  box-shadow:0 32px 80px rgba(0,0,0,0.5),0 0 48px rgba(236,72,153,0.15) !important;
}
body.light-mode .pn-card:hover{
  box-shadow:0 20px 50px rgba(99,102,241,0.15),0 0 36px rgba(236,72,153,0.12) !important;
}

/* ── ENHANCED SECTION TEXT WEIGHTS ──────────── */
.section-heading{font-weight:800;}
.hero-title{font-weight:900;}
.hero-sub{font-weight:500;color:var(--muted);}
.hero-badge{font-weight:700;}
.trust-item span:last-child{font-weight:600;color:var(--text);}
.svc-card h3{font-weight:800;}
.who-card h3{font-weight:800;}
.pn-price{font-weight:900;}
.faq-question{font-weight:700 !important;}
.about-stat-num{font-weight:900;}
.about-value-card h4{font-weight:800;}
.nav-links a{font-weight:700;}
.footer-col h5{font-weight:800;color:var(--text);}
.footer-brand-col p{color:var(--muted);}

/* ── STUNNING NAV LINK HOVER UNDERLINE ───────── */
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn){
  position:relative;
  padding-bottom:3px;
}
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn)::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;right:50%;
  height:1.5px;
  background:var(--pink-grad);
  border-radius:2px;
  transition:left 0.25s var(--ease),right 0.25s var(--ease);
}
.nav-links a:not(.nav-cta-btn):not(.nav-start-btn):hover::after,
.nav-links a.nav-active:not(.nav-cta-btn):not(.nav-start-btn)::after{
  left:0;right:0;
}

/* ── NAV GLOW AURA ON SCROLL ─────────────────── */
#header.scrolled{
  background:var(--nav-bg-scrolled) !important;
}

/* ── RESPONSIVE THEME TOGGLE ─────────────────── */
@media(max-width:900px){
  .theme-toggle .theme-label{display:none;}
  .theme-toggle{padding:8px;}
  .theme-icon-wrap{width:22px;height:22px;}
}
@media(max-width:480px){
  .theme-toggle{padding:7px;}
}

/* ── FLOATING CARD SHIMMER ───────────────────── */
@keyframes cardShimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.svc-card:hover::after,.pn-card:hover::after,.who-card:hover::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(236,72,153,0.04) 50%,transparent 60%);
  background-size:200% 100%;
  animation:cardShimmer 1.2s var(--ease) both;
  pointer-events:none;
  border-radius:inherit;
  z-index:0;
}

/* ── ABOUT STAT CARDS LIGHT MODE ─────────────── */
body.light-mode .about-who-area-section{
  background:var(--s1);
  border-top-color:rgba(236,72,153,0.1);
}
/* ── ROBOT FACE FAB ──────────────────────────── */
.robot-face {
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-fab {
  font-size: 1.05rem;
}

/* ── THEME TOGGLE AS FAB ─────────────────────── */
.theme-toggle-fab {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(13,17,23,0.92) !important;
  border: 1.5px solid rgba(236,72,153,0.4) !important;
  box-shadow: 0 4px 20px rgba(236,72,153,0.25) !important;
  flex-shrink: 0;
  font-size: 0.88rem !important;
}
.theme-toggle-fab .theme-label { display: none !important; }
.theme-toggle-fab .theme-icon-wrap {
  width: 24px;
  height: 24px;
  background: transparent !important;
  border: none !important;
}
body.light-mode .theme-toggle-fab {
  background: rgba(240,244,255,0.95) !important;
  border-color: rgba(245,158,11,0.5) !important;
  box-shadow: 0 4px 20px rgba(245,158,11,0.3) !important;
}
.chatbot-wrap {
  gap: 10px;
}

/* ── LIGHT MODE: HERO & NAVBAR KEEP DARK THEME ── */
body.light-mode .hero { background: linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important; }
body.light-mode #header {
  background: rgba(6,9,15,0.92) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.light-mode #header.scrolled {
  background: rgba(6,9,15,0.97) !important;
}
body.light-mode .nav-links a {
  color: rgba(232,234,240,0.75) !important;
}
body.light-mode .nav-links a:hover {
  color: #fff !important;
}
body.light-mode .hamburger span {
  background: #e8eaf0 !important;
}
body.light-mode .hero { background: linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important; }
body.light-mode .hero-title {
  color: #e8eaf0 !important;
}
body.light-mode .hero-title em {
  background: linear-gradient(110deg,#fbbf24 0%,#f59e0b 30%,#fde68a 55%,#f59e0b 75%,#fbbf24 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
body.light-mode .hero-sub {
  color: rgba(136,146,164,0.9) !important;
}
body.light-mode .hero-badge {
  color: #e8eaf0 !important;
  background: rgba(236,72,153,0.12) !important;
  border-color: rgba(236,72,153,0.3) !important;
}
body.light-mode .hero-stats span {
  color: #fff !important;
}
body.light-mode .hero-grid-bg {
  background-image:
    linear-gradient(rgba(236,72,153,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,72,153,.025) 1px, transparent 1px) !important;
}
body.light-mode .btn-outline {
  color: #e8eaf0 !important;
  border-color: rgba(255,255,255,0.2) !important;
}
body.light-mode .btn-outline:hover {
  color: var(--pink) !important;
  border-color: var(--pink) !important;
}
body.light-mode .scroll-hint span {
  color: rgba(136,146,164,0.7) !important;
}
body.light-mode .live-dot {
  background: #22c55e !important;
}
/* Mobile nav overlay stays dark in light mode */
body.light-mode .nav-links {
  background: rgba(6,9,15,0.98) !important;
}
body.light-mode .nav-links a {
  color: rgba(232,234,240,0.85) !important;
}

/* ── LIGHT MODE CARDS: DARK PURPLE & DARK PINK ── */
body.light-mode .svc-card {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.3) !important;
  color: #fff !important;
}
body.light-mode .svc-card h3 {
  color: #f9a8d4 !important;
}
body.light-mode .svc-card p {
  color: rgba(249,168,212,0.8) !important;
}
body.light-mode .svc-card .svc-num {
  color: rgba(168,85,247,0.5) !important;
}
body.light-mode .svc-list li {
  color: rgba(255,255,255,0.75) !important;
}
body.light-mode .svc-card:hover {
  background: linear-gradient(145deg, #3d1a72, #2d1060) !important;
  border-color: rgba(236,72,153,0.6) !important;
  box-shadow: 0 20px 60px rgba(45,20,88,0.5), 0 0 40px rgba(236,72,153,0.2) !important;
}
body.light-mode .svc-featured {
  background: linear-gradient(145deg, #5b1e8c, #3d0e6b) !important;
  border-color: rgba(236,72,153,0.5) !important;
}

body.light-mode .who-card {
  background: linear-gradient(145deg, #1a0a42, #2d0c50) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .who-card h3 {
  color: #f9a8d4 !important;
}
body.light-mode .who-card p {
  color: rgba(249,168,212,0.75) !important;
}
body.light-mode .who-card:hover {
  background: linear-gradient(145deg, #250d58, #3d1260) !important;
  border-color: rgba(236,72,153,0.5) !important;
  box-shadow: 0 20px 50px rgba(26,10,66,0.5), 0 0 30px rgba(236,72,153,0.15) !important;
}

body.light-mode .pn-card {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .pn-card:hover {
  background: linear-gradient(145deg, #3d1a72, #2d1060) !important;
  border-color: rgba(236,72,153,0.55) !important;
}
body.light-mode .pn-featured {
  background: linear-gradient(160deg, #4a0d80, #2e0a58) !important;
  border-color: rgba(236,72,153,0.5) !important;
  box-shadow: 0 0 0 1px rgba(236,72,153,0.2), 0 20px 60px rgba(45,10,88,0.5) !important;
}
body.light-mode .pn-price {
  color: #fff !important;
}
body.light-mode .pn-label {
  color: #f9a8d4 !important;
}
body.light-mode .pn-features li {
  color: rgba(255,255,255,0.8) !important;
}
body.light-mode .pn-pages {
  color: #f9a8d4 !important;
  background: rgba(236,72,153,0.12) !important;
  border-color: rgba(236,72,153,0.3) !important;
}
body.light-mode .pn-top {
  border-color: rgba(255,255,255,0.1) !important;
}

body.light-mode .trust-item {
  background: linear-gradient(135deg, #2d1458, #1a0a42) !important;
  border-color: rgba(168,85,247,0.25) !important;
  color: #f9a8d4 !important;
}
body.light-mode .trust-item span:last-child {
  color: #fff !important;
}

body.light-mode .about-stat-card {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(236,72,153,0.3) !important;
}
body.light-mode .about-stat-num {
  color: #fff !important;
}
body.light-mode .about-stat-label {
  color: #f9a8d4 !important;
}

body.light-mode .about-value-card {
  background: linear-gradient(145deg, #1a0a42, #2d0c50) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .about-value-card h4 {
  color: #f9a8d4 !important;
}
body.light-mode .about-value-card p {
  color: rgba(255,255,255,0.7) !important;
}

body.light-mode .faq-item {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.2) !important;
}
body.light-mode .faq-item.open {
  background: linear-gradient(145deg, #3d1a72, #2d1060) !important;
}
body.light-mode .faq-question {
  color: #f9a8d4 !important;
}
body.light-mode .faq-answer p {
  color: rgba(255,255,255,0.75) !important;
}

body.light-mode .contact-option-card {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .contact-option-primary {
  background: linear-gradient(145deg, #4a0d80, #2e0a58) !important;
  border-color: rgba(236,72,153,0.35) !important;
}
body.light-mode .co-body strong {
  color: #f9a8d4 !important;
}
body.light-mode .co-body span {
  color: rgba(249,168,212,0.75) !important;
}

body.light-mode .about-svc-item {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.2) !important;
  color: #f9a8d4 !important;
}

body.light-mode .about-who-card {
  background: linear-gradient(145deg, #1a0a42, #2d0c50) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .about-who-card > p {
  color: rgba(255,255,255,0.75) !important;
}
body.light-mode .about-who-list li {
  color: rgba(255,255,255,0.75) !important;
}

body.light-mode .svc-detail-card {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .svc-detail-body h2 {
  color: #f9a8d4 !important;
}
body.light-mode .svc-detail-body p {
  color: rgba(255,255,255,0.75) !important;
}
body.light-mode .svc-detail-list li {
  color: rgba(255,255,255,0.75) !important;
}
body.light-mode .contact-form-col {
  background: linear-gradient(145deg, #2d1458, #1e0d3e) !important;
  border-color: rgba(168,85,247,0.25) !important;
}
body.light-mode .form-field label {
  color: #f9a8d4 !important;
}
body.light-mode .form-field input,
body.light-mode .form-field select,
body.light-mode .form-field textarea {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(168,85,247,0.25) !important;
  color: #fff !important;
}
body.light-mode .form-field input::placeholder,
body.light-mode .form-field textarea::placeholder {
  color: rgba(249,168,212,0.5) !important;
}

/* Sections in light mode: keep readable backgrounds */
body.light-mode .trust-strip-section {
  background: var(--s1) !important;
}
body.light-mode .services-section,
body.light-mode .who-section,
body.light-mode .portfolio-section,
body.light-mode .contact-section,
body.light-mode .faq-section,
body.light-mode .pricing-section-new {
  background: var(--bg) !important;
}
body.light-mode .section-heading {
  color: var(--text) !important;
}
body.light-mode .section-subtext,
body.light-mode .section-body {
  color: var(--muted) !important;
}
body.light-mode .page-hero { background: linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important; border-bottom: 1px solid rgba(236,72,153,.14) !important; }
body.light-mode .page-hero-title {
  color: var(--text) !important;
}
body.light-mode .page-hero-sub {
  color: var(--muted) !important;
}
body.light-mode .port-detail-info h2 {
  color: var(--text) !important;
}
body.light-mode .port-detail-info p {
  color: var(--muted) !important;
}

/* ── PRICING CARDS SMALLER ───────────────────── */
.pn-card {
  padding: 26px 22px 22px !important;
}
.pn-featured {
  transform: scale(1.02) !important;
}
.pn-featured:hover {
  transform: scale(1.02) translateY(-8px) !important;
}
.pn-price {
  font-size: 2.4rem !important;
}
.pn-dollar {
  font-size: 1.2rem !important;
  margin-top: 4px !important;
}
.pn-top {
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
}
.pn-features {
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.pn-features li {
  font-size: .82rem !important;
}
.pn-label {
  font-size: .74rem !important;
  margin-bottom: 10px !important;
}
.pn-grid {
  gap: 18px !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* ── EXTRA RESPONSIVE POLISH ─────────────────── */
@media (max-width: 768px) {
  .header-logo-img {
    height: 48px !important;
    max-width: 180px !important;
  }
  .footer-logo-img {
    height: 70px !important;
  }
  .pn-grid { grid-template-columns: 1fr !important; }
  .pn-featured { transform: none !important; }
  .pn-price { font-size: 2rem !important; }
}
@media (max-width: 480px) {
  .header-logo-img {
    height: 40px !important;
    max-width: 150px !important;
  }
}
@media (max-width: 360px) {
  .header-logo-img {
    height: 36px !important;
    max-width: 130px !important;
  }
}



/* ══════════════════════════════════════════════
   FAB CLUSTER — unified right-side stack
   ══════════════════════════════════════════════ */
.fab-cluster {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Universal FAB button */
.fab-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  position: relative;
  animation: none !important; /* prevent fabFloat from eating the gap */
}

/* Music FAB */
.music-fab {
  background: rgba(13,17,23,0.92);
  border: 1.5px solid rgba(236,72,153,0.4) !important;
  color: var(--pink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.music-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(236,72,153,0.35);
}
.music-fab.playing {
  background: var(--pink-grad);
  border-color: transparent !important;
  color: #fff;
  box-shadow: 0 0 20px rgba(236,72,153,0.5), 0 4px 20px rgba(0,0,0,0.3);
  animation: musicPulse 2.5s ease-in-out infinite;
}
@keyframes musicPulse {
  0%,100% { box-shadow: 0 0 12px rgba(236,72,153,0.3),0 4px 16px rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 28px rgba(236,72,153,0.65),0 6px 22px rgba(0,0,0,0.3); }
}

/* Theme FAB */
.theme-fab {
  background: rgba(13,17,23,0.92);
  border: 1.5px solid rgba(236,72,153,0.4) !important;
  color: var(--pink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.theme-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(236,72,153,0.35);
}
body.light-mode .theme-fab {
  background: rgba(240,244,255,0.95);
  border-color: rgba(245,158,11,0.5) !important;
  color: #d97706;
  box-shadow: 0 4px 20px rgba(245,158,11,0.3);
}

/* Chat FAB (robot) */
.chat-fab {
  background: var(--pink-grad);
  color: #fff;
  box-shadow: 0 6px 28px var(--pink-glow);
  animation: fabFloat 3s ease-in-out infinite;
}
.chat-fab:hover {
  animation-play-state: paused;
  transform: scale(1.12) !important;
  box-shadow: 0 10px 40px rgba(236,72,153,0.7);
}
@keyframes fabFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Robot face emoji */
.robot-face {
  font-size: 1rem;
  line-height: 1;
}
.fab-icon-close { font-size: 0.85rem; }

/* Theme icon wrap inside FAB */
.theme-fab .theme-icon-wrap {
  width: 22px; height: 22px;
  background: transparent !important;
  border: none !important;
  display: flex; align-items: center; justify-content: center;
}

/* Ping dot on chat fab */
.fab-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #06090f;
  animation: fabPing 2s infinite;
}
@keyframes fabPing {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .7; }
}

/* Chat FAB ring pulse */
.chat-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(236,72,153,0.35);
  animation: fabRingPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fabRingPulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* ── RESPONSIVE FAB ──────────────────────────── */
@media (max-width: 768px) {
  .fab-cluster { bottom: 16px; right: 16px; gap: 12px; }
  .fab-btn { width: 38px; height: 38px; font-size: 0.82rem; }
  .robot-face { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .fab-cluster { bottom: 12px; right: 12px; gap: 10px; }
  .fab-btn { width: 36px; height: 36px; font-size: 0.78rem; }
}

/* ── CHAT PANEL position relative to cluster ── */
.chat-panel {
  position: fixed;
  bottom: 24px;
  right: 88px;
  width: 360px;
  max-height: min(580px, calc(100vh - 40px));
  min-height: 0;
}
@media (max-width: 768px) {
  .chat-panel {
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 80px !important;
    width: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 14px;
  }
}
@media (max-width: 480px) {
  .chat-panel {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 76px !important;
    width: auto !important;
  }
}

/* ── MOBILE NAV FIX (not cropped) ───────────── */
@media (max-width: 900px) {
  .nav-links {
    overflow-y: auto !important;
    padding: 70px 24px 120px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 22px !important;
  }
}

/* ── CHATBOT LIGHT MODE VISIBILITY ──────────── */
body.light-mode .chat-panel {
  background: #fff !important;
  border-color: rgba(236,72,153,0.2) !important;
}
body.light-mode .chat-head {
  background: linear-gradient(135deg,#ec4899,#a855f7) !important;
  border-color: transparent !important;
}
body.light-mode .ch-info strong { color: #fff !important; }
body.light-mode .ch-info span { color: rgba(255,255,255,0.8) !important; }
body.light-mode .chat-x { color: rgba(255,255,255,0.8) !important; }
body.light-mode .chat-x:hover { color: #fff !important; background: rgba(255,255,255,0.15) !important; }
body.light-mode .chat-body { background: #f8f9ff !important; }
body.light-mode .cb.bot .bubble {
  background: #fff !important;
  border: 1px solid rgba(236,72,153,0.15) !important;
  color: #0f1523 !important;
}
body.light-mode .btime { color: #6b7280 !important; }
body.light-mode .qbtn {
  background: rgba(236,72,153,0.08) !important;
  border-color: rgba(236,72,153,0.3) !important;
  color: #9333ea !important;
}
body.light-mode .qbtn:hover {
  background: rgba(236,72,153,0.18) !important;
  color: #ec4899 !important;
}
body.light-mode .chat-foot {
  background: #fff !important;
  border-color: rgba(236,72,153,0.15) !important;
}
body.light-mode #chatInput {
  background: #f0f4ff !important;
  border-color: rgba(236,72,153,0.2) !important;
  color: #0f1523 !important;
}
body.light-mode #chatInput::placeholder { color: #8892a4 !important; }
body.light-mode .ch-dot { border-color: #fff !important; }
body.light-mode .chat-back { color: rgba(255,255,255,0.8) !important; border-color: rgba(255,255,255,0.2) !important; }
body.light-mode .chat-back:hover { color: #fff !important; }

/* ── PRICING CARDS — EVEN SMALLER ───────────── */
.pn-card {
  padding: 18px 16px 16px !important;
}
.pn-featured {
  transform: scale(1.02) !important;
}
.pn-featured:hover {
  transform: scale(1.02) translateY(-6px) !important;
}
.pn-price {
  font-size: 1.9rem !important;
}
.pn-dollar {
  font-size: 1rem !important;
  margin-top: 3px !important;
}
.pn-plus { font-size: 1.4rem !important; margin-top: 2px !important; }
.pn-top {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}
.pn-features {
  gap: 6px !important;
  margin-bottom: 14px !important;
}
.pn-features li { font-size: .78rem !important; }
.pn-label {
  font-size: .7rem !important;
  margin-bottom: 8px !important;
  letter-spacing: .08em !important;
}
.pn-grid {
  gap: 14px !important;
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.pn-badge {
  font-size: .66rem !important;
  padding: 4px 14px !important;
  top: -12px !important;
}
.pn-cta { padding: 10px 18px !important; font-size: .8rem !important; }
@media (max-width: 1024px) {
  .pn-card { padding: 16px 14px 14px !important; }
}
@media (max-width: 768px) {
  .pn-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pn-featured { transform: none !important; }
  .pn-price { font-size: 1.7rem !important; }
}

/* ── FOOTER — SMALLER & PURPLE IN LIGHT MODE ── */
.site-footer {
  padding: 36px 0 14px !important;
}
.footer-grid {
  margin-bottom: 24px !important;
  gap: 24px !important;
}
.footer-bottom {
  padding: 16px 0 18px !important;
}
.footer-brand-col p { font-size: .8rem !important; }
.footer-col ul { gap: 6px !important; }
.footer-col ul a { font-size: .8rem !important; }
.footer-logo-img { height: 56px !important; }

/* Light mode footer — dark purple */
body.light-mode .site-footer {
  background: linear-gradient(135deg,#1a0a42,#2d0c50) !important;
  border-top-color: rgba(236,72,153,0.3) !important;
}
body.light-mode .footer-grid { color: rgba(255,255,255,0.85) !important; }
body.light-mode .footer-col h5 { color: #f9a8d4 !important; }
body.light-mode .footer-col ul a { color: rgba(255,255,255,0.7) !important; }
body.light-mode .footer-col ul a:hover { color: #f9a8d4 !important; }
body.light-mode .footer-col ul i { color: #f9a8d4 !important; }
body.light-mode .footer-brand-col p { color: rgba(255,255,255,0.65) !important; }
body.light-mode .footer-bottom { color: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.1) !important; }
body.light-mode .footer-bottom p { color: rgba(255,255,255,0.55) !important; }
body.light-mode .heart { color: #f472b6 !important; }
body.light-mode .socials a { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.6) !important; }
body.light-mode .socials a:hover { border-color: #f9a8d4 !important; color: #f9a8d4 !important; }
body.light-mode .footer-email-link { color: rgba(255,255,255,0.7) !important; }
body.light-mode .footer-email-link:hover { color: #f9a8d4 !important; }
body.light-mode .back-to-top { box-shadow: 0 4px 20px rgba(236,72,153,0.5); }

/* ── HEADING SCROLL ANIMATIONS ───────────────── */
.section-heading,
.page-hero-title,
.hero-title,
.cta-heading,
.about-story-text h2,
.svc-detail-body h2,
.port-detail-info h2 {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.section-heading.heading-visible,
.page-hero-title.heading-visible,
.hero-title.heading-visible,
.cta-heading.heading-visible,
.about-story-text h2.heading-visible,
.svc-detail-body h2.heading-visible,
.port-detail-info h2.heading-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section tags fade in */
.section-tag {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.section-tag.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PAGE OPEN ANIMATIONS ────────────────────── */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tagBounceIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.page-section:not([hidden]) {
  animation: pageSlideIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.page-section:not([hidden]) .hero-content {
  animation: heroContentIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}

/* ── RESPONSIVE LOGO ─────────────────────────── */
@media (max-width: 768px) {
  .header-logo-img { height: 48px !important; max-width: 180px !important; }
  .footer-logo-img { height: 50px !important; }
}
@media (max-width: 480px) {
  .header-logo-img { height: 40px !important; max-width: 150px !important; }
}
@media (max-width: 360px) {
  .header-logo-img { height: 36px !important; max-width: 130px !important; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  ABSOLUTE FINAL OVERRIDES — written last, wins always   ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── 1. HERO BACKGROUNDS — deep purple, every page, both themes ── */
.hero,
.page-hero,
body.light-mode .hero,
body.light-mode .page-hero {
  background: linear-gradient(145deg,#12012e 0%,#1e0547 22%,#2d0a5e 48%,#3d0d6b 72%,#520a7a 88%,#6b0f8c 100%) !important;
  border-bottom: 1px solid rgba(236,72,153,.14) !important;
}

/* ── 2. HERO TEXT COLOURS ── */
.hero-title,
body.light-mode .hero-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* "Grow Your" GOLD — overrides EVERYTHING, comes last */
.hero-title em,
body.light-mode .hero-title em {
  font-style: italic !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(110deg,#fde68a 0%,#fbbf24 25%,#f59e0b 50%,#fbbf24 75%,#fde68a 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: goldShimmer 2.5s linear infinite !important;
  filter: drop-shadow(0 0 18px rgba(251,191,36,0.7)) drop-shadow(0 0 6px rgba(245,158,11,0.5)) !important;
  display: inline !important;
}
@keyframes goldShimmer { to { background-position: 250% center; } }

.hero-sub, body.light-mode .hero-sub { color: rgba(255,255,255,0.78) !important; }
.hero-badge, body.light-mode .hero-badge {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #f9a8d4 !important;
}
.page-hero-title, body.light-mode .page-hero-title { color: #fff !important; }
.page-hero-sub,  body.light-mode .page-hero-sub  { color: rgba(255,255,255,0.72) !important; }

/* ── 3. BTN-START — rectangle, NO pill shape ── */
.btn-start,
.btn-start.btn-lg,
a.btn-start,
button.btn-start,
[class*="btn-start"] {
  border-radius: 12px !important;
  background: linear-gradient(135deg,#ec4899 0%,#a855f7 100%) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 14px 36px !important;
  box-shadow: 0 4px 22px rgba(236,72,153,0.42), 0 2px 8px rgba(0,0,0,0.18) !important;
  white-space: normal !important;
  word-break: break-word !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}
.btn-start:hover, a.btn-start:hover, button.btn-start:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 32px rgba(236,72,153,0.62) !important;
  filter: brightness(1.08) !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .btn-start,
  .btn-start.btn-lg,
  a.btn-start,
  button.btn-start,
  .cta-main-btn {
    font-size: 0.78rem !important;
    padding: 11px 18px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    max-width: 260px !important;
    width: auto !important;
    letter-spacing: 0.06em !important;
  }
}
@media (max-width: 480px) {
  .btn-start,
  .btn-start.btn-lg,
  a.btn-start,
  button.btn-start,
  .cta-main-btn {
    font-size: 0.72rem !important;
    padding: 10px 14px !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 240px !important;
    letter-spacing: 0.05em !important;
  }
}

/* ── 4. PINK BOLD CARD OUTLINES — dark & light, every card type ── */
.svc-card,
.pn-card,
.who-card,
.faq-item,
.port-inner,
.svc-detail-card,
.contact-form-col,
.testi-card,
.feat-card,
.price-card,
.about-value-card,
.about-stat-card,
.contact-option-card {
  border: 2px solid rgba(236,72,153,0.45) !important;
  box-shadow: 0 0 0 0px transparent, 0 4px 24px rgba(0,0,0,0.22) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.svc-card:hover,
.pn-card:hover,
.who-card:hover,
.faq-item:hover,
.port-inner:hover,
.svc-detail-card:hover,
.contact-form-col:hover,
.testi-card:hover,
.feat-card:hover,
.price-card:hover,
.about-value-card:hover,
.about-stat-card:hover,
.contact-option-card:hover {
  border-color: rgba(236,72,153,0.85) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.18), 0 12px 48px rgba(236,72,153,0.22), 0 8px 32px rgba(0,0,0,0.3) !important;
}
body.light-mode .svc-card,
body.light-mode .pn-card,
body.light-mode .who-card,
body.light-mode .faq-item,
body.light-mode .port-inner,
body.light-mode .svc-detail-card,
body.light-mode .contact-form-col,
body.light-mode .testi-card,
body.light-mode .feat-card,
body.light-mode .price-card,
body.light-mode .about-value-card,
body.light-mode .about-stat-card,
body.light-mode .contact-option-card {
  border: 2px solid rgba(236,72,153,0.5) !important;
  box-shadow: 0 2px 16px rgba(236,72,153,0.1) !important;
}
body.light-mode .svc-card:hover,
body.light-mode .pn-card:hover,
body.light-mode .who-card:hover,
body.light-mode .faq-item:hover,
body.light-mode .port-inner:hover,
body.light-mode .svc-detail-card:hover,
body.light-mode .contact-form-col:hover,
body.light-mode .testi-card:hover,
body.light-mode .feat-card:hover,
body.light-mode .price-card:hover,
body.light-mode .about-value-card:hover,
body.light-mode .about-stat-card:hover,
body.light-mode .contact-option-card:hover {
  border-color: rgba(236,72,153,0.9) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.2), 0 8px 36px rgba(236,72,153,0.22) !important;
}

/* ── 5. CHATBOT LIGHT MODE FIX ── */
body.light-mode .chat-panel {
  background: #ffffff !important;
  border: 1px solid rgba(236,72,153,0.2) !important;
}
body.light-mode .chat-head {
  background: linear-gradient(135deg,#ec4899,#a855f7) !important;
}
body.light-mode .ch-info strong,
body.light-mode .chat-x { color: #fff !important; }
body.light-mode .chat-body { background: #f5f7ff !important; }
body.light-mode .cb.bot .bubble {
  background: #fff !important;
  color: #0f1523 !important;
  border: 1px solid rgba(236,72,153,0.15) !important;
}
body.light-mode .btime { color: #6b7280 !important; }
body.light-mode .qbtn {
  background: rgba(236,72,153,0.07) !important;
  border: 1.5px solid rgba(236,72,153,0.35) !important;
  color: #9333ea !important;
  font-weight: 600 !important;
}
body.light-mode .qbtn:hover {
  background: rgba(236,72,153,0.18) !important;
  color: #ec4899 !important;
}
body.light-mode .chat-foot {
  background: #fff !important;
  border-top: 1px solid rgba(236,72,153,0.15) !important;
}
body.light-mode #chatInput {
  background: #f0f4ff !important;
  color: #0f1523 !important;
  border: 1px solid rgba(236,72,153,0.2) !important;
}
body.light-mode #chatInput::placeholder { color: #8892a4 !important; }

/* ── 6. FAB BUTTON OUTLINES ── */
.music-fab  { outline: none !important; }
.theme-fab  { outline: none !important; }
.chat-fab   { outline: none !important; }
.music-fab.playing { outline: none !important; }
body.light-mode .theme-fab { outline: none !important; }

/* ── 7. FOOTER PURPLE BOTH THEMES ── */
.site-footer,
body.light-mode .site-footer {
  background: linear-gradient(135deg,#1a0533 0%,#2d0a5e 40%,#4a0e72 80%,#5c1080 100%) !important;
  padding: 36px 0 14px !important;
}
.footer-col h5, body.light-mode .footer-col h5 { color: #f9a8d4 !important; }
.footer-col ul a, body.light-mode .footer-col ul a { color: rgba(255,255,255,0.7) !important; }
.footer-col ul a:hover, body.light-mode .footer-col ul a:hover { color: #f9a8d4 !important; }
.footer-brand-col p, body.light-mode .footer-brand-col p { color: rgba(255,255,255,0.65) !important; }
.footer-bottom, body.light-mode .footer-bottom { color: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.1) !important; }
.heart, body.light-mode .heart { color: #f472b6 !important; }

/* ╔══════════════════════════════════════════════╗
   ║  TARGETED FIXES — nav btn, text, card grid  ║
   ╚══════════════════════════════════════════════╝ */

/* FIX 1 — START YOUR PROJECT button in mobile nav: smaller font, allow wrap */
@media (max-width: 900px) {
  .nav-links .btn-start,
  .nav-links a.btn-start,
  .nav-links .nav-start-btn {
    border-radius: 12px !important;
    width: auto !important;
    max-width: 200px !important;
    padding: 9px 14px !important;
    font-size: 0.65rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }
}

/* FIX 2 — Section text colours in light mode: white on dark sections,
   dark on light sections */
/* who-section, cta sections have dark bg — force white text */
body.light-mode .who-section .section-heading,
body.light-mode .who-section .section-tag,
body.light-mode .who-section .section-subtext,
body.light-mode .who-section .section-body,
body.light-mode .who-section .who-card h3,
body.light-mode .who-section .who-card p {
  color: #fff !important;
}
body.light-mode .who-card p { color: rgba(255,255,255,0.78) !important; }

/* cta-heading on dark bg sections */
body.light-mode .cta-heading { color: #fff !important; }
body.light-mode .cta-sub { color: rgba(255,255,255,0.78) !important; }

/* Service area / about sections that have dark purple bg */
body.light-mode .about-section .section-heading,
body.light-mode .cta-banner-section .section-heading {
  color: #fff !important;
}

/* Light sections (services, portfolio, pricing, faq, contact) — dark text is correct */
body.light-mode .services-section .section-heading,
body.light-mode .portfolio-section .section-heading,
body.light-mode .pricing-section-new .section-heading,
body.light-mode .faq-section .section-heading,
body.light-mode .contact-section .section-heading {
  color: var(--text) !important;
}

/* FIX 3 — who-grid (3 cards) single column on mobile, proper spacing */
@media (max-width: 768px) {
  .who-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .who-card {
    padding: 28px 22px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .who-icon {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
  }
  .who-card-body {
    flex: 1 !important;
  }
  .who-card h3 {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
    text-align: left !important;
  }
  .who-card p {
    font-size: 0.85rem !important;
    text-align: left !important;
  }
}
@media (max-width: 480px) {
  .who-card {
    padding: 22px 18px !important;
    gap: 14px !important;
  }
  .who-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  LIGHT MODE TEXT VISIBILITY — complete audit             ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ── Sections with LIGHT background: dark text ── */
body.light-mode .services-section h2,
body.light-mode .services-section h3,
body.light-mode .services-section p,
body.light-mode .services-section .section-heading,
body.light-mode .services-section .section-subtext,
body.light-mode .portfolio-section h2,
body.light-mode .portfolio-section h3,
body.light-mode .portfolio-section p,
body.light-mode .portfolio-section .section-heading,
body.light-mode .portfolio-section .section-subtext,
body.light-mode .faq-section h2,
body.light-mode .faq-section h3,
body.light-mode .faq-section p,
body.light-mode .faq-section .section-heading,
body.light-mode .faq-section .section-subtext,
body.light-mode .contact-section h2,
body.light-mode .contact-section h3,
body.light-mode .contact-section p,
body.light-mode .contact-section .section-heading,
body.light-mode .contact-section .section-subtext,
body.light-mode .pricing-section-new h2,
body.light-mode .pricing-section-new .section-heading,
body.light-mode .pricing-section-new .section-subtext {
  color: #0f1523 !important;
}

/* ── Pricing card texts on light bg ── */
body.light-mode .pn-label { color: #ec4899 !important; }
body.light-mode .pn-price { color: #0f1523 !important; }
body.light-mode .pn-dollar { color: #ec4899 !important; }
body.light-mode .pn-plus { color: #4a5578 !important; }
body.light-mode .pn-features li { color: #4a5578 !important; }
body.light-mode .pn-pages { color: #9333ea !important; }
body.light-mode .pn-why-title { color: #0f1523 !important; }
body.light-mode .pn-why-item { color: #4a5578 !important; }
body.light-mode .pn-addons-title { color: #0f1523 !important; }
body.light-mode .pn-addon-item span { color: #0f1523 !important; }
body.light-mode .pn-addon-item span:first-child { font-size: 1.2rem !important; }
body.light-mode .pn-bottom-cta p { color: #0f1523 !important; }
body.light-mode .pn-cta { color: #9333ea !important; border-color: rgba(147,51,234,0.4) !important; }
body.light-mode .pn-cta:hover { color: #fff !important; }

/* ── FAQ texts on light bg ── */
body.light-mode .faq-q { color: #0f1523 !important; }
body.light-mode .faq-answer p,
body.light-mode .faq-answer { color: #4a5578 !important; }
body.light-mode .faq-icon { color: #ec4899 !important; }

/* ── Services cards on light bg ── */
body.light-mode .svc-card h3 { color: #0f1523 !important; }
body.light-mode .svc-card p { color: #4a5578 !important; }
body.light-mode .svc-list li { color: #4a5578 !important; }

/* ── Portfolio on light bg ── */
body.light-mode .port-title { color: #0f1523 !important; }
body.light-mode .port-cat { color: #ec4899 !important; }
body.light-mode .port-desc { color: #4a5578 !important; }
body.light-mode .port-tag { color: #9333ea !important; }
body.light-mode .port-detail-info h2,
body.light-mode .port-detail-info h3 { color: #0f1523 !important; }
body.light-mode .port-detail-info p { color: #4a5578 !important; }

/* ── Contact on light bg ── */
body.light-mode .contact-option-label { color: #0f1523 !important; }
body.light-mode .co-label { color: #4a5578 !important; }
body.light-mode .co-body span { color: #0f1523 !important; }
body.light-mode .form-label { color: #0f1523 !important; }
body.light-mode .contact-form-col h3 { color: #0f1523 !important; }
body.light-mode .contact-form-col p { color: #4a5578 !important; }

/* ── Dark background sections: WHITE text ── */
body.light-mode .who-section .section-heading,
body.light-mode .who-section .section-tag,
body.light-mode .who-section .section-subtext,
body.light-mode .who-section .who-card h3,
body.light-mode .who-section .who-card p,
body.light-mode .cta-heading,
body.light-mode .cta-sub,
body.light-mode .cta-banner-section p,
body.light-mode .about-who-area-section .section-heading,
body.light-mode .trust-strip-section p,
body.light-mode .trust-strip-section h2 {
  color: #fff !important;
}
body.light-mode .who-card p,
body.light-mode .cta-sub { color: rgba(255,255,255,0.78) !important; }

/* ── About page on light bg ── */
body.light-mode .about-value-card h4 { color: #0f1523 !important; }
body.light-mode .about-value-card p { color: #4a5578 !important; }
body.light-mode .about-stat-num { color: #0f1523 !important; }
body.light-mode .about-stat-label { color: #4a5578 !important; }
body.light-mode .about-story-text h2 { color: #0f1523 !important; }
body.light-mode .about-story-text p { color: #4a5578 !important; }
body.light-mode .svc-detail-body h2 { color: #0f1523 !important; }
body.light-mode .svc-detail-body p { color: #4a5578 !important; }
body.light-mode .svc-detail-num { color: #ec4899 !important; }

/* ── Nav mobile open overlay — white text on dark bg ── */
body.light-mode .nav-links a { color: #e8eaf0 !important; }
body.light-mode .nav-links a:hover { color: var(--pink) !important; }

/* ── NAV-START-BTN — rectangle shape, no pill ── */
.nav-start-btn,
.nav-links .nav-start-btn {
  border-radius: 12px !important;
}
/* Force white text on nav-start-btn in all modes — overrides light-mode .nav-links a !important */
.nav-links .nav-start-btn,
body.light-mode .nav-links .nav-start-btn,
body.light-mode .nav-links .nav-start-btn:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  LIGHT THEME TEXT COLOURS — final, replaces all previous    ║
   ╚══════════════════════════════════════════════════════════════╝

   RULE:
   • Light / white background  → dark purple headings, dark body, deep pink accents
   • Dark purple card background → pure white headings, light pink body, gradient accents
   All rules use !important to beat earlier declarations.
*/

/* ── LIGHT BG SECTIONS: dark text ───────────────────────────── */
/* Section tags / labels */
body.light-mode .services-section .section-tag,
body.light-mode .portfolio-section .section-tag,
body.light-mode .pricing-section-new .section-tag,
body.light-mode .faq-section .section-tag,
body.light-mode .contact-section .section-tag,
body.light-mode .about-section .section-tag { color: #be185d !important; border-color: rgba(190,24,93,0.3) !important; background: rgba(190,24,93,0.07) !important; }

/* Section headings */
body.light-mode .services-section .section-heading,
body.light-mode .portfolio-section .section-heading,
body.light-mode .pricing-section-new .section-heading,
body.light-mode .faq-section .section-heading,
body.light-mode .contact-section .section-heading { color: #1a0a42 !important; }

/* Section subtext / body */
body.light-mode .services-section .section-subtext,
body.light-mode .services-section .section-body,
body.light-mode .portfolio-section .section-subtext,
body.light-mode .portfolio-section .section-body,
body.light-mode .pricing-section-new .section-subtext,
body.light-mode .pricing-section-new .section-body,
body.light-mode .faq-section .section-subtext,
body.light-mode .faq-section .section-body,
body.light-mode .contact-section .section-subtext,
body.light-mode .contact-section .section-body { color: #3b1f6e !important; }

/* Services cards — light bg */
/* svc-cards keep dark bg in light mode → white text */
body.light-mode .svc-card h3 { color: #ffffff !important; }
body.light-mode .svc-card p  { color: rgba(255,255,255,0.8) !important; }
body.light-mode .svc-list li { color: #3b1f6e !important; }
/* svc-detail-card keeps dark bg in light mode - use light text */
body.light-mode .svc-detail-body h2 { color: #ffffff !important; }
body.light-mode .svc-detail-body p  { color: rgba(255,255,255,0.8) !important; }
body.light-mode .svc-detail-num     { color: #f9a8d4 !important; }
body.light-mode .svc-list li        { color: rgba(255,255,255,0.78) !important; }

/* Pricing cards — light bg */
/* pricing cards keep dark bg in light mode → use white/light text */
body.light-mode .pn-card .pn-label   { color: #f9a8d4 !important; }
body.light-mode .pn-card .pn-price   { color: #ffffff !important; }
body.light-mode .pn-card .pn-dollar  { color: #f9a8d4 !important; }
body.light-mode .pn-card .pn-plus    { color: rgba(255,255,255,0.72) !important; }
body.light-mode .pn-card .pn-features li { color: rgba(255,255,255,0.82) !important; }
body.light-mode .pn-card .pn-pages   { color: #c4b5fd !important; }
body.light-mode .pn-card .pn-why-title   { color: #ffffff !important; }
body.light-mode .pn-card .pn-why-item   { color: rgba(255,255,255,0.8) !important; }
body.light-mode .pn-card .pn-addons-title { color: #ffffff !important; }
body.light-mode .pn-card .pn-addon-item span { color: rgba(255,255,255,0.82) !important; }
body.light-mode .pn-bottom-cta p { color: #1a0a42 !important; }
body.light-mode .pn-cta { color: #7c3aed !important; border-color: rgba(124,58,237,0.4) !important; }
body.light-mode .pn-cta:hover { color: #fff !important; }

/* FAQ — light bg */
body.light-mode .faq-q     { color: #1a0a42 !important; }
body.light-mode .faq-answer,
body.light-mode .faq-answer p { color: #3b1f6e !important; }

/* Portfolio — light bg */
body.light-mode .port-title { color: #1a0a42 !important; }
body.light-mode .port-cat   { color: #be185d !important; }
body.light-mode .port-desc  { color: #3b1f6e !important; }
body.light-mode .port-tag   { color: #7c3aed !important; }
body.light-mode .port-detail-info h2,
body.light-mode .port-detail-info h3 { color: #1a0a42 !important; }
body.light-mode .port-detail-info p  { color: #3b1f6e !important; }

/* Contact — light bg */
body.light-mode .contact-form-col h3  { color: #1a0a42 !important; }
body.light-mode .contact-form-col p   { color: #3b1f6e !important; }
body.light-mode .contact-option-label { color: #1a0a42 !important; }
body.light-mode .co-label             { color: #3b1f6e !important; }
body.light-mode .co-body span         { color: #1a0a42 !important; }
body.light-mode .form-label           { color: #1a0a42 !important; }

/* About — story text on light bg */
body.light-mode .about-story-text h2  { color: #1a0a42 !important; }
body.light-mode .about-story-text p   { color: #3b1f6e !important; }
/* about-value-card has DARK purple bg → needs LIGHT text */
body.light-mode .about-value-card h4  { color: #f9a8d4 !important; }
body.light-mode .about-value-card p   { color: rgba(255,255,255,0.82) !important; }
/* about-stat-card has DARK purple bg → needs LIGHT text */
body.light-mode .about-stat-num       { color: #ffffff !important; }
body.light-mode .about-stat-label     { color: rgba(255,255,255,0.8) !important; }

/* ── DARK BG CARDS / SECTIONS: white + light pink text ──────── */
/* who-section has dark purple bg */
body.light-mode .who-section .section-tag     { color: #f9a8d4 !important; border-color: rgba(249,168,212,0.35) !important; background: rgba(249,168,212,0.08) !important; }
/* who-section heading: use vivid gradient visible on light lavender bg */
body.light-mode .who-section .section-heading { background: linear-gradient(90deg,#ec4899 0%,#a855f7 60%,#7c3aed 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
body.light-mode .who-section .section-subtext,
body.light-mode .who-section .section-body    { color: rgba(255,255,255,0.75) !important; }
body.light-mode .who-card h3 { color: #fff !important; }
body.light-mode .who-card p  { color: rgba(255,255,255,0.72) !important; }

/* CTA banners */
/* CTA banner in light mode has a light pink/lavender bg — use DARK text */
body.light-mode .cta-heading { background: none !important; -webkit-text-fill-color: #1a0a42 !important; color: #1a0a42 !important; }
body.light-mode .cta-heading em, body.light-mode .cta-heading span { -webkit-text-fill-color: #be185d !important; color: #be185d !important; }
body.light-mode .cta-sub { color: #3b1f6e !important; }
body.light-mode .cta-banner-section p { color: #3b1f6e !important; }

/* ── MOBILE NAV OVERLAY — dark bg → white text ───────────────── */
body.light-mode .nav-links a           { color: #e8eaf0 !important; }
body.light-mode .nav-links a:hover     { color: #f9a8d4 !important; }

/* ── NAV-START-BTN & BTN-START — rectangle, both themes ────── */
.nav-start-btn,
.nav-links .nav-start-btn,
.btn-start,
.btn-start.btn-lg,
a.btn-start,
button.btn-start {
  border-radius: 12px !important;
}
/* removed duplicate nav-btn override 2 */

/* ── WHO-CARD mobile: single column, horizontal row ─────────── */
@media (max-width: 768px) {
  .who-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .who-card {
    padding: 22px 18px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .who-icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  .who-card-body { flex: 1 !important; }
  .who-card h3 { text-align: left !important; margin-bottom: 5px !important; font-size: 0.98rem !important; }
  .who-card p  { text-align: left !important; font-size: 0.84rem !important; }
}

/* ── FEAT-CARDS (Why Choose section) — dark bg in both themes ────────────── */
body.light-mode .feat-card h3,
body.light-mode .feat-card h4  { color: #ffffff !important; }
body.light-mode .feat-card p   { color: rgba(255,255,255,0.8) !important; }
body.light-mode .feat-card .feat-num,
body.light-mode .feat-card .feat-icon { color: #f9a8d4 !important; }

/* ── section headings on light lavender bg — ensure visibility ──────────── */
body.light-mode .services-section .section-heading,
body.light-mode .portfolio-section .section-heading,
body.light-mode .pricing-section-new .section-heading,
body.light-mode .faq-section .section-heading,
body.light-mode .contact-section .section-heading,
body.light-mode .about-section .section-heading {
  color: #1a0a42 !important;
  -webkit-text-fill-color: unset !important;
}
body.light-mode .services-section .section-heading span,
body.light-mode .pricing-section-new .section-heading span,
body.light-mode .faq-section .section-heading span {
  background: linear-gradient(135deg,#ec4899,#7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── feat-cards: ALL text light (dark purple bg in light mode) ── */
body.light-mode .feat-card,
body.light-mode .feat-card * {
  -webkit-text-fill-color: unset !important;
}
body.light-mode .feat-card h2,
body.light-mode .feat-card h3,
body.light-mode .feat-card h4,
body.light-mode .feat-card .feat-title,
body.light-mode .feat-card .feat-heading,
body.light-mode .feat-card [class*="title"],
body.light-mode .feat-card [class*="heading"] { color: #ffffff !important; }
body.light-mode .feat-card p,
body.light-mode .feat-card .feat-desc,
body.light-mode .feat-card span:not(.gradient-text) { color: rgba(255,255,255,0.85) !important; }
body.light-mode .feat-card .feat-stat,
body.light-mode .feat-card .feat-num  { color: #f9a8d4 !important; font-size: inherit !important; }

/* ── about-stat-cards: numbers + labels on dark bg in light mode ── */
body.light-mode .about-stat-card,
body.light-mode .about-stat-card * {
  -webkit-text-fill-color: unset !important;
}
body.light-mode .about-stat-num   { color: #ffffff !important; }
body.light-mode .about-stat-label { color: rgba(255,255,255,0.8) !important; }
body.light-mode .about-stat-icon  { color: #f9a8d4 !important; }

/* ── trust-strip "Why Choose" heading: dark text on light bg ── */
body.light-mode .trust-strip-header .section-heading,
body.light-mode .trust-strip-section .section-heading,
body.light-mode .trust-strip-section .section-tag {
  color: #1a0a42 !important;
  -webkit-text-fill-color: #1a0a42 !important;
}
body.light-mode .trust-strip-header .section-heading .gradient-text,
body.light-mode .trust-strip-section .section-heading span.gradient-text {
  background: linear-gradient(135deg,#ec4899,#7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.light-mode .trust-item { color: #1a0a42 !important; }
body.light-mode .trust-check { color: #be185d !important; }
/* ════════════════════════════════════════════════════════════════
   3D CONTACT FORM — floating labels, 3D tilt, entrance animations
   ════════════════════════════════════════════════════════════════ */

/* ── Card 3D setup ── */
.contact-form-col {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease;
}
.contact-form-col:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 48px rgba(236,72,153,0.14) !important;
}

/* ── Field entrance animation ── */
@keyframes cf3dIn {
  from { opacity: 0; transform: perspective(600px) rotateX(-18deg) translateY(28px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg)   translateY(0);   }
}
#page-contact:not([hidden]) .contact-form > .form-row-2 { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both; }
#page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(1) { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.13s both; }
#page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(2) { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.21s both; }
#page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(3) { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.29s both; }
#page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(4) { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.37s both; }
#page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(5) { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.45s both; }
#page-contact:not([hidden]) .contact-form > .submit-btn              { animation: cf3dIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.53s both; }

/* ── Floating label base ── */
.form-float {
  position: relative;
}
.form-float input,
.form-float textarea {
  padding-top: 22px !important;
  padding-bottom: 8px !important;
}
.form-float > label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.88rem !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, font-weight 0.2s ease, letter-spacing 0.2s ease;
  white-space: nowrap;
  background: transparent;
}
/* Textarea label starts at top */
.form-float-ta > label {
  top: 14px;
  transform: none;
}
/* Floated state — focused or filled */
.form-float input:focus ~ label,
.form-float input:not(:placeholder-shown) ~ label {
  top: 6px;
  transform: none;
  font-size: 0.65rem !important;
  color: var(--pink) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.form-float textarea:focus ~ label,
.form-float textarea:not(:placeholder-shown) ~ label {
  top: 6px;
  font-size: 0.65rem !important;
  color: var(--pink) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Required star & optional tag ── */
.req-star {
  color: #f43f5e;
  font-weight: 800;
  margin-left: 1px;
  transition: color 0.2s;
}
.opt-label {
  font-size: 0.75em;
  opacity: 0.6;
  font-weight: 400;
  font-style: italic;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Select wrapper with custom arrow ── */
.form-select-wrap > label {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
.select-wrap {
  position: relative;
}
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  cursor: pointer;
}
.select-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.2s ease, color 0.2s;
}
.select-wrap select:focus + .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--pink);
}

/* ── Input focus 3D depth effect ── */
.form-field input,
.form-field select,
.form-field textarea {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s ease !important;
}
.form-field input:focus,
.form-field textarea:focus {
  transform: translateY(-2px) scale(1.005);
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.14), 0 8px 28px rgba(236,72,153,0.1) !important;
}
.form-field select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.14), 0 8px 28px rgba(236,72,153,0.1) !important;
}

/* ── Error states ── */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244,63,94,0.15) !important;
  animation: cf-shake 0.35s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
.form-field.has-error .req-star { color: #f43f5e; }
@keyframes cf-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px);  }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px);  }
}
.field-err-msg {
  display: none;
  font-size: 0.72rem;
  color: #f43f5e;
  font-family: var(--ff-head);
  font-weight: 600;
  margin-top: 3px;
  padding-left: 2px;
}
.form-field.has-error .field-err-msg { display: block; }

/* ── Submit button 3D press ── */
.submit-btn {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.submit-btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 14px 40px rgba(236,72,153,0.5), 0 4px 16px rgba(168,85,247,0.3) !important;
}
.submit-btn:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 2px 10px rgba(236,72,153,0.3) !important;
}

/* ── Light mode adjustments ── */
body.light-mode .form-float > label { color: rgba(255,255,255,0.55) !important; }
body.light-mode .form-float input:focus ~ label,
body.light-mode .form-float input:not(:placeholder-shown) ~ label,
body.light-mode .form-float textarea:focus ~ label,
body.light-mode .form-float textarea:not(:placeholder-shown) ~ label { color: #f9a8d4 !important; }
body.light-mode .select-arrow { color: rgba(255,255,255,0.4); }
body.light-mode .form-select-wrap > label { color: rgba(255,255,255,0.55); }

/* ── Responsive: disable card tilt & simplify on mobile ── */
@media (max-width: 768px) {
  .contact-form-col { transform: none !important; transition: none !important; }
  .form-float > label { white-space: normal; }
  .contact-form { gap: 14px; }
  .form-row-2 { grid-template-columns: 1fr; gap: 14px; }
  #page-contact:not([hidden]) .contact-form > .form-row-2,
  #page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(1),
  #page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(2),
  #page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(3),
  #page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(4),
  #page-contact:not([hidden]) .contact-form > .form-field:nth-of-type(5),
  #page-contact:not([hidden]) .contact-form > .submit-btn {
    animation-duration: 0.35s;
  }
}
@media (max-width: 480px) {
  .contact-form-col { padding: 20px 14px; }
  .form-float input, .form-float textarea { padding-top: 20px !important; }
  .form-float input:focus ~ label,
  .form-float input:not(:placeholder-shown) ~ label,
  .form-float textarea:focus ~ label,
  .form-float textarea:not(:placeholder-shown) ~ label { font-size: 0.6rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   3D HERO TITLE EFFECTS — all page heroes
   ════════════════════════════════════════════════════════════════ */

/* ── Float + perspective animation ── */
@keyframes hero3dFloat {
  0%   { transform: perspective(900px) rotateX(0deg)    rotateY(0deg)   translateZ(0);   filter: drop-shadow(0 4px 18px rgba(168,85,247,0.28)) drop-shadow(0 2px 6px rgba(236,72,153,0.2)); }
  30%  { transform: perspective(900px) rotateX(1.8deg)  rotateY(0.8deg) translateZ(8px); filter: drop-shadow(0 10px 28px rgba(236,72,153,0.38)) drop-shadow(0 4px 12px rgba(168,85,247,0.25)); }
  65%  { transform: perspective(900px) rotateX(-1deg)   rotateY(-1deg)  translateZ(5px); filter: drop-shadow(0 7px 22px rgba(168,85,247,0.3))  drop-shadow(0 3px 8px rgba(236,72,153,0.2)); }
  100% { transform: perspective(900px) rotateX(0deg)    rotateY(0deg)   translateZ(0);   filter: drop-shadow(0 4px 18px rgba(168,85,247,0.28)) drop-shadow(0 2px 6px rgba(236,72,153,0.2)); }
}

.page-hero-title {
  transform-style: preserve-3d;
  animation: hero3dFloat 9s ease-in-out infinite;
  will-change: transform, filter;
  transition: transform 0.12s ease, filter 0.12s ease;
  display: inline-block;
}

/* ── Home hero title ── */
.hero-title {
  transform-style: preserve-3d;
  animation: hero3dFloat 9s ease-in-out infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 4px 18px rgba(168,85,247,0.28)) drop-shadow(0 2px 6px rgba(236,72,153,0.2));
  transition: transform 0.12s ease, filter 0.12s ease;
}

/* ── Pause animation while JS mouse-tilt is active ── */
.page-hero-title.tilt-active,
.hero-title.tilt-active {
  animation-play-state: paused;
}

/* ── Depth layer: gradient-text span gets extra shimmer on hero ── */
.page-hero .page-hero-title .gradient-text,
.hero-inner .hero-title .gradient-text {
  display: inline-block;
  filter: drop-shadow(0 0 12px rgba(236,72,153,0.45));
}

/* ── Page hero wrapper perspective ── */
.page-hero {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

/* ── Staggered entrance per page ── */
@keyframes heroTitleIn {
  from { opacity: 0; transform: perspective(900px) rotateX(-20deg) translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0deg)   translateY(0)    scale(1); }
}
#page-services:not([hidden])  .page-hero-title { animation: heroTitleIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both, hero3dFloat 9s ease-in-out 0.75s infinite; }
#page-portfolio:not([hidden]) .page-hero-title { animation: heroTitleIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both, hero3dFloat 9s ease-in-out 0.75s infinite; }
#page-faq:not([hidden])       .page-hero-title { animation: heroTitleIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both, hero3dFloat 9s ease-in-out 0.75s infinite; }
#page-contact:not([hidden])   .page-hero-title { animation: heroTitleIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both, hero3dFloat 9s ease-in-out 0.75s infinite; }
#page-about:not([hidden])     .page-hero-title { animation: heroTitleIn 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both, hero3dFloat 9s ease-in-out 0.75s infinite; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .page-hero-title, .hero-title { animation: none !important; filter: none !important; }
}

/* ── Disable on mobile for performance ── */
@media (max-width: 768px) {
  .page-hero-title, .hero-title {
    animation-duration: 12s;
    filter: drop-shadow(0 3px 10px rgba(168,85,247,0.22));
  }
}

/* ════════════════════════════════════════════════════════════════
   PRICING GUARANTEE BADGES
   ════════════════════════════════════════════════════════════════ */
.pricing-guarantee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ff-head);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(168,85,247,0.06);
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 50px;
  padding: 10px 24px;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.pricing-guarantee i {
  color: var(--pink);
  margin-right: 4px;
}
body.light-mode .pricing-guarantee {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.2);
  color: rgba(255,255,255,0.7);
}
@media (max-width: 600px) {
  .pricing-guarantee {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 0.8rem;
    border-radius: 14px;
    text-align: center;
  }
  .pg-sep { display: none; }
  .pg-item { display: block; }
}

/* ════════════════════════════════════════════
   FOOTER — DESIGNED BY WEB LAUNCH CO
   ════════════════════════════════════════════ */
.footer-designed-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.fdb-label {
  font-family: var(--ff-head);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fdb-logo {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(1.05);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.fdb-logo:hover {
  transform: scale(1.06);
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(236,72,153,0.4));
}
.fdb-country {
  font-family: var(--ff-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .footer-designed-by { gap: 8px; }
  .fdb-logo { height: 38px; }
  .fdb-label, .fdb-country { font-size: 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════
   GOOGLE REVIEW BADGE — Home hero
   ════════════════════════════════════════════════════════════════ */
.google-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--ff-head);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 20px;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  backdrop-filter: blur(8px);
}
.google-review-badge:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(236,72,153,0.35);
  transform: translateY(-2px);
  color: var(--text);
}
.grb-stars { color: #fbbc05; font-size: 1rem; letter-spacing: 1px; }
.grb-glogo { height: 16px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.85; }
.grb-text { color: var(--muted); }
.grb-arrow { color: var(--pink); font-size: 0.75rem; }
body.light-mode .grb-glogo { filter: none; opacity: 1; }
body.light-mode .google-review-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #1a0a42; }
body.light-mode .grb-text { color: #3b1f6e; }
@media (max-width: 600px) {
  .google-review-badge { font-size: 0.74rem; padding: 8px 14px; gap: 7px; }
  .grb-text { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE
   ════════════════════════════════════════════════════════════════ */

/* ── Google CTA card ── */
.testi-google-section { padding: 64px 0 32px; }
.testi-google-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--s2);
  border: 1px solid rgba(236,72,153,0.2);
  border-radius: 24px;
  padding: 52px 56px;
  overflow: hidden;
}
.tgc-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse at 30% 50%, rgba(236,72,153,0.12) 0%, transparent 65%),
              radial-gradient(ellipse at 70% 50%, rgba(168,85,247,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.tgc-inner { flex: 1; position: relative; z-index: 1; }
.tgc-stars { font-size: 1.8rem; color: #fbbc05; letter-spacing: 3px; margin-bottom: 12px; }
.tgc-heading { font-family: var(--ff-head); font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 12px; line-height: 1.2; }
.tgc-sub { color: var(--muted); line-height: 1.75; font-size: 0.97rem; max-width: 480px; margin-bottom: 28px; }
.tgc-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.tgc-btn { display: inline-flex; align-items: center; gap: 8px; }
.tgc-btn i { font-size: 1rem; }
.tgc-see-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-weight: 600; font-size: 0.88rem;
  color: var(--pink); text-decoration: none;
  transition: gap 0.2s;
}
.tgc-see-link:hover { gap: 10px; }

.tgc-badge-col { flex-shrink: 0; position: relative; z-index: 1; }
.tgc-badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
.tgc-badge-stars { font-size: 1.4rem; color: #fbbc05; letter-spacing: 2px; }
.tgc-badge-label { font-family: var(--ff-head); font-size: 0.72rem; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tgc-badge-glogo { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: 0.7; margin-top: 4px; }
body.light-mode .tgc-badge-glogo { filter: none; opacity: 0.9; }

/* ── Testimonial cards ── */
.testi-cards-section { padding: 32px 0 80px; }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.testi-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.testi-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236,72,153,0.3);
  box-shadow: 0 16px 40px rgba(236,72,153,0.1);
}
.testi-card-top { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--pink-grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-weight: 800; font-size: 0.85rem;
  color: #fff; flex-shrink: 0;
}
.testi-meta { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-family: var(--ff-head); font-weight: 700; font-size: 0.92rem; color: var(--text); }
.testi-biz { font-size: 0.76rem; color: var(--muted); }
.testi-stars { color: #fbbc05; font-size: 0.85rem; letter-spacing: 1px; }
.testi-quote { color: var(--muted); font-size: 0.9rem; line-height: 1.78; font-style: italic; flex: 1; }
.testi-google-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-weight: 600; font-size: 0.78rem;
  color: var(--pink); text-decoration: none;
  transition: gap 0.2s;
}
.testi-google-link:hover { gap: 10px; }

/* ── CTA card ── */
.testi-card--cta {
  background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(168,85,247,0.08));
  border-color: rgba(236,72,153,0.2);
  align-items: center;
  text-align: center;
}
.testi-card--cta:hover { border-color: rgba(236,72,153,0.45); }
.testi-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.testi-cta-icon { font-size: 2.2rem; }
.testi-cta-heading { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 800; color: var(--text); line-height: 1.3; margin: 0; }
.testi-cta-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.7; margin: 0; }
.testi-cta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }

/* ── Trust strip ── */
.testi-trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tts-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 600; font-size: 0.82rem;
  color: var(--muted);
}
.tts-item i { color: var(--pink); }

/* ── Light mode ── */
body.light-mode .testi-google-card { background: linear-gradient(145deg,#2d1458,#1e0d3e); border-color: rgba(236,72,153,0.3); }
body.light-mode .testi-card { background: linear-gradient(145deg,#2d1458,#1e0d3e); border-color: rgba(168,85,247,0.2); }
body.light-mode .testi-card--cta { background: linear-gradient(135deg,rgba(236,72,153,0.15),rgba(168,85,247,0.15)); }

/* ── Trust strip & section header — sit on light page bg, need dark text ── */
body.light-mode .testi-trust-strip {
  border-top-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .tts-item {
  color: #3b1f6e !important;
}
body.light-mode .tts-item i {
  color: var(--pink) !important;
}
body.light-mode .testi-cards-section .section-tag {
  color: var(--pink) !important;
}
body.light-mode .testi-cards-section .section-heading {
  color: #1a0a42 !important;
  -webkit-text-fill-color: unset !important;
}
body.light-mode .testi-cards-section .section-heading .gradient-text {
  background: linear-gradient(135deg,#ec4899,#a855f7);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.light-mode .testi-cards-section .section-subtext {
  color: #4a3278 !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .testi-google-card { padding: 40px 40px; gap: 32px; }
  .tgc-heading { font-size: 1.65rem; }
}
@media (max-width: 860px) {
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-card--cta { grid-column: 1 / -1; }
  .testi-google-card { flex-direction: column; text-align: center; padding: 36px 28px; }
  .tgc-inner { display: flex; flex-direction: column; align-items: center; }
  .tgc-sub { max-width: 100%; }
  .tgc-badge-col { width: 100%; display: flex; justify-content: center; }
}
@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card--cta { grid-column: auto; }
  .testi-google-section { padding: 40px 0 16px; }
  .tgc-heading { font-size: 1.4rem; }
  .tgc-actions { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   SEO KEYWORD CHIPS SECTION
   ════════════════════════════════════════════════════════════════ */
.seo-areas-section {
  padding: 56px 0 64px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.seo-areas-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.seo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
}
.seo-chip {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(168,85,247,0.07);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 50px;
  font-family: var(--ff-head);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}
.seo-chip:hover {
  background: rgba(236,72,153,0.1);
  border-color: rgba(236,72,153,0.3);
  color: var(--text);
}
body.light-mode .seo-areas-section { border-color: rgba(255,255,255,0.08); }
body.light-mode .seo-chip { color: rgba(255,255,255,0.65); }
body.light-mode .seo-chip:hover { color: #fff; }
@media (max-width: 600px) {
  .seo-areas-section { padding: 40px 0 48px; }
  .seo-chip { font-size: 0.72rem; padding: 6px 12px; }
}

/* ════════════════════════════════════════════════════════════════
   PAIN POINT STATS STRIP
   ════════════════════════════════════════════════════════════════ */
.pain-strip-section {
  padding: 56px 0;
  background: linear-gradient(135deg, rgba(236,72,153,0.06) 0%, rgba(168,85,247,0.06) 100%);
  border-top: 1px solid rgba(236,72,153,0.1);
  border-bottom: 1px solid rgba(168,85,247,0.1);
}
.pain-strip-intro {
  text-align: center;
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.65;
}
.pain-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.pain-stat {
  text-align: center;
  padding: 28px 20px;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.25s;
}
.pain-stat:last-child { border-right: none; }
.pain-stat:hover { background: rgba(236,72,153,0.05); }
.pain-stat-num {
  font-family: var(--ff-head);
  font-size: 3rem;
  font-weight: 900;
  background: var(--pink-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 10px;
}
.pain-stat-num span { font-size: 1.8rem; }
.pain-stat-label {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 160px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .pain-strip-grid { grid-template-columns: 1fr 1fr; }
  .pain-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .pain-stat:nth-child(2n) { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .pain-stat:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 500px) {
  .pain-strip-grid { grid-template-columns: 1fr; }
  .pain-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .pain-stat:last-child { border-bottom: none; }
  .pain-stat-num { font-size: 2.4rem; }
}

/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS — 3-STEP PROCESS
   ════════════════════════════════════════════════════════════════ */
.process-section {
  padding: 80px 0;
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-top: 52px;
}
.process-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.process-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236,72,153,0.35);
  box-shadow: 0 20px 48px rgba(236,72,153,0.1);
}
.process-num {
  font-family: var(--ff-head);
  font-size: 3rem;
  font-weight: 900;
  background: var(--pink-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  opacity: 0.35;
  position: absolute;
  top: 20px;
  right: 24px;
}
.process-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(168,85,247,0.15));
  border: 1px solid rgba(236,72,153,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--pink);
}
.process-card h3 {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.process-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.75;
}
.process-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(236,72,153,0.1);
  border: 1px solid rgba(236,72,153,0.2);
  border-radius: 50px;
  font-family: var(--ff-head);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.04em;
  margin-top: 4px;
  align-self: flex-start;
}
.process-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  padding-top: 70px;
  color: var(--pink);
  font-size: 1.2rem;
  opacity: 0.5;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; gap: 16px; }
  .process-connector { padding: 0; transform: rotate(90deg); height: 32px; }
}

/* ════════════════════════════════════════════════════════════════
   URGENCY STRIP — inside pricing
   ════════════════════════════════════════════════════════════════ */
.urgency-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(168,85,247,0.08));
  border: 1px solid rgba(236,72,153,0.25);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 32px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}
.urgency-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  margin-top: 5px;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  animation: urgencyPing 2s ease-in-out infinite;
}
@keyframes urgencyPing {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,0.1); }
}
.urgency-strip strong { color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   CTA POWER LINE
   ════════════════════════════════════════════════════════════════ */
.cta-power-line {
  font-family: var(--ff-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin-bottom: 10px;
  max-width: 480px;
}
body.light-mode .cta-power-line { color: rgba(255,255,255,0.6); }

/* ════════════════════════════════════════════════════════════════
   SERVICES PAGE — WHY IT MATTERS STRIP
   ════════════════════════════════════════════════════════════════ */
.services-why-strip {
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.sws-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.sws-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}
.sws-item i {
  font-size: 1.2rem;
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 2px;
}
.sws-item .fa-ban { color: #ef4444; }
.sws-item .fa-exclamation-triangle { color: #f59e0b; }
.sws-item strong { color: var(--text); display: block; margin-bottom: 2px; }
@media (max-width: 768px) {
  .sws-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE — PROMISE BLOCK
   ════════════════════════════════════════════════════════════════ */
.about-promise-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, rgba(236,72,153,0.07), rgba(168,85,247,0.07));
  border: 1px solid rgba(236,72,153,0.2);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 48px;
}
.apb-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--pink-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  flex-shrink: 0;
}
.apb-body h3 {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.apb-body p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.78;
  margin: 0;
}
body.light-mode .about-promise-block { background: linear-gradient(135deg,rgba(236,72,153,0.1),rgba(168,85,247,0.1)); }
@media (max-width: 600px) {
  .about-promise-block { flex-direction: column; padding: 22px 20px; }
  .pain-strip-intro { font-size: 0.9rem; }
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR — ORGANISED & COMPACT
   ════════════════════════════════════════════════════════════════ */

/* Shrink header padding so nav sits tighter */
#header { padding: 10px 0 !important; }

/* Logo — smaller so it doesn't dominate */
.nav-container .logo img,
.nav-container img[alt="Web Launch Co Logo"] {
  height: 52px !important;
  width: auto !important;
}

/* Logo text — smaller beside compact logo */
.nav-container .logo > span {
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
}

/* Tighten up the link list */
.nav-links {
  gap: 4px !important;
}

/* All nav links — smaller, tighter */
.nav-links a {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 5px 8px !important;
  letter-spacing: 0.01em;
  white-space: nowrap !important;
}

/* Contact pill — compact */
.nav-cta-btn {
  padding: 5px 12px !important;
  font-size: 0.72rem !important;
  border-radius: 100px !important;
}

/* Start Your Project button — compact, no uppercase */
.nav-start-btn {
  padding: 7px 13px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — FIX ALL INVISIBLE TEXT
   ════════════════════════════════════════════════════════════════ */

/* ── Navbar logo "Web Launch" text — nav is always dark, keep text white ── */
body.light-mode .nav-container .logo > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Keep the gradient "Co" span transparent so gradient still shows */
body.light-mode .nav-container .logo > span > span {
  -webkit-text-fill-color: transparent !important;
}

/* ── Pain strip section ── */
body.light-mode .pain-strip-section {
  background: linear-gradient(135deg,rgba(236,72,153,0.05),rgba(168,85,247,0.05)) !important;
  border-color: rgba(168,85,247,0.15) !important;
}
body.light-mode .pain-strip-intro { color: #3b1f6e !important; }
body.light-mode .pain-stat-label  { color: #4a5578 !important; }
body.light-mode .pain-stat { border-right-color: rgba(100,116,200,0.12) !important; }

/* ── Process section ── */
body.light-mode .process-card {
  background: var(--s1) !important;
  border-color: rgba(168,85,247,0.15) !important;
}
body.light-mode .process-card h3 { color: #0f1523 !important; }
body.light-mode .process-card p   { color: #4a5578 !important; }
body.light-mode .process-connector { color: var(--pink) !important; }

/* ── Urgency strip ── */
body.light-mode .urgency-strip {
  background: linear-gradient(135deg,rgba(236,72,153,0.07),rgba(168,85,247,0.07)) !important;
  border-color: rgba(236,72,153,0.2) !important;
  color: #3b1f6e !important;
}
body.light-mode .urgency-strip strong { color: #0f1523 !important; }

/* ── CTA power line (currently white, invisible on light CTA) ── */
body.light-mode .cta-power-line { color: rgba(255,255,255,0.7) !important; }

/* ── SEO chips section ── */
body.light-mode .seo-areas-section { border-color: rgba(100,116,200,0.12) !important; }
body.light-mode .seo-chip {
  background: rgba(168,85,247,0.08) !important;
  border-color: rgba(168,85,247,0.2) !important;
  color: #3b1f6e !important;
}
body.light-mode .seo-chip:hover { color: #0f1523 !important; background: rgba(236,72,153,0.1) !important; }

/* ── Services why strip ── */
body.light-mode .services-why-strip {
  background: var(--s1) !important;
  border-bottom-color: rgba(100,116,200,0.15) !important;
}
body.light-mode .sws-item { color: #4a5578 !important; }
body.light-mode .sws-item strong { color: #0f1523 !important; }

/* ── About promise block ── */
body.light-mode .about-promise-block {
  background: linear-gradient(135deg,rgba(236,72,153,0.08),rgba(168,85,247,0.08)) !important;
  border-color: rgba(236,72,153,0.2) !important;
}
body.light-mode .apb-body h3 { color: #0f1523 !important; }
body.light-mode .apb-body p  { color: #4a5578 !important; }

/* ── Testimonials — force readable text inside dark-bg cards ── */
body.light-mode .testi-google-card,
body.light-mode .testi-card {
  background: linear-gradient(145deg,#2d1458,#1e0d3e) !important;
}
body.light-mode .tgc-heading,
body.light-mode .testi-name { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.light-mode .tgc-sub,
body.light-mode .testi-quote,
body.light-mode .testi-biz,
body.light-mode .tgc-badge-label  { color: rgba(255,255,255,0.72) !important; }
/* tts-item sits on light page bg — uses dark color defined in testi section block above */
body.light-mode .testi-stars      { color: #fbbc05 !important; }

/* ── Google review badge (home hero) ── */
body.light-mode .google-review-badge {
  background: rgba(100,116,200,0.08) !important;
  border-color: rgba(100,116,200,0.2) !important;
  color: #0f1523 !important;
}
body.light-mode .grb-text { color: #4a5578 !important; }

/* ── Portfolio section in light mode ── */
body.light-mode .port-detail-info h2 { color: #0f1523 !important; }
body.light-mode .port-detail-info p  { color: #4a5578 !important; }
body.light-mode .port-detail-features li { color: #4a5578 !important; }

/* ── Process section subtext ── */
body.light-mode .section-subtext { color: #4a5578 !important; }
body.light-mode .section-tag     { color: var(--pink) !important; }

/* ── Who cards ── */
body.light-mode .who-card h3 { color: #0f1523 !important; }
body.light-mode .who-card p  { color: #4a5578 !important; }

/* ── Pricing ── */
body.light-mode .pn-features li { color: #4a5578 !important; }
body.light-mode .pn-pages       { color: #4a5578 !important; }
body.light-mode .pn-addon-item  { color: #3b1f6e !important; }
body.light-mode .pn-why-item    { color: #3b1f6e !important; }
body.light-mode .pricing-guarantee { color: #4a5578 !important; border-color: rgba(168,85,247,0.2) !important; }

/* ── FAQ ── */
body.light-mode .faq-question span:first-child { color: #0f1523 !important; }

/* ── Footer designed-by ── */
body.light-mode .fdb-label  { color: #4a5578 !important; }
body.light-mode .footer-bottom p { color: rgba(255,255,255,0.55) !important; }


/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — DARK CARDS WITH VISIBLE TEXT
   All cards use a consistent deep-purple/navy dark background
   ════════════════════════════════════════════════════════════════ */

/* ── Shared card dark background ── */
body.light-mode .svc-card,
body.light-mode .svc-detail-card,
body.light-mode .who-card,
body.light-mode .pn-card,
body.light-mode .about-value-card,
body.light-mode .about-stat-card,
body.light-mode .about-svc-item,
body.light-mode .about-who-card,
body.light-mode .process-card,
body.light-mode .testi-card,
body.light-mode .testi-google-card,
body.light-mode .contact-option-card,
body.light-mode .contact-form-col,
body.light-mode .faq-item,
body.light-mode .trust-item,
body.light-mode .pn-addon-item,
body.light-mode .port-detail-card {
  background: linear-gradient(145deg, #1a0840, #0d0620) !important;
  border-color: rgba(168,85,247,0.25) !important;
}

/* ── Hover states keep dark but slightly lighter ── */
body.light-mode .svc-card:hover,
body.light-mode .who-card:hover,
body.light-mode .process-card:hover,
body.light-mode .testi-card:hover,
body.light-mode .contact-option-card:hover {
  background: linear-gradient(145deg, #220b52, #130830) !important;
  border-color: rgba(236,72,153,0.45) !important;
}

/* ── Featured pricing card ── */
body.light-mode .pn-featured {
  background: linear-gradient(145deg, #2d1060, #1a0840) !important;
  border-color: rgba(236,72,153,0.5) !important;
}

/* ── Open FAQ item ── */
body.light-mode .faq-item.open {
  background: linear-gradient(145deg, #220b52, #130830) !important;
  border-color: rgba(236,72,153,0.35) !important;
}

/* ── CTA card in testimonials ── */
body.light-mode .testi-card--cta {
  background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(168,85,247,0.2)) !important;
  border-color: rgba(236,72,153,0.35) !important;
}
body.light-mode .testi-card--cta .testi-cta-heading {
  color: #1a0a42 !important;
  -webkit-text-fill-color: #1a0a42 !important;
}
body.light-mode .testi-card--cta .testi-cta-sub {
  color: #4a3070 !important;
}

/* ── Pricing addons & why section ── */
body.light-mode .pn-addons,
body.light-mode .pn-why {
  background: linear-gradient(145deg, #1a0840, #0d0620) !important;
  border-color: rgba(168,85,247,0.2) !important;
}

/* ── About promise block ── */
body.light-mode .about-promise-block {
  background: linear-gradient(135deg, #1a0840, #0d0620) !important;
  border-color: rgba(236,72,153,0.3) !important;
}

/* ── Contact form column ── */
body.light-mode .contact-form-col {
  background: linear-gradient(145deg, #1a0840, #0d0620) !important;
  border-color: rgba(168,85,247,0.25) !important;
}

/* ── Process connector arrows (visible on light bg) ── */
body.light-mode .process-connector { color: var(--pink) !important; opacity: 1 !important; }

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — CARD TEXT — ALL VISIBLE ON DARK CARD BG
   ════════════════════════════════════════════════════════════════ */

/* Headings inside cards */
body.light-mode .svc-card h3,
body.light-mode .svc-detail-body h2,
body.light-mode .who-card h3,
body.light-mode .pn-label,
body.light-mode .pn-price,
body.light-mode .pn-pages,
body.light-mode .about-value-card h4,
body.light-mode .about-stat-num,
body.light-mode .about-stat-label,
body.light-mode .about-svc-item span,
body.light-mode .process-card h3,
body.light-mode .testi-name,
body.light-mode .tgc-heading,
body.light-mode .faq-question span,
body.light-mode .co-body strong,
body.light-mode .pn-addons-title,
body.light-mode .pn-why-title,
body.light-mode .apb-body h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Body / muted text inside cards */
body.light-mode .svc-card p,
body.light-mode .svc-detail-body p,
body.light-mode .svc-detail-list li,
body.light-mode .who-card p,
body.light-mode .pn-features li,
body.light-mode .about-value-card p,
body.light-mode .about-who-card p,
body.light-mode .process-card p,
body.light-mode .testi-quote,
body.light-mode .testi-biz,
body.light-mode .tgc-sub,
body.light-mode .tgc-badge-label,
body.light-mode .faq-answer p,
body.light-mode .faq-answer,
body.light-mode .co-body span,
body.light-mode .pn-addon-item span,
body.light-mode .pn-why-item,
body.light-mode .pn-why-item span,
body.light-mode .apb-body p,
body.light-mode .form-field label,
body.light-mode .contact-intro {
  color: rgba(255,255,255,0.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.75) !important;
}

/* Stars stay gold */
body.light-mode .testi-stars,
body.light-mode .tgc-stars,
body.light-mode .tgc-badge-stars { color: #fbbc05 !important; }

/* Icons inside cards */
body.light-mode .svc-card .svc-icon i,
body.light-mode .about-value-card .about-value-icon i,
body.light-mode .process-icon i,
body.light-mode .co-icon i,
body.light-mode .pn-features li i { color: var(--pink) !important; }

/* Form inputs inside dark card */
body.light-mode .form-field input,
body.light-mode .form-field select,
body.light-mode .form-field textarea {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(168,85,247,0.3) !important;
  color: #fff !important;
}
body.light-mode .form-field input::placeholder,
body.light-mode .form-field textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
body.light-mode .form-field select option { background: #1a0840; color: #fff; }

/* Trust strip items */
body.light-mode .trust-item { color: rgba(255,255,255,0.8) !important; }
body.light-mode .trust-item i { color: var(--pink) !important; }

/* Google badge inside testi card */
body.light-mode .tgc-badge-glogo { filter: brightness(0) invert(1) !important; opacity: 0.8 !important; }

/* Port detail info (not a card class but lives beside dark mock) */
body.light-mode .port-detail-info {
  background: linear-gradient(145deg, #1a0840, #0d0620);
  border-radius: 16px;
  padding: 32px;
}
body.light-mode .port-detail-info h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.light-mode .port-detail-info p  { color: rgba(255,255,255,0.75) !important; }
body.light-mode .port-detail-features li { color: rgba(255,255,255,0.72) !important; }
body.light-mode .port-detail-features li i { color: var(--pink) !important; }

/* ── Portfolio website links — base + light mode fix ── */
.port-netlify-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--pink);
  border: 1px solid rgba(236,72,153,0.35);
  border-radius: 50px;
  padding: 8px 18px;
  background: rgba(236,72,153,0.08);
  transition: background 0.2s, border-color 0.2s, gap 0.2s;
  text-decoration: none;
}
.port-netlify-link:hover {
  gap: 12px;
  background: rgba(236,72,153,0.18);
  border-color: rgba(236,72,153,0.6);
  color: var(--pink);
}
/* Light mode — link sits on a dark card, so keep it bright */
body.light-mode .port-netlify-link {
  color: #f9a8d4 !important;
  border-color: rgba(249,168,212,0.45) !important;
  background: rgba(249,168,212,0.1) !important;
}
body.light-mode .port-netlify-link:hover {
  color: #fff !important;
  border-color: rgba(249,168,212,0.7) !important;
  background: rgba(249,168,212,0.2) !important;
}

/* Pricing addon prices */
body.light-mode .pn-addon-price { color: var(--pink) !important; }
body.light-mode .pn-dollar      { color: rgba(255,255,255,0.6) !important; }
body.light-mode .pn-plus        { color: rgba(255,255,255,0.6) !important; }


/* ── Nav brand text — always white (nav bg is dark in both modes) ── */
.nav-brand-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body.light-mode .nav-brand-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════════
   SERVICE TYPE BADGES (Dynamic / Monitor / Google)
   ════════════════════════════════════════════════════════════════ */
.svc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-family: var(--ff-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.svc-badge-dynamic  { background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3); color: #c084fc; }
.svc-badge-monitor  { background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.3);  color: #4ade80; }
.svc-badge-google   { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; }

/* ════════════════════════════════════════════════════════════════
   STATIC VS DYNAMIC EXPLAINER
   ════════════════════════════════════════════════════════════════ */
.svd-section { padding: 80px 0; background: var(--s1); border-top: 1px solid var(--border); }
.svd-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  margin-top: 48px;
}
.svd-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.svd-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.2); }
.svd-static  { border-color: rgba(236,72,153,0.25); }
.svd-dynamic { border-color: rgba(168,85,247,0.35); background: linear-gradient(145deg, rgba(168,85,247,0.06), var(--s2)); }
.svd-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.svd-static  .svd-icon { background: rgba(236,72,153,0.12); color: var(--pink); border: 1px solid rgba(236,72,153,0.2); }
.svd-dynamic .svd-icon { background: rgba(168,85,247,0.15); color: #c084fc;     border: 1px solid rgba(168,85,247,0.3); }
.svd-card h3 { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 900; color: var(--text); }
.svd-tag {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(236,72,153,0.1);
  border: 1px solid rgba(236,72,153,0.25);
  border-radius: 50px;
  font-family: var(--ff-head);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pink);
  align-self: flex-start;
}
.svd-tag-dynamic { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.3); color: #c084fc; }
.svd-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.75; }
.svd-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.svd-list li { display: flex; align-items: center; gap: 10px; font-size: 0.87rem; color: var(--muted); }
.svd-list li i { color: #22c55e; font-size: 0.75rem; flex-shrink: 0; }
.svd-good-for {
  font-family: var(--ff-head);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 4px;
}
.svd-vs {
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}
.svd-vs span {
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 900;
  color: var(--muted);
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 860px) {
  .svd-grid { grid-template-columns: 1fr; gap: 16px; }
  .svd-vs { padding: 0; }
  .svd-vs span { width: 40px; height: 40px; font-size: 0.85rem; margin: 0 auto; }
  .svd-card { padding: 28px 22px; }
}

/* ════════════════════════════════════════════════════════════════
   AFTER SALES SUPPORT PLANS
   ════════════════════════════════════════════════════════════════ */
.after-sales-section {
  margin-top: 64px;
  padding: 52px 40px;
  background: linear-gradient(145deg, rgba(168,85,247,0.06), rgba(236,72,153,0.04));
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 24px;
}
.as-header { text-align: center; }
.as-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.as-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.as-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.as-card--featured {
  border-color: rgba(236,72,153,0.45);
  background: linear-gradient(145deg, rgba(236,72,153,0.08), var(--s2));
  box-shadow: 0 8px 32px rgba(236,72,153,0.12);
}
.as-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pink-grad);
  color: #fff;
  font-family: var(--ff-head);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  white-space: nowrap;
}
.as-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(168,85,247,0.15));
  border: 1px solid rgba(236,72,153,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--pink);
}
.as-name { font-family: var(--ff-head); font-size: 1rem; font-weight: 800; color: var(--text); }
.as-price {
  font-family: var(--ff-head);
  font-size: 2rem;
  font-weight: 900;
  background: var(--pink-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.as-price span { font-size: 0.9rem; -webkit-text-fill-color: transparent; }
.as-list { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.as-list li { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.as-list li i { color: #22c55e; font-size: 0.7rem; flex-shrink: 0; }
.as-btn {
  display: block;
  text-align: center;
  padding: 12px 20px;
  background: rgba(236,72,153,0.1);
  border: 1px solid rgba(236,72,153,0.3);
  border-radius: 12px;
  font-family: var(--ff-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  margin-top: auto;
}
.as-btn:hover { background: rgba(236,72,153,0.2); border-color: rgba(236,72,153,0.5); }
.as-btn--featured {
  background: var(--pink-grad);
  border-color: transparent;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.as-btn--featured:hover { opacity: 0.9; }
.as-note {
  text-align: center;
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--muted);
}
.as-note i { color: var(--pink); margin-right: 4px; }
@media (max-width: 860px) {
  .as-grid { grid-template-columns: 1fr; }
  .after-sales-section { padding: 36px 20px; }
}
@media (max-width: 600px) {
  .after-sales-section { margin-top: 40px; padding: 28px 16px; }
}

/* ── Light mode fixes for new sections ── */
body.light-mode .svd-card { background: #fff; border-color: rgba(0,0,0,0.1); }
body.light-mode .svd-good-for { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: #4a5578; }
body.light-mode .svd-vs span { background: #f0f2ff; border-color: rgba(0,0,0,0.1); color: #4a5578; }
body.light-mode .as-card { background: #fff; border-color: rgba(0,0,0,0.1); }
body.light-mode .as-card--featured { background: linear-gradient(145deg,rgba(236,72,153,0.08),#fff); }
body.light-mode .after-sales-section { background: linear-gradient(145deg,rgba(168,85,247,0.05),rgba(236,72,153,0.03)); border-color: rgba(168,85,247,0.2); }
body.light-mode .svc-badge-dynamic { color: #7c3aed; }
body.light-mode .svc-badge-monitor { color: #16a34a; }
body.light-mode .svc-badge-google  { color: #2563eb; }
body.light-mode .as-name { color: #1a0a42 !important; -webkit-text-fill-color: #1a0a42 !important; }
body.light-mode .as-list li { color: #4a5578; }
body.light-mode .svd-card p { color: #4a5578; }
body.light-mode .svd-list li { color: #4a5578; }
body.light-mode .svd-card h3 { color: #1a0a42 !important; -webkit-text-fill-color: #1a0a42 !important; }

/* ════════════════════════════════════════════════════════════════
   AFTER SALES SUPPORT PLANS
   ════════════════════════════════════════════════════════════════ */
.after-sales-section {
  margin-top: 64px;
  padding: 52px 40px;
  background: linear-gradient(145deg, rgba(168,85,247,0.06), rgba(236,72,153,0.04));
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 24px;
}
.as-header { text-align: center; }
.as-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.as-card {
  background: var(--s2); border: 1px solid var(--border); border-radius: 20px;
  padding: 32px 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.as-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.as-card--featured { border-color: rgba(236,72,153,0.45); background: linear-gradient(145deg,rgba(236,72,153,0.08),var(--s2)); box-shadow: 0 8px 32px rgba(236,72,153,0.12); }
.as-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--pink-grad); color:#fff; font-family:var(--ff-head); font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:4px 14px; border-radius:50px; white-space:nowrap; }
.as-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,rgba(236,72,153,0.15),rgba(168,85,247,0.15)); border:1px solid rgba(236,72,153,0.2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--pink); }
.as-name { font-family:var(--ff-head); font-size:1rem; font-weight:800; color:var(--text); }
.as-price { font-family:var(--ff-head); font-size:2rem; font-weight:900; background:var(--pink-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.as-price span { font-size:0.9rem; }
.as-list { list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; }
.as-list li { display:flex; align-items:center; gap:9px; font-size:0.84rem; color:var(--muted); line-height:1.5; }
.as-list li i { color:#22c55e; font-size:0.7rem; flex-shrink:0; }
.as-btn { display:block; text-align:center; padding:12px 20px; background:rgba(236,72,153,0.1); border:1px solid rgba(236,72,153,0.3); border-radius:12px; font-family:var(--ff-head); font-size:0.85rem; font-weight:700; color:var(--pink); transition:background 0.2s,border-color 0.2s; margin-top:auto; }
.as-btn:hover { background:rgba(236,72,153,0.2); border-color:rgba(236,72,153,0.5); }
.as-btn--featured { background:var(--pink-grad); border-color:transparent; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.as-btn--featured:hover { opacity:0.9; }
.as-note { text-align:center; margin-top:24px; font-size:0.82rem; color:var(--muted); }
.as-note i { color:var(--pink); margin-right:4px; }
@media (max-width:860px) { .as-grid { grid-template-columns:1fr; } .after-sales-section { padding:36px 20px; } }
@media (max-width:600px) { .after-sales-section { margin-top:40px; padding:28px 16px; } }
body.light-mode .as-card { background:#fff; border-color:rgba(0,0,0,0.1); }
body.light-mode .as-card--featured { background:linear-gradient(145deg,rgba(236,72,153,0.08),#fff); }
body.light-mode .after-sales-section { background:linear-gradient(145deg,rgba(168,85,247,0.05),rgba(236,72,153,0.03)); border-color:rgba(168,85,247,0.2); }
body.light-mode .as-name { color:#1a0a42 !important; -webkit-text-fill-color:#1a0a42 !important; }
body.light-mode .as-list li { color:#4a5578; }

/* ════════════════════════════════════════════════════════════════
   HERO LIVE BAR
   ════════════════════════════════════════════════════════════════ */
.hero-live-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  padding: 6px 14px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.hlb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  animation: urgencyPing 2s ease-in-out infinite;
  flex-shrink: 0;
}
.hlb-sep { opacity: 0.35; }
#visitorCount { color: #fff; font-weight: 800; }
@media (max-width:600px) { .hero-live-bar { font-size:0.68rem; padding:5px 10px; } }

/* ════════════════════════════════════════════════════════════════
   SOCIAL PROOF NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */
.sp-notification {
  position: fixed;
  bottom: 100px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--s2);
  border: 1px solid rgba(236,72,153,0.2);
  border-radius: 14px;
  padding: 12px 16px 12px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  max-width: 300px;
  min-width: 240px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s;
}
.sp-notification.sp-show { transform: translateY(0); opacity: 1; }
.sp-notification.sp-hide { transform: translateY(20px); opacity: 0; }
.sp-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-size: 0.7rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
}
.sp-text { flex: 1; }
.sp-text strong { display: block; font-family: var(--ff-head); font-size: 0.78rem; font-weight: 800; color: var(--text); }
.sp-text span { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.sp-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; transition: color 0.2s; }
.sp-close:hover { color: var(--text); }
body.light-mode .sp-notification { background: #fff; border-color: rgba(236,72,153,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
body.light-mode .sp-text strong { color: #1a0a42; }
body.light-mode .sp-text span { color: #4a5578; }
@media (max-width: 500px) { .sp-notification { left: 12px; right: 12px; max-width: none; bottom: 80px; } }

/* ── Testimonial — verified badge & long review ── */
.testi-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-head);
  font-size: 0.68rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 50px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
}
.testi-verified i { color: #4285F4; }
/* Long review card — allow scroll on very small screens */
@media (max-width: 480px) {
  .testi-quote { max-height: 260px; overflow-y: auto; }
}

/* ══════════════════════════════════════════
   DYNAMIC FEATURES — v3
══════════════════════════════════════════ */

/* ── Textarea Character Counter ── */
.char-counter {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin-top: 5px;
  letter-spacing: 0.3px;
  transition: color 0.3s;
  pointer-events: none;
  user-select: none;
}
.char-counter.char-over { color: #f59e0b; }
body.light-mode .char-counter { color: rgba(0,0,0,0.4); }
body.light-mode .char-counter.char-over { color: #d97706; }

/* ── Live Form Validation Tick ── */
.form-field { position: relative; }
.field-valid-tick {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: #22c55e;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
  pointer-events: none;
  z-index: 3;
}
.form-field.field-is-valid .field-valid-tick {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.form-field.field-is-valid input {
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.08) !important;
}
body.light-mode .form-field.field-is-valid input {
  border-color: rgba(22,163,74,0.5) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.1) !important;
}

/* ── Chat FAB Notification Badge ── */
.fab-dot.notif-badge {
  background: #ef4444 !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: notifPop 0.42s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes notifPop {
  from { transform: scale(0) rotate(-15deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* ── Hero Rotating Business Types ── */
.biz-type-rotate {
  display: inline;
  transition: opacity 0.32s ease, transform 0.32s ease;
  font-style: italic;
}
.biz-type-rotate.biz-type-out {
  opacity: 0;
  transform: translateY(5px);
}

/* ── Stagger Entrance ── */
.stagger-child {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-child.stagger-in {
  opacity: 1;
  transform: none;
}

/* ── Live Home Stat Counters ── */
.home-stat-strip {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 36px 0 12px;
}
.home-stat-item {
  text-align: center;
  min-width: 100px;
}
.home-stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(135deg,#ec4899,#a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.home-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
body.light-mode .home-stat-label { color: rgba(0,0,0,0.5); }

/* ── Testimonial Read More link ── */
.testi-read-more {
  color: #ec4899;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.testi-read-more:hover { color: #a855f7; text-decoration: underline; }
.testi-read-more i { font-size: 0.75rem; margin-left: 3px; }
body.light-mode .testi-read-more { color: #db2777; }

/* ══════════════════════════════════════════
   CONVERSION FEATURES
══════════════════════════════════════════ */

/* ── Guarantee Strip ── */
.guarantee-strip {
  background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(236,72,153,0.06));
  border-top: 1px solid rgba(168,85,247,0.12);
  border-bottom: 1px solid rgba(168,85,247,0.12);
  padding: 32px 0;
}
body.light-mode .guarantee-strip {
  background: linear-gradient(135deg, rgba(168,85,247,0.05), rgba(236,72,153,0.05));
  border-color: rgba(168,85,247,0.15);
}
.guarantee-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.guarantee-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  flex: 1;
  min-width: 200px;
}
.g-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(236,72,153,0.15),rgba(168,85,247,0.15));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: #ec4899;
  flex-shrink: 0;
}
.g-text { display: flex; flex-direction: column; gap: 2px; }
.g-text strong {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
}
.g-text span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
body.light-mode .g-text strong { color: #1a1a2e; }
body.light-mode .g-text span   { color: rgba(0,0,0,0.5); }
.guarantee-divider {
  width: 1px; height: 48px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
body.light-mode .guarantee-divider { background: rgba(0,0,0,0.1); }
@media (max-width: 768px) {
  .guarantee-inner   { gap: 0; flex-wrap: wrap; }
  .guarantee-item    { flex: 0 0 50%; min-width: 0; padding: 16px 18px; box-sizing: border-box; }
  .guarantee-divider { display: none; }
}
@media (max-width: 480px) {
  .guarantee-inner { gap: 0; }
  .guarantee-item  { flex: 0 0 100%; padding: 14px 20px; border-bottom: 1px solid rgba(168,85,247,0.1); }
  .guarantee-item:last-child { border-bottom: none; }
}

/* ── WhatsApp FAB ── */
.whatsapp-fab {
  background: #25D366 !important;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4) !important;
  animation: fabFloat 3.2s ease-in-out infinite !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.1rem;
}
.whatsapp-fab:hover {
  animation-play-state: paused !important;
  transform: scale(1.12) !important;
  box-shadow: 0 10px 36px rgba(37,211,102,0.6) !important;
}

/* ── Mobile Sticky CTA ── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  padding: 10px 16px 14px;
  background: linear-gradient(to top, rgba(11,6,21,0.98) 0%, rgba(11,6,21,0.9) 100%);
  border-top: 1px solid rgba(236,72,153,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease;
}
body.light-mode .mobile-sticky-cta {
  background: linear-gradient(to top, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border-top-color: rgba(168,85,247,0.2);
}
.mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 20px rgba(236,72,153,0.4);
  transition: opacity 0.2s, transform 0.2s;
}
.mobile-cta-btn:active { opacity: 0.85; transform: scale(0.98); }
@media (max-width: 768px) {
  .mobile-sticky-cta { display: block; }
  /* Push content above sticky bar */
  body { padding-bottom: 80px; }
}

/* ── Exit-Intent Popup ── */
.exit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.exit-overlay.show {
  display: flex;
  animation: exitFadeIn 0.35s ease both;
}
@keyframes exitFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.exit-popup {
  background: #111827;
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 20px;
  padding: 40px 36px 32px;
  max-width: 500px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(236,72,153,0.08);
  animation: exitPopIn 0.42s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes exitPopIn {
  from { transform: scale(0.88) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
body.light-mode .exit-popup {
  background: #fff;
  border-color: rgba(168,85,247,0.2);
}
.exit-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.exit-close:hover { color: #fff; }
body.light-mode .exit-close { color: rgba(0,0,0,0.4); }
body.light-mode .exit-close:hover { color: #000; }
.exit-icon { font-size: 2.8rem; margin-bottom: 14px; }
.exit-heading {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}
body.light-mode .exit-heading { color: #1a1a2e; }
.exit-sub {
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  margin: 0 0 20px;
  line-height: 1.6;
}
body.light-mode .exit-sub { color: rgba(0,0,0,0.55); }
.exit-perks {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  text-align: left;
  display: inline-block;
}
.exit-perks li {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.exit-perks li i { color: #22c55e; flex-shrink: 0; }
body.light-mode .exit-perks li { color: rgba(0,0,0,0.65); }
.exit-cta-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 15px; }
.exit-no {
  display: block;
  margin-top: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}
.exit-no:hover { color: rgba(255,255,255,0.55); }
body.light-mode .exit-no { color: rgba(0,0,0,0.35); }
@media (max-width: 480px) {
  .exit-popup { padding: 32px 20px 24px; }
  .exit-heading { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════
   AFTER-SALE SERVICES SECTION
══════════════════════════════════════════ */
.aftersale-section {
  padding: 90px 0 70px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
body.light-mode .aftersale-section { border-top-color: rgba(0,0,0,0.07); }

/* ── Tabs ── */
.ас-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 40px 0 36px;
}
.as-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 30px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  min-width: 140px;
}
.as-tab:hover {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.2);
}
.as-tab.active {
  background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(168,85,247,0.12));
  border-color: rgba(168,85,247,0.4);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.15);
}
.as-tab-label {
  font-size: 0.97rem;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.as-tab.active .as-tab-label { color: #fff; }
.as-tab-price {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
}
.as-tab.active .as-tab-price { color: #a855f7; }
.as-tab-click {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.as-tab.active .as-tab-click { color: #a855f7; }
body.light-mode .as-tab {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.1);
}
body.light-mode .as-tab.active {
  background: linear-gradient(135deg,rgba(236,72,153,0.08),rgba(168,85,247,0.08));
  border-color: rgba(168,85,247,0.35);
}
body.light-mode .as-tab-label { color: rgba(0,0,0,0.5); }
body.light-mode .as-tab.active .as-tab-label { color: #1a1a2e; }
body.light-mode .as-tab-price { color: rgba(0,0,0,0.35); }
body.light-mode .as-tab.active .as-tab-price { color: #a855f7; }

/* ── Panel animation ── */
.as-panel-in { animation: asPanelIn 0.35s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes asPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cards Grid ── */
.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.as-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
              border-color 0.28s,
              box-shadow 0.28s;
  overflow: hidden;
}
.as-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168,85,247,0.25);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25), 0 0 0 1px rgba(168,85,247,0.1);
}
.as-card-popular {
  border-color: rgba(236,72,153,0.3);
  background: linear-gradient(135deg, rgba(236,72,153,0.05), rgba(168,85,247,0.05));
}
.as-popular-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
}
body.light-mode .as-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .as-card:hover {
  border-color: rgba(168,85,247,0.3);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}

.as-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(168,85,247,0.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: #ec4899;
  flex-shrink: 0;
}
.as-card-body { flex: 1; }
.as-card-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
body.light-mode .as-card-name { color: #1a1a2e; }

.as-card-price {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1.2;
}
.as-card-price span {
  font-size: 0.78rem;
  font-weight: 600;
  -webkit-text-fill-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.45);
}
body.light-mode .as-card-price span { -webkit-text-fill-color: rgba(0,0,0,0.4); }

.as-card-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
body.light-mode .as-card-desc { color: rgba(0,0,0,0.5); }

/* ── Badges ── */
.as-card-badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 20px;
}
.as-badge-monthly {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
}
.as-badge-onetime {
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.2);
}

/* ── Footer note ── */
.as-footer-note {
  text-align: center;
  margin-top: 36px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.as-footer-note i { color: #a855f7; }
.as-footer-note strong { color: rgba(255,255,255,0.7); }
body.light-mode .as-footer-note { color: rgba(0,0,0,0.45); }
body.light-mode .as-footer-note strong { color: rgba(0,0,0,0.7); }
.as-enquire-link {
  color: #ec4899;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}
.as-enquire-link:hover { color: #a855f7; }

/* ── Chatbot menu hint ── */
.cb-hint {
  font-size: 0.72rem;
  opacity: 0.45;
  font-style: italic;
  line-height: 1.4;
}


/* ── Invisible text fixes: white text on light backgrounds ── */
body.light-mode .who-section .section-subtext,
body.light-mode .who-section .section-body { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; }
body.light-mode .about-who-area-section .section-heading { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }

/* ── Targeted invisible text + tab hover fixes ── */

/* 1. After-Sale Services button: restore gradient bg in light mode */
body.light-mode .btn-aftersale-alt {
  background: linear-gradient(135deg,#ec4899 0%,#a855f7 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.light-mode .btn-aftersale-alt:hover {
  filter: brightness(1.08);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 2. Contact intro paragraph: dark text on light bg */
body.light-mode .contact-intro {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

/* 3. After-sale tabs: visible text + hover effect in light mode */
body.light-mode .as-tab-label { color: #1a0a42 !important; font-weight: 700 !important; }
body.light-mode .as-tab-price { color: #7c3aed !important; }
body.light-mode .as-tab:hover {
  background: rgba(168,85,247,0.1) !important;
  border-color: rgba(168,85,247,0.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(168,85,247,0.15);
}
body.light-mode .as-tab.active .as-tab-label { color: #1a0a42 !important; font-weight: 800 !important; }
body.light-mode .as-tab.active .as-tab-price { color: #a855f7 !important; }
body.light-mode .as-tab-click { color: rgba(0,0,0,0.5) !important; }
body.light-mode .as-tab.active .as-tab-click { color: #7c3aed !important; }

/* ══════════════════════════════════════════════════════════════
   FULL MOBILE RESPONSIVE — SAMSUNG & ALL PHONES
   Only fixes — nothing else changed
══════════════════════════════════════════════════════════════ */

/* ── Move FABs above the mobile sticky CTA bar ── */
@media (max-width: 768px) {
  .fab-cluster   { bottom: 96px !important; right: 14px; gap: 10px; }
  .chatbot-wrap  { bottom: 96px !important; right: 14px; }
}
@media (max-width: 480px) {
  .fab-cluster   { bottom: 88px !important; right: 10px; }
  .chatbot-wrap  { bottom: 88px !important; right: 10px; }
}

/* ── After-sale CTA buttons — allow wrapping on phones ── */
@media (max-width: 640px) {
  .pn-aftersale-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .btn-aftersale-cta {
    white-space: normal;
    width: 100%;
    max-width: 340px;
    text-align: center;
    justify-content: center;
    padding: 13px 20px;
    font-size: 0.88rem;
  }
}
@media (max-width: 400px) {
  .btn-aftersale-cta { font-size: 0.82rem; padding: 12px 16px; }
}

/* ── Home stat strip — tighter on mobile ── */
@media (max-width: 600px) {
  .home-stat-strip { gap: 24px; padding: 28px 0 10px; }
  .home-stat-num   { font-size: 2rem; }
}
@media (max-width: 400px) {
  .home-stat-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 16px 8px;
  }
  .home-stat-item { min-width: 0; }
}

/* ── After-sale services section — reduce padding ── */
@media (max-width: 768px) {
  .aftersale-section { padding: 60px 0 48px; }
  .ас-tabs { margin: 24px 0 22px; gap: 8px; }
  .as-tab  { padding: 11px 18px; min-width: 120px; }
}
@media (max-width: 480px) {
  .aftersale-section { padding: 48px 0 36px; }
  .ас-tabs { margin: 18px 0 18px; gap: 6px; flex-wrap: wrap; }
  .as-tab  { flex: 1; min-width: 100px; padding: 10px 10px; }
  .as-tab-label { font-size: 0.85rem; }
}

/* ── Guarantee strip — full-width items on tiny screens ── */
@media (max-width: 400px) {
  .guarantee-item { min-width: 0; width: 100%; padding: 10px 16px; }
  .g-icon { width: 38px; height: 38px; font-size: 1rem; }
  .g-text strong { font-size: 0.88rem; }
  .g-text span   { font-size: 0.72rem; }
}

/* ── Pricing cards — full width on small phones ── */
@media (max-width: 400px) {
  .pn-card { padding: 24px 16px 20px; }
  .pn-card-price { font-size: 2.6rem; }
  .pn-addons-grid { grid-template-columns: 1fr; }
}

/* ── Section headings — prevent overflow on tiny screens ── */
@media (max-width: 360px) {
  .section-heading { font-size: 1.35rem !important; }
  .hero-title      { font-size: 1.6rem !important; }
  .hero-sub        { font-size: 0.82rem; }
  .page-hero-title { font-size: 1.5rem !important; }
  .container       { padding: 0 14px; }
}

/* ── Process section — smaller padding on mobile ── */
@media (max-width: 480px) {
  .process-section  { padding: 52px 0; }
  .process-card     { padding: 24px 18px; }
  .process-num      { font-size: 2.4rem; }
}

/* ── Pain strip — tighter on very small screens ── */
@media (max-width: 400px) {
  .pain-strip-section { padding: 36px 0; }
  .pain-stat          { padding: 20px 16px; }
  .pain-stat-num      { font-size: 2rem; }
  .pain-strip-intro   { font-size: 0.88rem; }
}

/* ── Urgency strip — wrap text on small screens ── */
@media (max-width: 480px) {
  .urgency-strip { padding: 14px 16px; font-size: 0.82rem; }
}

/* ── Exit popup — better on small phones ── */
@media (max-width: 360px) {
  .exit-popup    { padding: 28px 16px 20px; border-radius: 16px; }
  .exit-heading  { font-size: 1.2rem; }
  .exit-perks li { font-size: 0.82rem; }
}

/* ── Who section cards — single column on tiny screens ── */
@media (max-width: 400px) {
  .who-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Contact form — better touch targets ── */
@media (max-width: 480px) {
  .contact-form-col input,
  .contact-form-col textarea,
  .contact-form-col select {
    font-size: 16px; /* prevents iOS/Android zoom on focus */
    padding: 13px 14px;
  }
  .contact-form-col .btn { width: 100%; justify-content: center; }
}

/* ── Footer — tighter on small phones ── */
@media (max-width: 400px) {
  .footer-grid { gap: 20px; }
  .footer-section-title { font-size: 0.8rem; }
}

/* ── Prevent horizontal scroll — never apply overflow:hidden to header (breaks fixed nav) ── */
@media (max-width: 768px) {
  section, .container { max-width: 100%; overflow-x: hidden; }
  footer { max-width: 100%; overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
}

/* ── Mobile nav — ensure it always covers full screen ── */
@media (max-width: 900px) {
  .nav-links {
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nav-links.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    z-index: 9998 !important;
  }
  .hamburger {
    z-index: 9999 !important;
    position: relative;
  }
}

/* ══════════════════════════════════════════════════════════════
   DEEP MOBILE FIX — All sections fully responsive
   Tablet (481–768px) · Phone (≤480px) · Tiny (≤400px)
══════════════════════════════════════════════════════════════ */

/* ── TABLET: 2-column grids where 1-column wastes space ── */
@media (max-width: 768px) and (min-width: 481px) {
  .services-grid        { grid-template-columns: 1fr 1fr; }
  .portfolio-grid       { grid-template-columns: 1fr 1fr; }
  .pn-grid              { grid-template-columns: 1fr 1fr; }
  .who-grid             { grid-template-columns: 1fr 1fr; }
  .testi-grid           { grid-template-columns: 1fr 1fr; }
  .as-grid              { grid-template-columns: 1fr 1fr; }
}

/* ── HERO ── */
@media (max-width: 480px) {
  .hero           { padding: 90px 0 52px; }
  .hero-stats     { gap: 14px; }
  .hero-stat-num  { font-size: 1.4rem; }
  .hero-stat-label{ font-size: 0.7rem; }
  .orb-1,.orb-2,.orb-3 { opacity: 0.4; }   /* reduce visual noise on tiny screens */
}
@media (max-width: 360px) {
  .hero { padding: 80px 0 44px; }
}

/* ── PROCESS SECTION ── */
@media (max-width: 480px) {
  .process-section  { padding: 48px 0; }
  .process-card     { padding: 22px 16px; }
  .process-num      { font-size: 2rem; }
  .process-title    { font-size: 1rem; }
  .process-desc     { font-size: 0.82rem; }
}

/* ── PAIN STATS STRIP ── */
@media (max-width: 480px) {
  .pain-strip-section  { padding: 36px 0; }
  .pain-stat           { padding: 18px 14px; }
  .pain-stat-num       { font-size: 1.9rem; }
  .pain-stat-num span  { font-size: 1.3rem; }
  .pain-strip-intro    { font-size: 0.85rem; margin-bottom: 28px; padding: 0 16px; }
}

/* ── PRICING CARDS ── */
@media (max-width: 480px) {
  .pn-card             { padding: 26px 18px 22px; }
  .pn-card-price       { font-size: 2.2rem; }
  .pn-addons           { padding: 20px 14px; }
  .pn-why              { padding: 20px 14px; }
  .pn-addons-grid      { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pn-features li      { font-size: 0.82rem; }
  .pn-card-name        { font-size: 1rem; }
  .pn-bottom-cta       { padding: 24px 16px; }
}
@media (max-width: 360px) {
  .pn-card-price       { font-size: 1.9rem; }
  .pn-addons-grid      { grid-template-columns: 1fr; }
}

/* ── GUARANTEE STRIP — icon/text sizing on small phones ── */
@media (max-width: 480px) {
  .g-icon        { width: 36px; height: 36px; font-size: 0.95rem; }
  .g-text strong { font-size: 0.85rem; }
  .g-text span   { font-size: 0.72rem; }
}

/* ── WHO WE SERVE CARDS ── */
@media (max-width: 480px) {
  .who-section   { padding: 52px 0; }
  .who-card      { padding: 20px 16px; }
  .who-card-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .who-card-title{ font-size: 1rem; }
  .who-card-desc { font-size: 0.82rem; }
}

/* ── SERVICES SECTION ── */
@media (max-width: 480px) {
  .services-section   { padding: 52px 0; }
  .svc-card           { padding: 24px 18px; }
  .svc-detail-card    { padding: 22px 14px; gap: 12px; }
  .svc-detail-icon    { width: 40px; height: 40px; font-size: 1rem; }
  .svc-name           { font-size: 1rem; }
}

/* ── PORTFOLIO SECTION ── */
@media (max-width: 480px) {
  .portfolio-section     { padding: 52px 0; }
  .port-detail-mock      { min-height: 160px; }
  .port-detail-info h3   { font-size: 1.1rem; }
  .port-detail-info p    { font-size: 0.82rem; }
}

/* ── AFTER-SALE SERVICES (old class) ── */
@media (max-width: 480px) {
  .after-sales-section { padding: 36px 14px !important; }
  .as-card             { padding: 18px 16px; }
  .as-card-price       { font-size: 1.3rem; }
  .as-card-name        { font-size: 0.88rem; }
}

/* ── AFTER-SALE SERVICES (new tabs section) ── */
@media (max-width: 480px) {
  .aftersale-section   { padding: 44px 0 34px; }
  .as-tab              { flex: 1; min-width: 0; padding: 9px 8px; }
  .as-tab-label        { font-size: 0.78rem; }
  .as-tab-price        { font-size: 0.65rem; }
  .ас-tabs             { gap: 6px; margin: 16px 0 16px; }
}
@media (max-width: 360px) {
  .as-tab-label { font-size: 0.72rem; }
  .ас-tabs      { gap: 4px; }
}

/* ── TESTIMONIALS ── */
@media (max-width: 480px) {
  .testi-card             { padding: 20px 18px; }
  .testi-google-card      { padding: 28px 18px; }
  .tgc-heading            { font-size: 1.2rem; }
  .tgc-sub                { font-size: 0.82rem; }
  .testi-cards-section    { padding: 24px 0 60px; }
}

/* ── CONTACT SECTION ── */
@media (max-width: 400px) {
  .contact-form-col       { padding: 18px 14px; }
  .contact-form-col input,
  .contact-form-col textarea,
  .contact-form-col select { font-size: 16px; padding: 11px 12px; }
  .co-title               { font-size: 1rem; }
  .co-body span           { font-size: 0.72rem; }
}

/* ── ABOUT PAGE ── */
@media (max-width: 480px) {
  .about-story-grid       { gap: 24px; }
  .about-stat-grid        { gap: 10px; }
  .about-stat-num         { font-size: 2rem; }
  .about-who-card         { padding: 20px 16px; }
  .about-services-grid    { grid-template-columns: 1fr; }
  .about-promise-block    { padding: 24px 16px; }
}

/* ── FAQ SECTION ── */
@media (max-width: 480px) {
  .faq-section     { padding: 52px 0; }
  .faq-question    { font-size: 0.85rem; padding: 14px 16px; }
  .faq-answer-text { font-size: 0.82rem; }
}

/* ── CTA BANNER ── */
@media (max-width: 480px) {
  .cta-banner          { padding: 24px 16px; gap: 18px; }
  .cta-heading         { font-size: 1.3rem; }
  .cta-sub             { font-size: 0.82rem; }
  .cta-main-btn        { padding: 13px 20px; font-size: 0.88rem; }
}

/* ── SITE FOOTER ── */
@media (max-width: 768px) {
  .site-footer           { padding: 48px 0 24px; }
  .footer-logo-img       { height: 52px; }
  .footer-tagline        { font-size: 0.8rem; }
  .footer-section-title  { font-size: 0.78rem; }
  .footer-links a        { font-size: 0.82rem; }
}
@media (max-width: 400px) {
  .site-footer           { padding: 36px 0 20px; }
  .footer-bottom         { flex-direction: column; gap: 8px; text-align: center; font-size: 0.72rem; }
  .footer-social         { justify-content: center; }
}

/* ── SECTION HEADINGS — tighten clamp on small screens ── */
@media (max-width: 480px) {
  .section-heading   { font-size: clamp(1.35rem, 6vw, 1.8rem) !important; }
  .section-subtext   { font-size: 0.85rem !important; }
  .section-center-header { margin-bottom: 28px; }
  .page-hero         { padding: 96px 0 44px; }
  .page-hero-title   { font-size: clamp(1.4rem, 6.5vw, 2rem) !important; }
  .page-hero-sub     { font-size: 0.85rem; }
}

/* ── HERO LIVE BAR ── */
@media (max-width: 400px) {
  .hero-live-bar     { font-size: 0.65rem; padding: 4px 8px; gap: 6px; }
}

/* ── MOBILE STICKY CTA ── */
@media (max-width: 380px) {
  .mobile-cta-btn    { font-size: 0.88rem; padding: 12px; }
  .mobile-sticky-cta { padding: 8px 12px 12px; }
}

/* ── GLOBAL: prevent any element overflowing viewport ── */
@media (max-width: 480px) {
  * { max-width: 100%; }
  /* re-allow specific items that need to exceed 100% of their container */
  .hero-title, .section-heading, .page-hero-title { max-width: none; }
  body { overflow-x: hidden; }
}

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE FIX v2 — Cards, Pages, Text
   Covers: typed-word, cta-content, services detail, portfolio
   detail, after-sale tabs/grid, about page, inline-cta-card,
   320px tiny phone overrides
══════════════════════════════════════════════════════════════ */

/* ── HERO: typed word min-width too large on small phones ── */
@media (max-width: 480px) {
  .typed-word { min-width: 140px; }
}
@media (max-width: 360px) {
  .typed-word { min-width: 100px; }
}

/* ── CTA BANNER: remove min-width constraint on mobile ── */
@media (max-width: 600px) {
  .cta-content { min-width: 0; }
  .cta-banner  { gap: 20px; }
}

/* ── SERVICES DETAIL CARDS: fix 2-column grid on phones ── */
@media (max-width: 600px) {
  .svc-detail-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 16px;
  }
  .svc-detail-icon { width: 48px; height: 48px; font-size: 1.1rem; }
  .svc-detail-body h2 { font-size: 1.15rem; }
  .svc-detail-body p  { font-size: 0.85rem; }
}

/* ── PORTFOLIO DETAIL CARDS: 2-column grid too wide on mobile ── */
@media (max-width: 768px) {
  .port-detail-card,
  .port-detail-card--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 24px;
    margin-bottom: 48px;
    padding-bottom: 48px;
  }
  .port-detail-card--reverse > * { direction: ltr; }
  .port-detail-mock { min-height: 200px; }
  .port-detail-info h2 { font-size: 1.2rem; }
  .port-detail-info p  { font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .port-detail-card,
  .port-detail-card--reverse { gap: 18px; margin-bottom: 36px; padding-bottom: 36px; }
  .port-detail-mock { min-height: 160px; }
}

/* ── AFTER-SALE TABS: overflow on mid-size phones ── */
@media (max-width: 600px) {
  .as-tabs       { gap: 6px; flex-wrap: wrap; }
  .as-tab        { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 10px 10px; }
  .as-tab-label  { font-size: 0.82rem; }
  .as-tab-price  { font-size: 0.65rem; }
}
@media (max-width: 400px) {
  .as-tab       { flex: 1 1 calc(50% - 4px); padding: 8px 6px; }
  .as-tab-label { font-size: 0.75rem; }
}

/* ── AFTER-SALE GRID (new): single column on phones ── */
@media (max-width: 600px) {
  .aftersale-section .as-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── ABOUT PAGE: story grid and stat cards ── */
@media (max-width: 480px) {
  .about-story-grid  { grid-template-columns: 1fr; gap: 24px; }
  .about-stat-grid   { grid-template-columns: 1fr 1fr; gap: 8px; }
  .about-stat-card   { padding: 14px 10px; border-radius: 12px; }
  .about-stat-icon   { width: 32px; height: 32px; font-size: 0.85rem; margin-bottom: 8px; border-radius: 8px; }
  .about-stat-num    { font-size: 1.2rem; margin-bottom: 2px; }
  .about-stat-label  { font-size: 0.7rem; }
  .about-services-grid { grid-template-columns: 1fr; gap: 10px; }
  .about-svc-item    { padding: 16px 14px; font-size: 0.82rem; }
  .about-who-card    { padding: 20px 16px; }
  .about-promise-block { padding: 24px 16px; }
  .about-values-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 360px) {
  .about-stat-grid { grid-template-columns: 1fr; }
}

/* ── INLINE CTA CARDS (portfolio/faq) ── */
@media (max-width: 480px) {
  .inline-cta-card { padding: 28px 18px !important; margin-top: 40px !important; }
}
@media (max-width: 360px) {
  .inline-cta-card { padding: 22px 14px !important; }
}

/* ── 320px TINY PHONES: extra reductions ── */
@media (max-width: 320px) {
  .hero-title      { font-size: 1.35rem !important; }
  .section-heading { font-size: 1.2rem !important; }
  .hero-sub        { font-size: 0.78rem; }
  .pain-stat-num   { font-size: 1.5rem; }
  .pn-card-price   { font-size: 1.75rem; }
  .container       { padding: 0 12px; }
  .btn-lg          { padding: 11px 18px; font-size: 0.84rem; }
}