/* ==========================================================================
   GADGYFIX — Design System
   Precision Device Repair. Repair. Don't Replace.
   ========================================================================== */

:root{
  /* ---- Core palette ---- */
  --ink:        #0B0C0E;   /* near-black graphite — primary dark */
  --ink-2:      #16181B;   /* panel graphite */
  --ink-3:      #212428;   /* raised graphite / borders on dark */
  --ink-4:      #2C3035;   /* hairline on dark */
  --paper:      #FFFFFF;
  --mist:       #F5F6F3;   /* clean light background */
  --mist-2:     #EEF0EC;   /* card wells on light */
  --line:       #E3E5E0;   /* hairline on light */
  --text:       #14161A;   /* body text on light */
  --muted:      #666B6F;   /* secondary text on light */
  --muted-2:    #9BA3A8;   /* secondary text on dark */
  --on-dark:    #F2F3F0;   /* primary text on dark */

  /* ---- Accent: electric lime — used sparingly & intentionally ---- */
  --lime:       #CFFF3D;
  --lime-dark:  #A6DE12;
  --lime-deep:  #7FAE08;
  --lime-ink:   #0B0C0E;   /* text placed on lime */
  --lime-wash:  rgba(207,255,61,0.10);
  --lime-wash-2:rgba(207,255,61,0.18);

  /* ---- Type ---- */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- Shape / rhythm ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --gap: clamp(16px, 3vw, 28px);
  --section-y: clamp(64px, 9vw, 116px);
  --edge: clamp(20px, 5vw, 40px);

  /* ---- Elevation ---- */
  --sh-sm: 0 1px 2px rgba(11,12,14,0.06), 0 1px 1px rgba(11,12,14,0.04);
  --sh-md: 0 8px 24px rgba(11,12,14,0.08);
  --sh-lg: 0 24px 64px rgba(11,12,14,0.16);
  --sh-lime: 0 10px 28px rgba(207,255,61,0.28);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------------------------------- reset -------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  color:var(--text);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
/* Safety-net default: any icon SVG without a more specific size rule falls
   back to 1em (scales with its text context) instead of its raw intrinsic
   size, which in some browsers can be very large and blow out layout. */
svg{ width:1em; height:1em; flex-shrink:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; letter-spacing:-0.02em; line-height:1.08; color:var(--text); }
::selection{ background:var(--lime); color:var(--lime-ink); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------- layout ------------------------------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 var(--edge); }
.wrap-narrow{ max-width:860px; margin:0 auto; padding:0 var(--edge); }
main{ display:block; }
section{ position:relative; }
.section-y{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.section-y-tight{ padding-top:calc(var(--section-y) * .55); padding-bottom:calc(var(--section-y) * .55); }
.on-dark{ background:var(--ink); color:var(--on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:#fff; }
.on-mist{ background:var(--mist); }
.divider{ height:1px; background:var(--line); border:none; }
.divider-dark{ height:1px; background:var(--ink-4); border:none; }

/* ---------------------------------- type --------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--lime-deep);
}
.on-dark .eyebrow{ color:var(--lime); }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--lime); display:inline-block; }

h1,.h1{ font-size:clamp(2.3rem, 5.2vw, 4.2rem); }
h2,.h2{ font-size:clamp(1.7rem, 3.4vw, 2.7rem); }
h3,.h3{ font-size:clamp(1.15rem, 2vw, 1.5rem); }
h4,.h4{ font-size:1rem; }
.lede{ font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--muted); max-width:640px; line-height:1.6; }
.on-dark .lede{ color:var(--muted-2); }
.mono-num{ font-family:var(--f-display); font-variant-numeric:tabular-nums; }

.accent{ color:var(--lime-deep); }
.on-dark .accent{ color:var(--lime); }
mark.hl{ background:none; color:inherit; position:relative; white-space:nowrap; }
mark.hl::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:0.06em; height:0.22em;
  background:var(--lime); z-index:-1; border-radius:2px;
}

.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px,4vw,44px); flex-wrap:wrap; }
.sec-head h2{ max-width:640px; }
.sec-tag{ font-size:0.95rem; color:var(--muted); max-width:420px; }
.on-dark .sec-tag{ color:var(--muted-2); }

/* ---------------------------------- buttons ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-weight:700; font-size:0.92rem;
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:17px 32px; font-size:0.98rem; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--lime); color:var(--lime-ink); box-shadow:var(--sh-lime); }
.btn-primary:hover{ background:var(--lime-dark); transform:translateY(-2px); box-shadow:0 16px 34px rgba(207,255,61,0.34); }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--text); }
.on-dark .btn-outline{ color:#fff; border-color:var(--ink-4); }
.on-dark .btn-outline:hover{ border-color:#fff; }

.btn-ghost-dark{ background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.18); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.32); }

.btn-icon{ width:1em; height:1em; flex:none; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ---------------------------------- nav ----------------------------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:76px; display:flex; align-items:center;
  background:rgba(11,12,14,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:height .22s var(--ease), background .22s var(--ease);
}
.site-nav.scrolled{ height:64px; background:rgba(11,12,14,0.96); }
.nav-inner{ max-width:1280px; margin:0 auto; padding:0 var(--edge); width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{ font-family:var(--f-display); font-weight:700; font-size:1.28rem; letter-spacing:-0.01em; color:#fff; }
.brand-word .fx{ color:var(--lime); }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links > a{ position:relative; padding:10px 15px; border-radius:var(--r-pill); font-size:0.87rem; font-weight:600; color:var(--muted-2); transition:color .15s, background .15s; }
.nav-links > a:hover{ color:#fff; background:rgba(255,255,255,0.06); }
.nav-links > a.current{ color:#fff; }

.nav-drop{ position:relative; }
.nav-drop > button{ display:flex; align-items:center; gap:6px; background:none; border:none; padding:10px 15px; border-radius:var(--r-pill); font-size:0.87rem; font-weight:600; color:var(--muted-2); transition:color .15s, background .15s; }
.nav-drop > button:hover, .nav-drop.open > button{ color:#fff; background:rgba(255,255,255,0.06); }
.nav-drop svg{ width:13px; height:13px; transition:transform .18s var(--ease); }
.nav-drop.open svg{ transform:rotate(180deg); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--ink-2); border:1px solid var(--ink-4); border-radius:var(--r-md);
  padding:10px; min-width:270px; box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-drop.open .nav-drop-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop-panel a{ display:flex; flex-direction:column; gap:1px; padding:10px 12px; border-radius:10px; }
.nav-drop-panel a:hover{ background:rgba(255,255,255,0.06); }
.nav-drop-panel a strong{ font-size:0.86rem; font-weight:600; color:#fff; }
.nav-drop-panel a span{ font-size:0.76rem; color:var(--muted-2); }

.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-phone{ display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:600; color:var(--muted-2); }
.nav-phone svg{ width:15px; height:15px; color:var(--lime); }
.nav-phone:hover{ color:#fff; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:12px; color:#fff; }
.nav-toggle svg{ width:20px; height:20px; }

.mobile-panel{
  position:fixed; inset:76px 0 0 0; z-index:290; background:var(--ink);
  padding:10px var(--edge) 28px; display:none; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.mobile-panel.open{ display:flex; }
.mobile-panel a, .mobile-panel .m-group-label{ padding:15px 6px; font-size:1rem; font-weight:600; color:var(--on-dark); border-bottom:1px solid var(--ink-4); }
.mobile-panel .m-group-label{ color:var(--muted-2); font-size:0.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; border-bottom:none; padding-bottom:4px; padding-top:18px; }
.mobile-panel .m-cta{ margin-top:18px; }
.mobile-panel .m-contact{ margin-top:20px; display:flex; flex-direction:column; gap:10px; color:var(--muted-2); font-size:0.92rem; }
.mobile-panel .m-contact a{ color:var(--on-dark); font-weight:600; border:none; padding:0; }

/* mobile sticky CTA bar */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:250; display:none;
  padding:10px var(--edge); padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,12,14,0.92); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,0.1);
  gap:10px;
}
.sticky-cta .btn{ flex:1; padding:13px 14px; font-size:0.86rem; }

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative; padding-top:calc(76px + clamp(56px,9vw,110px)); padding-bottom:clamp(60px,8vw,96px);
  background:
    radial-gradient(ellipse 70% 60% at 82% 0%, rgba(207,255,61,0.10), transparent 60%),
    linear-gradient(180deg, #0B0C0E 0%, #0E1012 100%);
  overflow:hidden; color:#fff;
}
.hero-grid-lines{
  position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 75% 60% at 60% 20%, #000 30%, transparent 78%);
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hero-copy{ max-width:640px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 10px; border-radius:var(--r-pill);
  background:rgba(207,255,61,0.08); border:1px solid rgba(207,255,61,0.35); color:var(--lime);
  font-size:0.78rem; font-weight:700; letter-spacing:0.02em; margin-bottom:22px;
}
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(207,255,61,0.22); }
.hero h1{ color:#fff; margin-bottom:16px; }
.hero h1 .accentline{ display:block; color:var(--muted-2); font-weight:500; font-size:0.5em; margin-top:10px; letter-spacing:0; }
.hero-sub{ color:var(--muted-2); font-size:clamp(1.02rem,1.6vw,1.18rem); max-width:520px; margin-bottom:28px; line-height:1.6; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:32px; }
.hero-pill{ display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--on-dark); }
.hero-pill svg{ width:16px; height:16px; color:var(--lime); flex:none; }

.hero-visual{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--ink-4); }
.hero-visual .photo-slot{ position:absolute; inset:0; border-radius:0; border:none; }

/* ---- hero video ---- */
.hero-visual.has-video{ background:var(--ink-2); }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.video-toggle{
  position:absolute; top:14px; right:14px; z-index:4; width:36px; height:36px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.2); border-radius:50%; color:#fff;
  background:rgba(11,12,14,0.6); backdrop-filter:blur(8px);
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.video-toggle:hover{ background:rgba(11,12,14,0.85); border-color:rgba(255,255,255,0.45); }
.video-toggle svg{ width:15px; height:15px; }
.video-toggle .vt-play{ display:none; }
.video-toggle[aria-pressed="true"] .vt-pause{ display:none; }
.video-toggle[aria-pressed="true"] .vt-play{ display:flex; }
.hero-visual-tag{
  position:absolute; left:18px; bottom:18px; z-index:3; background:rgba(11,12,14,0.75); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.14); border-radius:var(--r-md); padding:12px 16px; display:flex; align-items:center; gap:10px;
}
.hero-visual-tag .dot-live{ width:8px; height:8px; border-radius:50%; background:var(--lime); animation:pulse 1.8s infinite; flex:none; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(207,255,61,0.5);} 50%{ box-shadow:0 0 0 6px rgba(207,255,61,0);} }
.hero-visual-tag span{ font-size:0.78rem; font-weight:700; color:#fff; }

/* ---------------------------------- photo slot placeholder ---------------- */
.photo-slot{
  position:relative; width:100%; border-radius:var(--r-md); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--ink-2) 0px, var(--ink-2) 14px, var(--ink-3) 14px, var(--ink-3) 28px);
  border:1px solid var(--ink-4);
  display:flex; align-items:flex-end;
  min-height:180px;
}
.photo-slot::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,0) 40%, rgba(11,12,14,0.75) 100%);
}
.photo-slot .ps-label{
  position:relative; z-index:2; padding:14px 16px; font-size:0.72rem; font-weight:700;
  letter-spacing:0.04em; color:var(--lime); text-transform:uppercase; display:flex; align-items:center; gap:8px;
}
.photo-slot .ps-label svg{ width:15px; height:15px; flex:none; }
.photo-slot.square{ aspect-ratio:1/1; }
.photo-slot.wide{ aspect-ratio:16/10; }
.photo-slot.tall{ aspect-ratio:3/4; }
.photo-slot.light{
  background:repeating-linear-gradient(135deg, var(--mist-2) 0px, var(--mist-2) 14px, #E4E6DF 14px, #E4E6DF 28px);
  border-color:var(--line);
}
.photo-slot.light::before{ background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.86) 100%); }
.photo-slot.light .ps-label{ color:var(--lime-deep); }

/* ---------------------------------- real photography ----------------------- */
.photo-real{ position:relative; width:100%; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--mist-2); }
.photo-real img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-real.square{ aspect-ratio:1/1; }
.photo-real.wide{ aspect-ratio:16/10; }
.photo-real.tall{ aspect-ratio:4/5; }
.photo-real.on-dark-frame{ border-color:var(--ink-4); }
.photo-real .pr-tag{
  position:absolute; left:14px; bottom:14px; z-index:2; display:flex; align-items:center; gap:8px;
  background:rgba(11,12,14,0.78); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-pill); padding:7px 13px 7px 10px; font-size:0.72rem; font-weight:700; color:#fff;
}
.photo-real .pr-tag .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; }

/* ---------------------------------- trust bar ------------------------------ */
.trust-bar{ background:var(--ink); border-top:1px solid var(--ink-4); border-bottom:1px solid var(--ink-4); }
.trust-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.trust-cell{ padding:26px 18px; text-align:center; border-left:1px solid var(--ink-4); }
.trust-cell:first-child{ border-left:none; }
.trust-num{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); color:#fff; letter-spacing:-0.02em; }
.trust-num .u{ color:var(--lime); }
.trust-lbl{ font-size:0.72rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-top:4px; }

/* ---------------------------------- device / service cards ----------------- */
.device-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.device-card{
  display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--paper); transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.device-card:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--sh-md); }
.device-icon{ width:44px; height:44px; border-radius:11px; background:var(--ink); display:flex; align-items:center; justify-content:center; color:var(--lime); }
.device-icon svg{ width:22px; height:22px; }
.device-card h3{ font-size:1.02rem; }
.device-card p{ font-size:0.85rem; color:var(--muted); }
.device-card .go{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:var(--text); }
.device-card:hover .go{ color:var(--lime-deep); }
.device-card .go svg{ width:14px; height:14px; transition:transform .18s var(--ease); }
.device-card:hover .go svg{ transform:translateX(3px); }

/* service/repair index cards (rows w/ price) */
.svc-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.svc-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.svc-row:hover{ border-color:var(--ink); background:var(--mist); }
.svc-row-l strong{ display:block; font-size:0.94rem; font-weight:700; }
.svc-row-l span{ font-size:0.8rem; color:var(--muted); }
.svc-row-r{ text-align:right; white-space:nowrap; }
.svc-row-r b{ font-family:var(--f-display); font-size:1rem; }
.svc-row-r em{ display:block; font-style:normal; font-size:0.72rem; color:var(--muted); }

/* ---------------------------------- specialist / board-level section ------- */
.specialist{
  background:var(--ink); color:#fff;
  background-image:radial-gradient(circle at 12% 18%, rgba(207,255,61,0.08), transparent 42%);
}
.specialist-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:center; }
.specialist-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:28px; }
.spec-chip{
  display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid var(--ink-4);
  border-radius:var(--r-sm); background:rgba(255,255,255,0.02); font-size:0.86rem; font-weight:600;
}
.spec-chip svg{ width:16px; height:16px; color:var(--lime); flex:none; }
.specialist-note{
  margin-top:26px; padding:16px 18px; border-left:2px solid var(--lime); background:var(--lime-wash);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:0.92rem; color:var(--on-dark);
}
.specialist-note strong{ color:var(--lime); }

/* ---------------------------------- why grid (pillars) --------------------- */
.pillar-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pillar-card{ padding:26px 22px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); }
.pillar-num{ font-family:var(--f-display); font-size:0.78rem; font-weight:700; color:var(--lime-deep); letter-spacing:0.06em; }
.pillar-card h3{ margin-top:10px; font-size:1.05rem; }
.pillar-card p{ margin-top:8px; font-size:0.87rem; color:var(--muted); }

/* ---------------------------------- gallery / before-after ----------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.gal-card{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper); }
.gal-strip{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.gal-strip .photo-slot{ border-radius:0; border:none; aspect-ratio:1/1; min-height:0; }
.gal-strip .photo-slot:not(:last-child){ border-right:1px solid var(--ink-4); }
.gal-strip .ps-label{ display:none; }
.gal-strip-labels{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:center; padding:7px 0; background:var(--mist); }
.gal-body{ padding:16px 18px 18px; }
.gal-body h4{ font-size:0.92rem; }
.gal-body p{ font-size:0.8rem; color:var(--muted); margin-top:4px; }
.gal-tag{ display:inline-block; margin-top:10px; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--lime-deep); background:var(--lime-wash); padding:4px 9px; border-radius:6px; }

/* ---------------------------------- process steps --------------------------*/
.process-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:step; }
.process-step{ position:relative; padding:26px 22px 22px; border:1px solid var(--line); border-radius:var(--r-md); }
.process-step .pnum{ font-family:var(--f-display); font-size:1.6rem; font-weight:700; color:var(--mist-2); -webkit-text-stroke:1px var(--line); }
.process-step h4{ margin-top:10px; font-size:0.98rem; }
.process-step p{ margin-top:6px; font-size:0.85rem; color:var(--muted); }
.on-dark .process-step{ border-color:var(--ink-4); }
.on-dark .process-step .pnum{ color:var(--ink-3); -webkit-text-stroke:1px var(--ink-4); }
.on-dark .process-step p{ color:var(--muted-2); }

/* ---------------------------------- reviews --------------------------------*/
.rating-hero{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.rating-big{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; }
.stars{ color:var(--lime-deep); font-size:1.05rem; display:inline-flex; align-items:center; gap:3px; }
.stars svg{ width:1em; height:1em; }
.rating-big + div .stars{ font-size:1.25rem; }
.on-dark .stars{ color:var(--lime); }
.rating-meta{ font-size:0.86rem; color:var(--muted); }
.on-dark .rating-meta{ color:var(--muted-2); }

.review-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.review-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:24px; background:var(--paper); display:flex; flex-direction:column; gap:14px; }
.review-card .stars{ font-size:0.9rem; }
.review-card p{ font-size:0.89rem; color:var(--text); line-height:1.65; flex:1; }
.review-who{ display:flex; align-items:center; gap:11px; }
.rev-av{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--lime); display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:0.8rem; flex:none; }
.rev-who-txt strong{ display:block; font-size:0.85rem; font-weight:700; }
.rev-who-txt span{ font-size:0.76rem; color:var(--muted); }
.rev-device-tag{ font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--lime-deep); background:var(--lime-wash); padding:3px 9px; border-radius:6px; align-self:flex-start; }

/* ---------------------------------- buy & sell ------------------------------*/
.buysell-panel{
  border-radius:var(--r-lg); background:var(--ink); color:#fff; overflow:hidden;
  display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch;
  background-image:radial-gradient(ellipse 60% 70% at 90% 30%, rgba(207,255,61,0.10), transparent 60%);
}
.buysell-copy{ padding:clamp(30px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.buysell-copy p{ color:var(--muted-2); max-width:440px; margin:14px 0 26px; font-size:0.98rem; }
.buysell-visual{ position:relative; }
.buysell-visual .photo-slot{ height:100%; border-radius:0; border:none; border-left:1px solid var(--ink-4); }

/* ---------------------------------- final CTA ------------------------------ */
.final-cta{ text-align:center; }
.final-cta h2{ max-width:720px; margin:0 auto 14px; }
.final-cta .lede{ max-width:520px; margin:0 auto 30px; }
.final-cta .cta-row{ justify-content:center; }

/* ---------------------------------- split layout (content + side card) ----- */
.split-layout{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:50px; align-items:start; }
@media (max-width:1080px){ .split-layout{ grid-template-columns:1fr; } }

/* ---------------------------------- generic panel card ---------------------- */
.panel-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,4vw,40px); background:var(--paper); }
.panel-card.on-dark{ border-color:var(--ink-4); background:var(--ink-2); }

/* ---------------------------------- FAQ ------------------------------------ */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:19px 22px; background:var(--paper); border:none; text-align:left; font-weight:700; font-size:0.94rem; }
.faq-q svg{ width:18px; height:18px; flex:none; transition:transform .2s var(--ease); color:var(--muted); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); background:var(--paper); }
.faq-a-in{ padding:0 22px 20px; font-size:0.9rem; color:var(--muted); line-height:1.65; max-width:680px; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---------------------------------- breadcrumb ------------------------------*/
.crumb{ display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--muted); flex-wrap:wrap; }
.crumb a:hover{ color:var(--text); }
.crumb svg{ width:11px; height:11px; opacity:.5; }

/* ---------------------------------- page hero (interior pages) --------------*/
.page-hero{ padding-top:calc(76px + 52px); padding-bottom:52px; background:var(--ink); color:#fff; }
.page-hero h1{ color:#fff; margin-top:16px; }
.page-hero .lede{ color:var(--muted-2); margin-top:14px; }
.page-hero-stats{ display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.page-hero-stats .stat b{ font-family:var(--f-display); font-size:1.3rem; display:block; }
.page-hero-stats .stat span{ font-size:0.74rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }

/* ---------------------------------- quote flow -------------------------------*/
.quote-shell{ max-width:720px; margin:0 auto; }
.qprogress{ display:flex; gap:6px; margin-bottom:34px; }
.qprogress i{ flex:1; height:4px; border-radius:3px; background:var(--line); }
.qprogress i.done{ background:var(--ink); }
.qprogress i.active{ background:var(--lime); }
.qstep{ display:none; }
.qstep.active{ display:block; animation:qin .35s var(--ease); }
@keyframes qin{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.qstep-head{ margin-bottom:22px; }
.qstep-head span{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--lime-deep); }
.qstep-head h2{ margin-top:8px; font-size:clamp(1.4rem,2.6vw,1.9rem); }
.qoptions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.qoption{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  transition:all .16s var(--ease); text-align:center;
}
.qoption:hover{ border-color:var(--ink); }
.qoption.sel{ border-color:var(--ink); background:var(--ink); color:#fff; }
.qoption svg{ width:26px; height:26px; }
.qoption.sel svg{ color:var(--lime); }
.qoption span{ font-size:0.83rem; font-weight:700; }
.qnav{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
.qback{ background:none; border:none; font-weight:700; font-size:0.88rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.qback:hover{ color:var(--text); }
.qfields{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.qfield{ display:flex; flex-direction:column; gap:7px; }
.qfield.full{ grid-column:1/-1; }
.qfield label{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.qfield input, .qfield textarea, .qfield select{
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; background:var(--paper); outline:none;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.qfield input:focus, .qfield textarea:focus, .qfield select:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--lime-wash-2); }
.qsummary{ margin-top:18px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--mist); font-size:0.86rem; color:var(--muted); }
.qsummary b{ color:var(--text); }
.qsuccess{ text-align:center; padding:20px 0; }
.qsuccess .tick{ width:64px; height:64px; border-radius:50%; background:var(--lime); color:var(--lime-ink); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.qsuccess .tick svg{ width:30px; height:30px; }
.qticket{ display:inline-block; margin:16px 0; padding:14px 26px; background:var(--ink); color:var(--lime); font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:.05em; border-radius:var(--r-sm); }

/* -------------------------- valuation form (buy & sell) -------------------- */
.panel-sub{ color:var(--muted); font-size:0.9rem; margin-top:6px; }
.valuation-form{ margin-top:22px; }
.qfield em{ font-style:normal; color:var(--lime-deep); }
.qhint{ font-size:0.76rem; color:var(--muted); line-height:1.5; }
.form-foot{ margin-top:12px; text-align:center; font-size:0.76rem; color:var(--muted); }
.link-lime{ color:var(--text); font-weight:700; border-bottom:1.5px solid var(--lime); }
/* honeypot — hidden from people, visible to naive bots */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:100%; padding:22px 16px; cursor:pointer; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--r-sm); background:var(--mist);
  font:inherit; color:var(--text);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.dropzone:hover{ border-color:var(--ink); }
.dropzone.drag{ border-color:var(--lime-deep); background:var(--lime-wash); }
.dropzone .dz-icon{ display:flex; color:var(--muted); }
.dropzone .dz-icon svg{ width:22px; height:22px; }
.dropzone .dz-main{ font-weight:700; font-size:0.88rem; }
.dropzone .dz-sub{ font-size:0.76rem; color:var(--muted); }

.photo-previews{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:10px; }
.photo-previews:not(:empty){ margin-top:12px; }
.photo-thumb{ position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:var(--mist); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb .rm{
  position:absolute; top:4px; right:4px; width:22px; height:22px; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:none; border-radius:50%; background:rgba(11,12,14,0.78); color:#fff;
}
.photo-thumb .rm svg{ width:12px; height:12px; }
.photo-thumb .rm:hover{ background:var(--ink); }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ background:var(--ink); color:var(--muted-2); padding-top:clamp(50px,6vw,80px); }
.footer-top{ display:grid; grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:32px; padding-bottom:40px; border-bottom:1px solid var(--ink-4); }
.footer-brand p{ font-size:0.87rem; margin:14px 0 18px; max-width:260px; line-height:1.6; }
.footer-contact{ display:flex; flex-direction:column; gap:9px; font-size:0.86rem; }
.footer-contact a:hover{ color:#fff; }
.footer-col h4{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:16px; }
.footer-col a{ display:block; font-size:0.86rem; margin-bottom:11px; transition:color .15s; }
.footer-col a:hover{ color:var(--lime); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:22px 0; font-size:0.8rem; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:34px; height:34px; border:1px solid var(--ink-4); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--lime); color:var(--lime); }
.footer-social svg{ width:15px; height:15px; }

/* ---------------------------------- reveal on scroll ------------------------ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.2s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.32s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.38s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.44s; }

/* ---------------------------------- misc utility ---------------------------- */
.callout-banner{
  display:flex; align-items:center; gap:12px; padding:13px 18px; border-radius:var(--r-sm);
  background:var(--lime-wash); border:1px solid rgba(207,255,61,0.4); font-size:0.85rem; color:var(--ink);
}
.callout-banner svg{ width:17px; height:17px; color:var(--lime-deep); flex:none; }
.callout-banner.show{ display:flex !important; color:#7f1d1d; font-weight:600; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }

/* =============================== RESPONSIVE ================================ */
@media (max-width:1080px){
  .trust-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .trust-cell:nth-child(4){ border-left:none; }
  .device-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pillar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .review-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .specialist-layout{ grid-template-columns:minmax(0,1fr); }
  .buysell-panel{ grid-template-columns:minmax(0,1fr); }
  .buysell-visual{ min-height:220px; }
}
@media (max-width:860px){
  .nav-links, .nav-drop, .nav-phone{ display:none; }
  .nav-right .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-inner{ grid-template-columns:minmax(0,1fr); }
  .hero-visual{ aspect-ratio:16/10; order:-1; }
  /* the workshop clip is shot in portrait — a 16/10 crop would throw most of it
     away, so give it a squarer frame on mobile without eating the whole screen */
  .hero-visual.has-video{ aspect-ratio:1/1; }
  .svc-list{ grid-template-columns:minmax(0,1fr); }
  .qoptions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qfields{ grid-template-columns:minmax(0,1fr); }
  .sticky-cta{ display:flex; }
  body{ padding-bottom:74px; }
}
@media (max-width:680px){
  .trust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-cell:nth-child(3){ border-left:none; }
  .device-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .gallery-grid{ grid-template-columns:minmax(0,1fr); }
  .process-row{ grid-template-columns:minmax(0,1fr); }
  .review-grid{ grid-template-columns:minmax(0,1fr); }
  .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 20px; }
  .footer-brand{ grid-column:1/-1; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .gal-strip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .page-hero-stats{ gap:20px; }
}
@media (max-width:480px){
  .qoptions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer-top{ grid-template-columns:minmax(0,1fr); }
  .cta-row .btn{ width:100%; }
  .rating-hero{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ==========================================================================
   ASK GADGYFIX — chat assistant
   ========================================================================== */
.gf-chat{ position:fixed; right:22px; bottom:22px; z-index:400; font-family:var(--f-body); }

/* ---- launcher: the branded GF agent ---- */
.gf-launcher{
  position:relative; width:62px; height:62px; padding:0; cursor:pointer; display:grid; place-items:center;
  border:none; border-radius:50%; background:var(--lime);
  box-shadow:0 12px 30px rgba(11,12,14,0.30), 0 0 0 6px rgba(207,255,61,0.16);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gf-launcher:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px rgba(11,12,14,0.36), 0 0 0 9px rgba(207,255,61,0.2); }
.gf-launcher-face{ width:40px; height:40px; display:block; }
.gf-launcher-face svg{ width:40px; height:40px; border-radius:12px; }
.gf-launcher-close{ position:absolute; width:22px !important; height:22px !important; color:var(--lime-ink); display:none; }
.gf-chat.open .gf-launcher-face{ display:none; }
.gf-chat.open .gf-launcher-close{ display:block; }
.gf-status{
  position:absolute; right:3px; bottom:3px; width:14px; height:14px; border-radius:50%;
  background:#2ED573; border:2.5px solid var(--paper);
}
.gf-chat.open .gf-status{ display:none; }

/* ---- attention nudge ---- */
.gf-nudge{
  position:absolute; right:76px; bottom:6px; width:250px; cursor:pointer; text-align:left;
  padding:14px 16px; border-radius:16px 16px 4px 16px; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 16px 40px rgba(11,12,14,0.18);
  animation:gfNudge .3s var(--ease);
}
.gf-nudge strong{ display:block; font-family:var(--f-display); font-size:0.9rem; color:var(--text); margin-bottom:3px; }
.gf-nudge span{ display:block; font-size:0.78rem; color:var(--muted); line-height:1.5; }
.gf-nudge-x{
  position:absolute; top:7px; right:7px; width:20px; height:20px; padding:0; display:grid; place-items:center;
  border:none; border-radius:50%; background:var(--mist); color:var(--muted); cursor:pointer;
}
.gf-nudge-x svg{ width:10px; height:10px; }
.gf-nudge-x:hover{ background:var(--ink); color:#fff; }
@keyframes gfNudge{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none;} }

/* ---- panel ---- */
.gf-panel{
  position:absolute; right:0; bottom:78px; width:376px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 70px rgba(11,12,14,0.30);
  animation:gfIn .24s var(--ease);
}
@keyframes gfIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none;} }
/* An author display rule beats the browser's [hidden] styling, so the closed
   panel must be hidden explicitly or it renders open on page load. */
.gf-panel[hidden], .gf-nudge[hidden]{ display:none !important; }

.gf-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; background:var(--ink); }
.gf-head-face{ width:40px; height:40px; flex:none; }
.gf-head-face svg{ width:40px; height:40px; border-radius:12px; }
.gf-head-txt{ flex:1; min-width:0; }
.gf-head-txt strong{ display:block; font-family:var(--f-display); font-size:0.98rem; color:#fff; letter-spacing:-0.01em; }
.gf-head-txt span{ display:flex; align-items:center; gap:6px; font-size:0.73rem; color:var(--muted-2); }
.gf-dot{ width:6px; height:6px; border-radius:50%; background:#2ED573; flex:none; }
.gf-close{ background:none; border:none; color:var(--muted-2); cursor:pointer; padding:5px; display:flex; flex:none; }
.gf-close:hover{ color:#fff; }
.gf-close svg{ width:17px; height:17px; }

.gf-log{
  padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--mist);
  height:336px; max-height:min(336px, 44vh); overflow-y:auto; overscroll-behavior:contain;
}
.gf-msg{ max-width:86%; padding:11px 14px; font-size:0.87rem; line-height:1.55; }
.gf-bot{
  align-self:flex-start; background:var(--paper); color:var(--text);
  border:1px solid var(--line); border-radius:15px 15px 15px 4px;
}
.gf-me{ align-self:flex-end; background:var(--ink); color:#fff; border-radius:15px 15px 4px 15px; }
.gf-msg a{ color:inherit; font-weight:700; border-bottom:1.5px solid var(--lime); }

/* step-by-step answers inside the chat */
.gf-steps{ margin:10px 0 0; padding-left:20px; list-style:decimal; display:flex; flex-direction:column; gap:7px; }
.gf-steps li{ font-size:0.845rem; line-height:1.55; color:var(--text); padding-left:2px; }
.gf-steps li::marker{ color:var(--lime-deep); font-weight:700; }
.gf-note{
  display:block; margin-top:10px; padding:9px 11px; border-left:3px solid var(--lime);
  background:var(--lime-wash); border-radius:0 6px 6px 0; font-size:0.8rem; line-height:1.5; color:var(--muted);
}
.gf-cta{
  display:inline-block; margin-top:11px; padding:9px 15px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff !important; font-size:0.79rem; font-weight:700;
  border-bottom:none !important; transition:background .15s var(--ease);
}
.gf-cta:hover{ background:var(--lime); color:var(--lime-ink) !important; }
.gf-msg.gf-bot{ max-width:92%; }

.gf-typing{ display:flex; gap:4px; align-items:center; padding:14px; }
.gf-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:gfBlink 1.2s infinite; }
.gf-typing span:nth-child(2){ animation-delay:.16s; }
.gf-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes gfBlink{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.gf-chips{ display:flex; flex-wrap:wrap; gap:7px; background:var(--mist); padding:0 14px; }
.gf-chips:not(:empty){ padding:12px 14px 2px; }
.gf-chip{
  cursor:pointer; font-family:inherit; font-size:0.76rem; font-weight:600; color:var(--text); text-align:left;
  padding:8px 13px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.gf-chip:hover{ border-color:var(--ink); background:var(--lime-wash); }

.gf-form{ display:flex; gap:8px; padding:12px 14px 10px; background:var(--mist); border-top:1px solid var(--line); }
.gf-form input{
  flex:1; min-width:0; font-family:inherit; font-size:0.87rem; padding:12px 15px; outline:none;
  border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--paper); color:var(--text);
}
.gf-form input:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--lime-wash-2); }
.gf-send{
  flex:none; width:43px; height:43px; cursor:pointer; display:grid; place-items:center;
  border:none; border-radius:50%; background:var(--lime); color:var(--lime-ink);
  transition:background .15s var(--ease);
}
.gf-send:hover{ background:var(--lime-dark); }
.gf-send svg{ width:18px; height:18px; }
.gf-foot{ margin:0; padding:0 14px 12px; background:var(--mist); font-size:0.68rem; color:var(--muted); text-align:center; }
.gf-foot a{ color:var(--text); font-weight:700; }

/* On mobile the sticky Call / Quote bar owns the bottom of the screen. */
@media (max-width:860px){
  .gf-chat{ right:14px; bottom:88px; }
  .gf-launcher{ width:56px; height:56px; }
  .gf-launcher-face, .gf-launcher-face svg{ width:36px; height:36px; }
  .gf-panel{ width:calc(100vw - 28px); bottom:70px; }
  .gf-log{ height:auto; max-height:42vh; }
  .gf-nudge{ right:68px; width:200px; }
}
@media (max-width:400px){ .gf-nudge{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .gf-panel,.gf-nudge{ animation:none; }
  .gf-typing span{ animation:none; opacity:.5; }
}

/* -------------------- software support: platform tiles + panel ------------- */
.os-tiles{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:26px;
}
.os-tile{
  display:flex; flex-direction:column; gap:5px; padding:20px 18px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.os-tile:hover{ border-color:var(--ink); transform:translateY(-2px); }
.os-tile strong{ font-family:var(--f-display); font-size:0.97rem; color:var(--text); }
.os-tile .os-sub{ font-size:0.8rem; color:var(--muted); line-height:1.5; }
.os-glyph{
  width:42px; height:42px; margin-bottom:8px; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:var(--ink); color:var(--lime);
}
.os-glyph svg{ width:26px; height:26px; }

.sw-visual{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--ink-4); }
.sw-visual svg{ width:100%; height:auto; display:block; }
.sw-visual .pr-tag{
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:8px;
  background:rgba(11,12,14,0.82); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-pill); padding:7px 13px 7px 10px; font-size:0.72rem; font-weight:700; color:#fff;
}
.sw-visual .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; }

@media (max-width:980px){ .os-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .os-tiles{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------- help & guides page --------------------------- */
.guide-jumps{ display:flex; flex-wrap:wrap; gap:9px; }
.guide-jump{
  padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--paper); font-size:0.82rem; font-weight:700; color:var(--text);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.guide-jump:hover{ border-color:var(--ink); background:var(--lime-wash); }

.guide-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.guide-card{
  padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  scroll-margin-top:100px;
}
.guide-cat{
  display:inline-block; margin-bottom:11px; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--lime); font-size:0.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.guide-card h3{ font-size:1.18rem; line-height:1.25; }
.guide-intro{ margin-top:10px; font-size:0.92rem; color:var(--muted); line-height:1.6; }
.guide-steps{ margin:16px 0 0; padding-left:22px; list-style:decimal; display:flex; flex-direction:column; gap:10px; }
.guide-steps li{ font-size:0.9rem; line-height:1.6; color:var(--text); padding-left:3px; }
.guide-steps li::marker{ color:var(--lime-deep); font-weight:700; font-family:var(--f-display); }
.guide-note{
  margin-top:16px; padding:13px 16px; border-left:3px solid var(--lime); background:var(--lime-wash);
  border-radius:0 8px 8px 0; font-size:0.86rem; line-height:1.6; color:var(--muted);
}
/* .btn sets white-space:nowrap, which a long guide label can't fit into on a
   narrow screen — let these wrap instead of overflowing the page. */
.guide-cta{
  margin-top:18px; font-size:0.84rem; padding:12px 20px;
  white-space:normal; text-align:center; max-width:100%;
}
.guide-section:nth-child(even){ background:var(--mist); }

@media (max-width:900px){ .guide-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---- gallery "tested" verification tile (a graphic, not a photo) ---------- */
.test-tile{
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:8px; text-align:center; background:var(--ink); color:#fff;
  background-image:radial-gradient(circle at 50% 30%, rgba(207,255,61,0.13), transparent 62%);
}
.test-tile .tt-badge{
  width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--lime-ink);
  display:flex; align-items:center; justify-content:center;
}
.test-tile .tt-badge svg{ width:14px; height:14px; stroke-width:3; }
.test-tile strong{
  font-family:var(--f-display); font-size:0.68rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.test-tile .tt-checks{ display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.test-tile .tt-checks span{
  display:flex; align-items:center; gap:3px; justify-content:center;
  font-size:0.52rem; font-weight:600; color:var(--muted-2); line-height:1.3;
}
.test-tile .tt-checks svg{ width:8px; height:8px; color:var(--lime); stroke-width:3; flex:none; }
@media (max-width:520px){ .test-tile .tt-checks{ display:none; } }

/* ------------------------------ WhatsApp links ---------------------------- */
.btn-wa{ background:#25D366; color:#0B0C0E; border-color:#25D366; }
.btn-wa:hover{ background:#1FBE5A; border-color:#1FBE5A; }
.btn-wa svg{ width:17px; height:17px; }

.gf-foot{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0 14px 12px; background:var(--mist); font-size:0.7rem; color:var(--muted); text-align:center;
}
.gf-foot a{ color:var(--text); font-weight:700; }
.gf-wa{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-pill);
  background:#25D366; color:#0B0C0E !important; font-size:0.78rem; font-weight:700;
  transition:background .15s var(--ease);
}
.gf-wa:hover{ background:#1FBE5A; }
.gf-wa svg{ width:15px; height:15px; }

.gf-cta-wa{ background:#25D366 !important; color:#0B0C0E !important; display:inline-flex; align-items:center; gap:7px; }
.gf-cta-wa:hover{ background:#1FBE5A !important; color:#0B0C0E !important; }
.gf-cta-wa svg{ width:15px; height:15px; }

/* three buttons is tight on a small phone — let the sticky bar breathe */
@media (max-width:860px){
  .sticky-cta .btn{ padding:12px 8px; font-size:0.78rem; gap:6px; }
  .sticky-cta .btn svg{ width:15px; height:15px; }
}
@media (max-width:380px){
  .sticky-cta .btn-wa span,.sticky-cta .btn-outline span{ display:none; }
}