:root {
    --navy:#0e1d3d; --navy-2:#13264d; --navy-3:#1a3160;
    --ink:#16203a; --body:#4b5670; --muted:#5c6780;
    --orange:#f58c14; --orange-2:#ffa53e; --gold:#ffd9a8;
    --bg:#f6f8fc; --card:#ffffff; --line:#e6eaf2;
    --wa:#25d366;
    --r:18px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-size:16px; line-height:1.6;
  }
  .wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }
  .nav-outer a:focus-visible, .hero a:focus-visible, .prom a:focus-visible, .final a:focus-visible, footer a:focus-visible, .pk.hot a:focus-visible, .pk.hot button:focus-visible, .build-foot a:focus-visible, .quote-box a:focus-visible { outline-color:var(--gold); }
  /* ---------- NAV ---------- */
  .nav-outer { position:sticky; top:0; z-index:100; background:rgba(14,29,61,.97); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06); }
  nav { display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0 12px; }
  .logo { display:flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap; }
  .logo-img { height:48px; width:auto; object-fit:contain; }
  .logo-img-foot { height:75px; width:auto; object-fit:contain; }
  .navlinks { display:flex; gap:14px 24px; justify-content:center; flex-wrap:wrap; }
  .navlinks a { color:#b9c4dd; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.03em; transition:color .2s; }
  .navlinks a:hover { color:#fff; }
  @media (max-width:720px){
    /* Keep navigation usable on phones: a scrollable strip instead of hiding it */
    nav { padding:12px 0 10px; }
    .navlinks {
      flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      justify-content:flex-start; gap:0; width:100%;
      scrollbar-width:none; -ms-overflow-style:none;
      scroll-snap-type:x proximity;
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
              mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    }
    .navlinks::-webkit-scrollbar { display:none; }
    .navlinks a {
      flex:0 0 auto; padding:7px 13px; font-size:12.5px; scroll-snap-align:start;
      border-radius:100px; white-space:nowrap;
    }
    .navlinks a:first-child { margin-left:6px; }
    .navlinks a:last-child { margin-right:20px; }
  }
  @media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
  /* ---------- HERO ---------- */
  .hero {
    background:
      radial-gradient(900px 420px at 85% -10%, rgba(245,140,20,.16), transparent 60%),
      radial-gradient(700px 500px at -10% 110%, rgba(37,99,235,.12), transparent 55%),
      linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 70%, var(--navy-3) 100%);
    color:#fff; text-align:center; padding:88px 0 96px; position:relative; overflow:hidden;
  }
  .hero .wrap { position:relative; z-index:1; }
  .hero-fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
  .hero-grid {
    position:absolute; inset:0; opacity:.18;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  }
  .orb {
    position:absolute; border-radius:50%; filter:blur(2px);
    will-change:transform;
    --ox:0px; --oy:0px;
  }
  .orb-a {
    width:340px; height:340px; top:-80px; right:-60px;
    background:radial-gradient(circle, rgba(245,140,20,.38) 0%, rgba(245,140,20,0) 70%);
    animation:float-a 9s ease-in-out infinite;
  }
  .orb-b {
    width:280px; height:280px; bottom:-40px; left:-70px;
    background:radial-gradient(circle, rgba(90,140,255,.28) 0%, rgba(90,140,255,0) 70%);
    animation:float-b 11s ease-in-out infinite;
  }
  .orb-c {
    width:160px; height:160px; top:42%; left:58%;
    background:radial-gradient(circle, rgba(255,217,168,.22) 0%, transparent 70%);
    animation:float-c 7.5s ease-in-out infinite;
  }
  @keyframes float-a {
    0%,100% { transform:translate(var(--ox), var(--oy)) scale(1); }
    50% { transform:translate(calc(var(--ox) - 28px), calc(var(--oy) + 22px)) scale(1.06); }
  }
  @keyframes float-b {
    0%,100% { transform:translate(var(--ox), var(--oy)) scale(1); }
    50% { transform:translate(calc(var(--ox) + 24px), calc(var(--oy) - 18px)) scale(1.08); }
  }
  @keyframes float-c {
    0%,100% { transform:translate(var(--ox), var(--oy)); opacity:.7; }
    50% { transform:translate(calc(var(--ox) - 16px), calc(var(--oy) - 24px)); opacity:1; }
  }
  .kicker {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); background:rgba(245,140,20,.12); border:1px solid rgba(245,140,20,.35);
    padding:7px 16px; border-radius:100px; margin-bottom:26px;
  }
  .kicker::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
  .hero h1 { font-size:clamp(34px, 5.4vw, 60px); font-weight:800; line-height:1.08; letter-spacing:-.02em; max-width:820px; margin:0 auto; }
  .hero h1 em { font-style:normal; color:var(--orange);
    background:linear-gradient(90deg, var(--orange), var(--orange-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  /* sliding headline words */
  .hero h1 em.rot { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
  .rot-word { display:inline-block; white-space:nowrap; background:linear-gradient(90deg, var(--orange), var(--orange-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:transform .55s cubic-bezier(.22,.9,.3,1), opacity .45s ease; will-change:transform; }
  .rot-word.out { transform:translateY(-115%); opacity:0; }
  .rot-word.pre { transition:none; transform:translateY(115%); opacity:0; }
  @media (prefers-reduced-motion:reduce){ .rot-word { transition:none; } }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .hero .sub { margin:22px auto 0; max-width:600px; font-size:clamp(15.5px, 2.2vw, 18px); color:#c4cfe6; line-height:1.65; }
  .hero .sub .sub-lead { display:block; color:#fff; font-weight:700; font-size:1.06em; letter-spacing:.01em; margin-bottom:6px; }
  .hero .btns { margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn { display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:14px 30px; border-radius:100px; letter-spacing:.01em; transition:transform .15s, box-shadow .15s; }
  .btn:hover { transform:translateY(-1px); }
  .btn-solid { background:linear-gradient(90deg, var(--orange), var(--orange-2)); color:#fff; box-shadow:0 8px 24px rgba(245,140,20,.35); }
  .btn-ghost { border:1.5px solid rgba(255,255,255,.35); color:#fff; }
  .btn-ghost:hover { border-color:#fff; }
  .hero .stats { margin:56px auto 0; display:flex; justify-content:center; gap:0; max-width:640px; border-top:1px solid rgba(255,255,255,.1); padding-top:32px; }
  .stat { flex:1; padding:0 18px; }
  .stat b { display:block; font-size:26px; font-weight:800; color:#fff; letter-spacing:-.01em; }
  .stat span { font-size:12.5px; color:#93a2c4; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
  .stat + .stat { border-left:1px solid rgba(255,255,255,.1); }
  /* ---------- NEWS-TICKER STRIP (below hero) ---------- */
  .ticker { background:#0a1730; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); overflow:hidden; }
  .ticker-track { display:flex; align-items:center; width:max-content; padding:13px 0; animation:ticker-scroll 38s linear infinite; will-change:transform; }
  .ticker:hover .ticker-track { animation-play-state:paused; }
  .tk-item { color:#e9eefb; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
  .tk-sep { color:var(--orange); font-size:10px; margin:0 22px; }
  @keyframes ticker-scroll { to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .ticker-track { animation:none; flex-wrap:wrap; justify-content:center; row-gap:6px; width:auto; } }
  /* ---------- WHAT WE BUILD ---------- */
  .build { background:#fff; border-bottom:1px solid var(--line); }
  .build-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px; }
  .bt {
    background:var(--card); border:1px solid var(--line); border-radius:15px; padding:22px 18px;
    display:flex; flex-direction:column; gap:9px; transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .bt:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,29,61,.09); border-color:rgba(245,140,20,.45); }
  .bt .bic {
    width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg, rgba(245,140,20,.14), rgba(245,140,20,.05)); border:1px solid rgba(245,140,20,.22);
  }
  .bt .bic svg { width:20px; height:20px; }
  .bt h3 { font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--ink); line-height:1.3; }
  .bt p { font-size:13px; color:var(--body); line-height:1.55; }
  @media (max-width:520px){ .build-grid { gap:12px; } .bt { padding:18px 16px; } }
  .build-foot {
    margin-top:26px; text-align:center; background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff;
    border-radius:var(--r); padding:30px 26px;
  }
  .build-foot b { display:block; font-size:17.5px; font-weight:700; letter-spacing:-.01em; }
  .build-foot p { margin:8px auto 20px; max-width:520px; color:#c4cfe6; font-size:14.5px; }
  .build-foot .btn { font-size:14.5px; padding:13px 26px; }
  /* ---------- DIGITAL SERVICES ---------- */
  .dserv { background:linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%); color:#fff; }
  #services { scroll-margin-top:110px; }
  .dserv .sec-head h2 { color:#fff; }
  .dserv .sec-head p { color:#b9c4dd; }
  .dserv .sec-kicker { color:var(--orange-2); }
  .ds-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; }
  .ds {
    position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
    border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; gap:10px;
    transition:transform .18s, background .18s, border-color .18s;
  }
  .ds:hover { transform:translateY(-3px); background:rgba(255,255,255,.08); border-color:rgba(245,140,20,.5); }
  .ds .dsic {
    width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg, rgba(245,140,20,.22), rgba(245,140,20,.06));
    border:1px solid rgba(245,140,20,.32);
  }
  .ds .dsic svg { width:22px; height:22px; color:var(--orange-2); }
  .ds h3 { font-size:16.5px; font-weight:800; letter-spacing:-.015em; color:#fff; line-height:1.3; }
  .ds p { font-size:13.5px; color:#b9c4dd; line-height:1.6; }
  .ds .dsprice {
    margin-top:auto; padding-top:14px; font-size:17px; font-weight:800; color:var(--orange-2);
    letter-spacing:-.01em;
  }
  .ds .dsprice span { display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:#8fa0c4; margin-top:2px; }
  .ds-foot {
    margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:14px; text-align:center;
  }
  .ds-foot .ds-note { width:100%; color:#c4cfe6; font-size:14.5px; max-width:560px; margin:0 auto; }
  .ds-foot .btn { font-size:14.5px; padding:13px 26px; }
  .ds-foot .btn-ghost { border-color:rgba(255,255,255,.4); }
  @media (max-width:520px){ .ds { padding:20px 18px; } }
  /* ---------- STANDALONE SERVICE PRICES ---------- */
  #service-prices { scroll-margin-top:110px; margin-top:38px; }
  .sp-head { text-align:center; max-width:620px; margin:0 auto 26px; }
  .sp-head h3 { font-size:clamp(21px,3vw,27px); font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.2; }
  .sp-head p { margin-top:10px; color:var(--body); font-size:14.5px; }
  .sp-table { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 8px 24px rgba(14,29,61,.05); }
  .sp-row { display:grid; grid-template-columns:1fr auto; gap:10px 24px; align-items:center; padding:18px 24px; border-top:1px solid var(--line); }
  .sp-row:first-child { border-top:0; }
  .sp-row:nth-child(even) { background:#fbfcfe; }
  .sp-name { font-size:15px; font-weight:700; color:var(--ink); }
  .sp-desc { grid-column:1 / -1; font-size:13px; color:var(--body); line-height:1.55; margin-top:-4px; }
  .sp-amt { font-size:16px; font-weight:800; color:var(--orange); white-space:nowrap; text-align:right; }
  .sp-amt span { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .sp-foot { margin-top:18px; text-align:center; }
  .sp-foot p { color:var(--muted); font-size:13px; line-height:1.6; max-width:640px; margin:0 auto 16px; }
  .sp-foot .wa-order-btn { display:inline-block; }
  @media (max-width:520px){ .sp-row { padding:16px 18px; } .sp-amt { font-size:15px; } }
  /* ---------- SECTION SCAFFOLD ---------- */
  section { padding:100px 0; }
  @media (max-width:720px){ section { padding:68px 0; } }
  .sec-head { text-align:center; max-width:620px; margin:0 auto 56px; }
  .sec-kicker { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
  .sec-head h2 { font-size:clamp(26px, 3.6vw, 38px); font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.15; }
  .sec-head p { margin-top:14px; color:var(--body); font-size:16px; }
  /* ---------- declutter additions ---------- */
  .promise-strip { margin-top:46px; padding-top:34px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; }
  .promise-strip span { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink); }
  .promise-strip svg { width:16px; height:16px; color:var(--orange); flex:0 0 auto; }
  .why-note { margin:20px auto 0; text-align:center; font-size:13.5px; color:var(--muted); max-width:560px; }
  .stage-later-line { text-align:center; font-size:14px; color:var(--body); margin:22px 0 0; }
  .stage-later-line a { color:var(--orange); font-weight:700; text-decoration:none; }
  .stage-later-line a:hover { text-decoration:underline; }
  /* ---------- LIVE RESULTS ---------- */
  .live { background:linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-top:1px solid var(--line); }
  #stories { scroll-margin-top:110px; }
  .live-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
  .live-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; box-shadow:0 8px 24px rgba(14,29,61,.05); transition:transform .18s, box-shadow .18s, border-color .18s; }
  .live-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,29,61,.12); border-color:rgba(245,140,20,.45); }
  .live-shot { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0b1a38; border-bottom:1px solid var(--line); }
  .live-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .45s ease; }
  .live-card:hover .live-shot img { transform:scale(1.045); }
  .live-pill { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; background:rgba(14,29,61,.88); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:100px; backdrop-filter:blur(4px); }
  .live-pill .live-dot { margin-right:0; }
  .live-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:20px 22px 22px; }
  .live-tag { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
  .live-body h3 { font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .live-body p { flex:1; font-size:14px; color:var(--body); line-height:1.6; }
  .live-link { margin-top:6px; font-size:14px; font-weight:700; color:var(--orange); }
  .live-card:hover .live-link { text-decoration:underline; }
  .live .voices-note { max-width:none; margin:28px auto 0; text-align:center; font-size:13.5px; }
  @media (max-width:520px){ .live-grid { grid-template-columns:1fr; } }
  /* ---------- OUTCOMES ---------- */
  .grid { display:grid; gap:20px; }
  .g3 { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
  .oc { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; transition:transform .18s, box-shadow .18s; }
  .oc:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(14,29,61,.09); }
  .oc .ic {
    width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg, var(--navy), var(--navy-3)); margin-bottom:18px;
  }
  .oc .ic svg { width:22px; height:22px; }
  .oc h3 { font-size:17px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px; color:var(--ink); }
  .oc p { font-size:14.5px; color:var(--body); line-height:1.6; }
  /* ---------- COMPARISON (template / WordPress / Valmont) ---------- */
  .compare { background:linear-gradient(180deg, var(--bg) 0%, #fff 40%, var(--bg) 100%); border-top:1px solid var(--line); }
  #compare { scroll-margin-top:110px; }
  .cmp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:stretch; }
  .cmp {
    background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:26px 22px 24px; display:flex; flex-direction:column; gap:10px;
    transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .cmp:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(14,29,61,.09); }
  .cmp-us {
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%);
    border:1px solid rgba(245,140,20,.55);
    box-shadow:0 16px 40px rgba(14,29,61,.22);
  }
  .cmp-us:hover { border-color:var(--orange); box-shadow:0 20px 48px rgba(14,29,61,.28); }
  .cmp-tag {
    align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); background:#eef2fa; border:1px solid var(--line); border-radius:100px; padding:5px 12px;
  }
  .cmp-tag-us {
    color:#fff; background:linear-gradient(90deg, var(--orange), var(--orange-2));
    border-color:transparent; box-shadow:0 6px 16px rgba(245,140,20,.35);
  }
  .cmp h3 { font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.25; }
  .cmp-us h3 { color:#fff; }
  .cmp-who { font-size:13.5px; color:var(--body); line-height:1.55; }
  .cmp-us .cmp-who { color:#b9c4dd; }
  .cmp-us .cmp-who em { font-style:normal; color:var(--gold); font-weight:700; }
  .cmp ul { list-style:none; margin:4px 0 0; display:flex; flex-direction:column; gap:8px; flex:1; }
  .cmp li {
    position:relative; padding-left:18px; font-size:13.5px; color:var(--body); line-height:1.5;
  }
  .cmp li::before { content:"–"; position:absolute; left:0; top:0; color:var(--orange); font-weight:800; }
  .cmp-us li { color:#d5def1; }
  .cmp-us li::before { color:var(--gold); }
  .cmp-us li b { color:#fff; }
  .cmp-fit {
    margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
    font-size:13px; color:var(--body); line-height:1.5;
  }
  .cmp-fit b { color:var(--ink); }
  .cmp-us .cmp-fit { border-top-color:rgba(255,255,255,.14); color:#c4cfe6; }
  .cmp-us .cmp-fit b { color:var(--orange-2); }
  .cmp-table-wrap {
    margin-top:34px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--line); border-radius:var(--r); background:#fff;
    box-shadow:0 8px 24px rgba(14,29,61,.05);
  }
  .cmp-table { width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
  .cmp-table th, .cmp-table td { padding:14px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
  .cmp-table thead th {
    background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff;
    font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-top:0;
  }
  .cmp-table thead th:first-child { border-radius:calc(var(--r) - 1px) 0 0 0; }
  .cmp-table thead th:last-child { border-radius:0 calc(var(--r) - 1px) 0 0; color:var(--gold); }
  .cmp-table tbody th { font-weight:700; color:var(--ink); background:#fbfcfe; width:22%; }
  .cmp-table tbody td { color:var(--body); }
  .cmp-table tbody td:last-child { color:var(--ink); background:rgba(245,140,20,.06); }
  .cmp-table tbody td:last-child b { color:var(--navy); }
  .cmp-table tbody tr:nth-child(even) th { background:#f4f7fc; }
  .cmp-table tbody tr:nth-child(even) td:not(:last-child) { background:#fafbfd; }
  .cmp-foot {
    margin-top:34px; text-align:center; background:#fff; border:1px solid var(--line);
    border-radius:var(--r); padding:30px 26px; box-shadow:0 8px 24px rgba(14,29,61,.05);
  }
  .cmp-foot b { display:block; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
  .cmp-foot p { margin:10px auto 22px; max-width:640px; color:var(--body); font-size:14.5px; line-height:1.65; }
  .cmp-btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .cmp-btns .btn { font-size:14.5px; padding:13px 26px; }
  @media (max-width:900px){
    .cmp-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; }
    .cmp-us { order:-1; }
  }
  @media (max-width:520px){
    .cmp { padding:22px 18px; }
    .cmp-table th, .cmp-table td { padding:12px 12px; font-size:12.5px; }
  }

  /* ---------- SHOWCASE ---------- */
  .show { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .case { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
  .cs { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; }
  .cs:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(14,29,61,.09); }
  .cs .top { padding:22px 24px; background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff; }
  .cs .top .tag { font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  .cs .top h3 { font-size:19px; font-weight:700; margin-top:6px; letter-spacing:-.01em; }
  .cs .body { padding:20px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
  .cs .body p { font-size:14px; color:var(--body); line-height:1.6; }
  .cs .feat { display:flex; flex-wrap:wrap; gap:6px; }
  .cs .feat span { font-size:11.5px; font-weight:700; color:var(--navy); background:#eef2fa; border-radius:100px; padding:4px 11px; }
  .cs a { margin-top:auto; align-self:flex-start; font-size:14px; font-weight:700; color:var(--orange); text-decoration:none; }
  .cs a:hover { text-decoration:underline; }
  .cs .cs-preview { display:block; width:100%; max-width:100%; align-self:stretch; }
  .cs-banner { width:100%; background:#0b1a38; border:1px solid #1d2c4d; border-radius:13px; padding:30px 20px; text-align:center; box-shadow:inset 0 2px 12px rgba(0,0,0,.35); }
  .csb-title { color:var(--orange-2); font-weight:800; font-size:17px; letter-spacing:.08em; text-transform:uppercase; }
  .csb-sub { margin-top:5px; font-size:12px; color:#c4cfe6; }
  .cs-preview picture { display:block; aspect-ratio:16 / 9; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); }
  .cs-preview img { display:block; width:100%; height:100%; max-width:100%; object-fit:cover; }
  .cs-preview span { display:block; margin-top:12px; }
  .live-dot { display:inline-block; width:7px; height:7px; background:#2ecc71; border-radius:50%; margin-right:6px; animation:pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
  /* ---------- PACKAGES ---------- */
  .pk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; align-items:stretch; }
  .pk { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; display:flex; flex-direction:column; position:relative; transition:transform .18s, box-shadow .18s, border-color .25s; overflow:hidden; }
  .pk:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(14,29,61,.09); }
  .pk.hot { background:linear-gradient(160deg, var(--navy), var(--navy-3)); border:1px solid var(--orange); }
  .pk .flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--orange),var(--orange-2)); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.1em; padding:5px 16px; border-radius:100px; white-space:nowrap; z-index:2; }
  .pk-summary { display:flex; flex-direction:column; gap:4px; }
  .pk h3 { font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
  .pk.hot h3 { color:var(--orange); }
  .pk .for { font-size:13px; color:var(--muted); margin-top:2px; }
  .pk.hot .for { color:#9db0d6; }
  .pk .price { font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--navy); margin:10px 0 18px; line-height:1; }
  .pk.hot .price { color:#fff; }
  .pk .price span { font-size:15px; font-weight:600; color:var(--muted); letter-spacing:normal; }
  .pk.hot .price span { color:#9db0d6; }
  .tap-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; text-align:center; background:transparent; border:1.5px solid var(--line); color:var(--navy);
    border-radius:100px; padding:13px 16px; font-weight:700; font-size:14px; letter-spacing:.01em; cursor:pointer;
    transition:background .2s, color .2s, border-color .2s, transform .15s; user-select:none;
  }
  .tap-btn:hover { transform:translateY(-1px); border-color:var(--navy); background:var(--navy); color:#fff; }
  .pk.hot .tap-btn { border-color:rgba(255,255,255,.25); color:#fff; }
  .pk.hot .tap-btn:hover { border-color:#fff; background:#fff; color:var(--navy); }
  .tap-btn .arrow { display:inline-flex; align-items:center; transition:transform .25s ease; }
  .tap-btn .arrow svg { width:15px; height:15px; display:block; }
  .pk.open .tap-btn .arrow { transform:rotate(180deg); }

  /* Expand panel */
  .pk-expand { max-height:0; overflow:hidden; transition:max-height .45s ease, opacity .35s ease; opacity:0; }
  .pk.open .pk-expand { max-height:1100px; opacity:1; }
  .pk-expand-inner { padding-top:22px; border-top:1px solid var(--line); margin-top:2px; }
  .pk.hot .pk-expand-inner { border-top-color:rgba(255,255,255,.12); }

  .pk-expand h4 { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin:22px 0 10px; }
  .pk.hot .pk-expand h4 { color:var(--gold); }
  .pk-expand ul { list-style:none; margin:0 0 6px; }
  .pk-expand li { font-size:13.5px; padding:7px 0 7px 24px; position:relative; color:var(--body); line-height:1.45; }
  .pk.hot .pk-expand li { color:#d5def1; }
  .pk-expand li::before { content:"—"; position:absolute; left:0; top:7px; color:var(--orange); font-weight:800; font-size:12px; }
  .pk.hot .pk-expand li::before { color:var(--gold); }

  .retainers { background:rgba(245,140,20,.06); border:1px solid rgba(245,140,20,.15); border-radius:14px; padding:20px 22px; margin:14px 0 18px; }
  .pk.hot .retainers { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
  .retainers h5 { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
  .pk.hot .retainers h5 { color:var(--gold); }
  .retainers .ret-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed rgba(245,140,20,.2); }
  .retainers .ret-row:last-child { border-bottom:none; padding-bottom:0; }
  .retainers .ret-row:first-child { padding-top:0; }
  .retainers .ret-label { font-size:13.5px; font-weight:600; color:var(--ink); }
  .pk.hot .retainers .ret-label { color:#fff; }
  .retainers .ret-price { font-size:13.5px; font-weight:800; color:var(--navy); white-space:nowrap; }
  .pk.hot .retainers .ret-price { color:#fff; }
  /* ---------- INSTALMENT PLAN ---------- */
  .inst-plan { margin:18px 0 14px; }
  .inst-plan h4 { font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
  .pk.hot .inst-plan h4 { color:#fff; }
  .inst-plan > .inst-intro { font-size:13px; color:var(--body); margin-bottom:16px; line-height:1.45; }
  .pk.hot .inst-plan > .inst-intro { color:#d5def1; }
  .inst-steps { display:flex; flex-direction:column; gap:12px; position:relative; padding-left:6px; }
  .inst-steps::before { content:""; position:absolute; left:15px; top:22px; bottom:22px; width:1.5px; background:linear-gradient(180deg, var(--orange), rgba(245,140,20,.12)); border-radius:1px; }
  .pk.hot .inst-steps::before { background:linear-gradient(180deg, var(--gold), rgba(255,217,168,.12)); }
  .inst-row { display:flex; gap:14px; align-items:flex-start; position:relative; }
  .inst-num { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(14,29,61,.15); z-index:1; }
  .pk.hot .inst-num { background:linear-gradient(140deg, var(--orange), var(--orange-2)); box-shadow:0 4px 10px rgba(245,140,20,.25); }
  .inst-row > div:last-child { flex:1; min-width:0; }
  .inst-row b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:3px; }
  .pk.hot .inst-row b { color:#fff; }
  .inst-row p { font-size:12.5px; color:var(--body); line-height:1.4; margin-bottom:4px; }
  .pk.hot .inst-row p { color:#c4cfe6; }
  .inst-amount { font-size:12px; font-weight:700; color:var(--orange); letter-spacing:.02em; }
  .pk.hot .inst-amount { color:var(--gold); }
  @media (max-width:480px){ .inst-row { gap:10px; } .inst-num { width:26px; height:26px; font-size:10px; } .inst-steps::before { left:12px; } }

  .package-actions { display:flex; flex-direction:column; gap:10px; }
  .pay-now-btn, .wa-order-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; text-align:center; text-decoration:none; font-weight:700; font-size:15px; padding:15px 24px; border-radius:100px;
    transition:transform .15s, box-shadow .2s; letter-spacing:.01em;
  }
  .pay-now-btn { background:linear-gradient(90deg, var(--orange), var(--orange-2)); color:#fff; box-shadow:0 8px 22px rgba(245,140,20,.3); }
  .pay-now-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(245,140,20,.4); text-decoration:none; color:#fff; }
  .wa-order-btn { background:linear-gradient(90deg, var(--wa), #20b858); color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.35); }
  .wa-order-btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,211,102,.45); text-decoration:none; color:#fff; }

  /* ---------- STAGE PAYMENT BUTTONS (40 / 40 / 20 plan + full upfront) ---------- */
  .stage-pay { display:flex; flex-direction:column; gap:9px; }
  .stage-pay a {
    display:flex; align-items:center; justify-content:center; width:100%;
    text-align:center; text-decoration:none; padding:13px 14px; border-radius:11px;
    font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; line-height:1.3;
    transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;
  }
  .stage-pay a:hover { transform:translateY(-1px); text-decoration:none; }
  /* Stage 1 — primary "start here" action (orange) */
  .stage-pay a.s1 { background:linear-gradient(90deg, var(--orange), var(--orange-2)); color:#fff; box-shadow:0 8px 20px rgba(245,140,20,.32); }
  .stage-pay a.s1:hover { box-shadow:0 12px 26px rgba(245,140,20,.42); }
  /* Stages 2 & 3 — secondary actions (navy) */
  .stage-pay a.s2, .stage-pay a.s3 { background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff; box-shadow:0 6px 16px rgba(14,29,61,.18); }
  .stage-pay a.s2:hover, .stage-pay a.s3:hover { box-shadow:0 11px 22px rgba(14,29,61,.28); }
  /* Full upfront — outline alternative */
  .stage-pay a.sfull { background:transparent; border:1.5px solid var(--orange); color:var(--orange); }
  .stage-pay a.sfull:hover { background:rgba(245,140,20,.09); }
  /* On the dark "hot" card the navy buttons would vanish, so use a glassy white instead */
  .pk.hot .stage-pay a.s2, .pk.hot .stage-pay a.s3 { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); box-shadow:none; }
  .pk.hot .stage-pay a.s2:hover, .pk.hot .stage-pay a.s3:hover { background:rgba(255,255,255,.18); }
  .pay-note { margin-top:34px; text-align:center; }
  .pay-note .big { font-weight:700; color:var(--ink); font-size:15.5px; }
  .pay-note .small { margin-top:6px; color:var(--muted); font-size:13.5px; }

  .tier-badge { align-self:flex-start; background:#fff4e5; color:#a65700; border:1px solid #ffd29a; border-radius:9px; padding:6px 9px; font-size:11px; font-weight:800; line-height:1.35; }
  .summary-features { list-style:none; margin:16px 0 20px; flex:1; }
  .summary-features li { position:relative; padding:6px 0 6px 22px; color:var(--body); font-size:13.5px; line-height:1.4; }
  .summary-features li::before { content:"—"; position:absolute; left:0; color:var(--orange); font-weight:800; }
  .pk.hot .summary-features li { color:#d5def1; }
  .pk.hot .summary-features li::before { color:var(--gold); }
  .price-reveal { background:rgba(245,140,20,.08); border:1px solid rgba(245,140,20,.2); border-radius:13px; padding:14px 16px; margin:18px 0 14px; }
  .pk.hot .price-reveal { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
  .price-reveal span { display:block; color:var(--body); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
  .pk.hot .price-reveal span { color:#c4cfe6; }
  .price-reveal strong { display:block; margin-top:3px; color:var(--navy); font-size:25px; line-height:1.15; letter-spacing:-.03em; }
  .pk.hot .price-reveal strong { color:#fff; }

  /* ---------- OTHER WEBSITES QUOTE ---------- */
  .quote-box {
    margin-top:38px; background:linear-gradient(140deg, var(--navy), var(--navy-3)); color:#fff;
    border-radius:var(--r); padding:38px 32px; border:1px solid rgba(245,140,20,.28); position:relative; overflow:hidden;
  }
  .quote-box::before { content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border-radius:50%; background:rgba(245,140,20,.13); }
  .quote-box .qk { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
  .quote-box h3 { font-size:clamp(21px,3vw,27px); font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.2; }
  .quote-box > p { margin-top:12px; max-width:600px; color:#c4cfe6; font-size:15px; line-height:1.6; position:relative; }
  .quote-tags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 24px; position:relative; }
  .quote-tags span { font-size:12.5px; font-weight:700; color:#e8eefb; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:6px 14px; }
  .quote-why { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:26px; position:relative; }
  .quote-why div { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:13px; padding:18px; }
  .quote-why b { display:block; color:var(--orange-2); font-size:14px; margin-bottom:6px; }
  .quote-why p { font-size:13px; color:#c4cfe6; line-height:1.55; }
  .quote-box .wa-order-btn { position:relative; }
  .quote-note { margin-top:14px; text-align:center; color:#93a2c4; font-size:13px; position:relative; }
  /* ---------- ADD-ON MENUS ---------- */
  .addons-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:38px; }
  .addon { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:0 8px 24px rgba(14,29,61,.05); }
  .addon h3 { color:var(--navy); font-size:18px; line-height:1.25; margin-bottom:18px; }
  .addon-row { padding:14px 0; border-top:1px solid var(--line); }
  .addon-row:first-of-type { border-top:0; padding-top:0; }
  .addon-row strong { display:block; color:var(--ink); font-size:14px; }
  .addon-row p { color:var(--body); font-size:13px; line-height:1.5; margin-top:3px; }
  .addon-price { display:block; color:var(--orange); font-size:15px; font-weight:800; margin-top:5px; }
  .addon-note { color:var(--muted); font-size:12px; font-weight:700; }
  /* ---------- ROI CALCULATOR & FAQ ---------- */
  .tools { background:#fff; border-top:1px solid var(--line); }
  .tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  .roi-box, .faq-box { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .roi-box h3, .faq-box h3 { font-size:21px; line-height:1.2; color:var(--ink); }
  .tool-intro { color:var(--body); font-size:14px; margin:9px 0 20px; }
  .roi-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .roi-fields label { display:block; color:var(--ink); font-size:12px; font-weight:700; }
  .roi-fields input { width:100%; margin-top:5px; border:1px solid var(--line); border-radius:9px; padding:10px; font:inherit; color:var(--ink); }
  .roi-result { margin-top:18px; padding:16px; border-radius:12px; background:linear-gradient(135deg,var(--navy),var(--navy-3)); color:#fff; }
  .roi-result span { display:block; color:#c4cfe6; font-size:12px; font-weight:700; }
  .roi-result strong { display:block; font-size:27px; line-height:1.2; margin:2px 0; }
  .roi-result small { color:#d5def1; font-size:12px; }
  .faq-item { border-top:1px solid var(--line); }
  .faq-item:first-of-type { border-top:0; }
  .faq-question { width:100%; display:flex; justify-content:space-between; gap:15px; padding:15px 0; background:none; border:0; color:var(--ink); font:inherit; font-size:14px; font-weight:700; text-align:left; cursor:pointer; }
  .faq-question span { color:var(--orange); font-size:20px; line-height:1; transition:transform .2s; }
  .faq-question[aria-expanded="true"] span { transform:rotate(45deg); }
  .faq-answer { color:var(--body); font-size:13.5px; }
  .faq-answer[hidden] { display:none; }
  .faq-answer p { padding:0 0 15px; }
  @media (max-width:720px) { .tools-grid { grid-template-columns:1fr; } .roi-fields { grid-template-columns:1fr; } }
  /* ---------- PROCESS ---------- */
  .proc { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .steps { max-width:660px; margin:0 auto; position:relative; }
  .steps::before { content:""; position:absolute; left:21px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--orange), var(--line)); }
  .st { display:flex; gap:22px; padding:16px 0; position:relative; }
  .st .n { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:linear-gradient(140deg,var(--orange),var(--orange-2)); color:#fff; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(245,140,20,.3); z-index:1; }
  .st h4 { font-size:16.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
  .st p { font-size:14.5px; color:var(--body); margin-top:4px; }
  /* ---------- TRUST STRIP (big-stat section) ---------- */
  .trust { background:var(--bg); }
  .trust .tnarrow { max-width:620px; margin:0 auto; text-align:center; }
  .tbadges { display:flex; flex-wrap:wrap; justify-content:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .tb { display:flex; align-items:center; gap:9px; padding:4px 26px; color:var(--body); font-weight:600; font-size:14.5px; }
  .tb svg { width:17px; height:17px; color:var(--orange); flex:0 0 auto; }
  .tb + .tb { border-left:1px solid var(--line); }
  .tmail { display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:0 10px 20px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; text-decoration:none; font-size:15px; transition:color .2s; }
  .tmail svg { width:17px; height:17px; color:var(--orange); }
  .tmail:hover { color:var(--orange); }
  .tstat { margin-top:36px; }
  .tnum {
    font-size:clamp(56px,9vw,96px); font-weight:800; letter-spacing:-.03em; line-height:1;
    background:linear-gradient(90deg, var(--orange), var(--orange-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tlabel { margin-top:14px; font-size:clamp(16px,2.4vw,20px); font-weight:700; color:var(--ink); }
  .tsub { margin-top:8px; font-size:13.5px; color:var(--muted); font-weight:600; }
  @media (max-width:640px){
    .tbadges { flex-direction:column; align-items:center; gap:6px; }
    .tb + .tb { border-left:none; }
    .tb { padding:2px 10px; }
  }
  /* ---------- FINAL CTA ---------- */
  .final { background:var(--bg); }
  .final .fbox {
    background:#fff; border:1px solid var(--line); border-radius:28px;
    padding:clamp(44px,7vw,70px) clamp(22px,5vw,64px); text-align:center;
    box-shadow:0 24px 60px rgba(14,29,61,.10); max-width:860px; margin:0 auto;
  }
  .final h2 { font-size:clamp(26px,4.2vw,40px); font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.18; }
  .final .hl {
    background:rgba(245,140,20,.13); color:var(--orange); border-radius:10px;
    padding:0 9px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  }
  .final .fsub { margin:18px auto 0; max-width:520px; color:var(--body); font-size:16px; }
  .final .fcheck { list-style:none; margin:34px auto 0; max-width:480px; display:flex; flex-direction:column; gap:13px; }
  .final .fcheck li { display:flex; gap:12px; align-items:flex-start; text-align:left; color:var(--body); font-weight:600; font-size:15.5px; }
  .final .fcheck svg { flex:0 0 auto; width:21px; height:21px; margin-top:1px; color:var(--orange); }
  .final .btns { margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn-ghost-l { border:1.5px solid var(--line); color:var(--ink); }
  .btn-ghost-l:hover { border-color:var(--orange); color:var(--orange); }
  .final .fmicro { margin-top:20px; font-size:13px; color:var(--muted); font-weight:600; }
  /* ---------- FOOTER ---------- */
  footer { background:#0a1428; color:#8b98b8; padding:56px 0 48px; font-size:13.5px; text-align:center; }
  .fpol { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 34px; }
  .fpol a { color:#c4cfe6; text-decoration:none; font-size:14.5px; font-weight:600; transition:color .2s; }
  .fpol a:hover { color:var(--orange-2); }
  .fbrand {
    margin:34px auto 0; display:inline-flex; align-items:center; gap:10px;
    border:1.5px solid rgba(245,140,20,.45); border-radius:100px; padding:9px 22px;
    color:#fff; font-weight:800; font-size:15px; letter-spacing:.01em; background:rgba(245,140,20,.07);
    box-shadow:0 0 0 4px rgba(245,140,20,.07), 0 6px 22px rgba(245,140,20,.16);
  }
  .fbrand img { width:17px; height:17px; display:block; }
  .feyebrow { margin-top:28px; font-size:12.5px; font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:#fff; line-height:1.7; }
  .ftag { margin:12px auto 0; color:#9aa7c6; font-size:14px; max-width:520px; line-height:1.65; }
  .fcopy { margin-top:16px; font-size:13.5px; color:#c4cfe6; font-weight:600; }
  .fcontact { margin-top:7px; font-size:13.5px; color:#9aa7c6; }
  .fcontact a { color:#e8edf7; text-decoration:none; font-weight:600; }
  .fcontact a:hover { color:var(--orange-2); }
  .fpartner { margin-top:14px; font-size:13px; color:#9aa7c6; }
  .fpartner a { color:#c4cfe6; text-decoration:none; font-weight:600; }
  .fpartner a:hover { color:var(--orange-2); }
  /* ---------- SOCIAL & COMMUNITY ---------- */
  .fcommunity { margin-top:26px; display:flex; justify-content:center; }
  .fcommunity a {
    display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    color:#fff; font-weight:700; font-size:14.5px; letter-spacing:.01em;
    border:1.5px solid rgba(37,211,102,.45); border-radius:100px; padding:11px 22px;
    background:rgba(37,211,102,.08);
    box-shadow:0 0 0 4px rgba(37,211,102,.06), 0 6px 22px rgba(37,211,102,.15);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .fcommunity a:hover {
    transform:translateY(-2px); background:rgba(37,211,102,.16);
    box-shadow:0 0 0 4px rgba(37,211,102,.10), 0 10px 28px rgba(37,211,102,.24);
  }
  .fcommunity svg { width:19px; height:19px; color:#25d366; flex:0 0 auto; }
  .fsocial { margin-top:20px; display:flex; justify-content:center; gap:14px; }
  .fsocial a {
    width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    color:#c4cfe6; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .fsocial a:hover { transform:translateY(-3px); color:#fff; }
  .fsocial a:focus-visible { outline-color:var(--gold); }
  .fsocial .wa:hover { background:#25d366; border-color:#25d366; box-shadow:0 8px 20px rgba(37,211,102,.38); }
  .fsocial .fb:hover { background:#1877f2; border-color:#1877f2; box-shadow:0 8px 20px rgba(24,119,242,.38); }
  .fsocial .tk:hover { background:#0b0f1d; border-color:rgba(255,255,255,.38); box-shadow:0 8px 20px rgba(0,0,0,.42); }
  .fsocial svg { width:20px; height:20px; }
  /* ---------- CONTACT INFO ---------- */
  .finfo { margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); }
  .finfo-label { font-size:12px; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:#e8edf7; }
  .finfo-grid { margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; }
  .finfo-grid span, .finfo-grid a { display:inline-flex; align-items:center; gap:9px; color:#9aa7c6; font-size:13.5px; }
  .finfo-grid svg { width:16px; height:16px; color:var(--orange-2); flex:0 0 auto; }
  .finfo-grid a { color:#e8edf7; text-decoration:none; font-weight:600; transition:color .2s; }
  .finfo-grid a:hover { color:var(--orange-2); }
  .finfo-grid a.wa-link { color:#56e488; font-weight:700; }
  .finfo-grid a.wa-link:hover { color:#7cf1a5; }
  @media (max-width:640px){ .finfo-grid { gap:10px 20px; } .fsocial { gap:12px; } }
  .ftrust { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; }
  .ftrust span { display:inline-flex; align-items:center; gap:9px; color:#9aa7c6; font-size:13.5px; font-weight:600; }
  .ftrust svg { width:17px; height:17px; color:var(--orange-2); flex:0 0 auto; }
  .fdisc { margin:28px auto 0; font-size:12.5px; line-height:1.7; color:#68779b; max-width:560px; }
  .fdisc + .fdisc { margin-top:10px; }
  .flegal { margin-top:26px; font-size:13.5px; }
  .flegal summary { cursor:pointer; color:#c4cfe6; font-weight:600; list-style:none; display:inline-flex; align-items:center; gap:8px; transition:color .2s; }
  .flegal summary:hover { color:#fff; }
  .flegal summary::-webkit-details-marker { display:none; }
  .flegal .chev { width:14px; height:14px; transition:transform .2s; }
  .flegal[open] .chev { transform:rotate(180deg); }
  .flegal .flegal-body { margin:16px auto 0; max-width:580px; font-size:12.5px; line-height:1.75; color:#68779b; }
  .flegal .flegal-body p + p { margin-top:10px; }
  .flegal .flegal-body a { color:#c4cfe6; }
  .flegal .flegal-body a:hover { color:var(--orange-2); }
  @media (max-width:640px){ .feyebrow { letter-spacing:.2em; } .ftrust { gap:12px 26px; } }
  /* ---------- FREE QUOTE FORM (Supabase enquiries) ---------- */
  .quote-sec { background:#fff; border-top:1px solid var(--line); }
  #free-quote { scroll-margin-top:110px; }
  .qwrap { max-width:760px; margin:0 auto; background:var(--bg); border:1px solid var(--line); border-radius:24px; padding:clamp(30px,5vw,48px); box-shadow:0 16px 44px rgba(14,29,61,.06); }
  .qhead { text-align:center; margin-bottom:26px; }
  .qhead h2 { font-size:clamp(24px,3.6vw,34px); font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:12px; }
  .qhead p { margin:12px auto 0; max-width:520px; color:var(--body); font-size:15px; }
  .qform { position:relative; }
  .qgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .qfull { margin-top:14px; }
  .qform label { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
  .qform input, .qform select, .qform textarea { width:100%; border:1px solid var(--line); border-radius:11px; padding:12px 14px; font:inherit; font-size:14.5px; color:var(--ink); background:#fff; }
  .qform textarea { resize:vertical; }
  .qform input:focus, .qform select:focus, .qform textarea:focus { outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange); }
  .qhp { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; opacity:0; }
  .qsubmit { display:block; width:100%; margin-top:20px; border:none; cursor:pointer; font-size:15.5px; padding:15px 24px; }
  .qsubmit:disabled { opacity:.75; cursor:wait; transform:none; }
  .qnote { margin-top:12px; text-align:center; font-size:13px; color:var(--muted); }
  .qnote a { color:var(--orange); text-decoration:none; font-weight:600; }
  .qsuccess, .qerror { text-align:center; border-radius:18px; padding:30px 26px; }
  .qsuccess { background:#f0fbf4; border:1px solid #b9e8c9; }
  .qerror { background:#fff7ed; border:1px solid #ffd9a8; margin-top:18px; }
  .qcheck { width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; }
  .qcheck svg { width:26px; height:26px; color:#fff; }
  .qsuccess h3 { font-size:21px; font-weight:800; letter-spacing:-.01em; color:#14532d; }
  .qsuccess p, .qerror p { margin:8px auto 18px; max-width:420px; color:var(--body); font-size:14.5px; }
  .qerror b { display:block; font-size:16px; color:#9a3412; }
  .qsuccess .wa-order-btn, .qerror .wa-order-btn { width:auto; display:inline-flex; padding:13px 26px; font-size:14.5px; }
  @media (max-width:640px){ .qgrid { grid-template-columns:1fr; } }
  /* ---------- FLOATING WHATSAPP WIDGET ---------- */
  .fab {
    position:fixed; left:18px; bottom:18px; z-index:110;
    display:flex; align-items:center; gap:9px;
    background:var(--wa); color:#fff; text-decoration:none; font-weight:700; font-size:14.5px;
    padding:13px 20px; border-radius:100px; box-shadow:0 8px 24px rgba(0,0,0,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .fab:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.33); }
  .fab:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
  .fab svg { flex:0 0 auto; }
  .fab::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:0 0 0 0 rgba(37,211,102,.45); animation:fab-pulse 2.6s infinite;
  }
  @keyframes fab-pulse {
    0% { box-shadow:0 0 0 0 rgba(37,211,102,.45); }
    70% { box-shadow:0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
  }
  .fab-dot {
    position:absolute; top:-5px; right:-2px; min-width:20px; height:20px; padding:0 5px;
    border-radius:20px; background:#e63946; color:#fff; font-size:11.5px; font-weight:800; line-height:1;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none;
  }
  @media (max-width:640px){ .fab { left:14px; bottom:14px; padding:12px 17px; font-size:13.5px; } }
  @media (prefers-reduced-motion:reduce){ .fab::after { animation:none; } }

  /* ---------- live demos strip (#demos) ---------- */
  .demo-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;
  }
  .demo-tile {
    position:relative; display:flex; flex-direction:column;
    background:var(--card); border:1px solid var(--line); border-radius:20px;
    padding:24px 22px 22px; text-decoration:none; overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .demo-tile::before {
    content:""; position:absolute; inset:0 0 auto 0; height:5px; z-index:2;
  }
  .demo-tile.perfume::before { background:linear-gradient(90deg,#7b2d6b,#c05fae); }
  .demo-tile.laundry::before { background:linear-gradient(90deg,#075555,#2bb3b3); }
  .demo-tile.motors::before  { background:linear-gradient(90deg,#0b1626,#c8102e); }
  .demo-tile.jewel::before   { background:linear-gradient(90deg,#221d17,#c9a227); }
  .demo-tile.group::before   { background:linear-gradient(90deg,#101114,#c9cfd9); }
  .demo-tile.clinic::before  { background:linear-gradient(90deg,#154fa8,#4d94ff); }
  .demo-tile.salon::before   { background:linear-gradient(90deg,#9c1d4e,#ff6b9d); }
  .demo-tile.data::before    { background:linear-gradient(90deg,#007a46,#00d97e); }
  .demo-tile.bella::before   { background:linear-gradient(90deg,#5b1e3f,#e91e63); }
  .demo-tile.circle-motors::before { background:linear-gradient(90deg,#8f1d12,#f2a900); }
  .demo-tile.techhub::before  { background:linear-gradient(90deg,#101d3d,#1f8fff); }
  .demo-tile:hover {
    transform:translateY(-5px); border-color:rgba(245,140,20,.42);
    box-shadow:0 18px 44px rgba(14,29,61,.13);
  }
  .demo-tile:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }
  .demo-live {
    position:absolute; top:16px; right:16px;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(34,197,94,.13); border:1px solid rgba(34,197,94,.4);
    color:#15803d; font-size:11px; font-weight:800; letter-spacing:.03em;
    padding:4px 11px; border-radius:100px;
  }
  .demo-live i { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:demo-pulse 2s infinite; }
  @keyframes demo-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
  .demo-shot {
    display:block; margin:-24px -22px 0; height:132px; overflow:hidden;
    background:#101f36; position:relative;
  }
  .demo-shot img { width:100%; height:100%; object-fit:cover; display:block; }
  .demo-shot::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(8,14,26,.30) 0%,rgba(8,14,26,0) 55%);
  }
  .demo-tile strong {
    display:block; margin-top:16px; font-size:17px; font-weight:900;
    color:var(--ink); letter-spacing:-.01em;
  }
  .demo-kind {
    display:block; margin-top:5px; font-size:11.5px; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--orange);
  }
  .demo-note { display:block; margin-top:10px; font-size:13.5px; color:var(--body); line-height:1.55; }
  .demo-go { display:block; margin-top:auto; padding-top:16px; font-size:14px; font-weight:800; color:var(--orange); }
  .demo-cta { margin-top:30px; text-align:center; }
  .demo-disclaimer { margin:14px auto 0; font-size:12.5px; color:var(--muted); line-height:1.55; max-width:520px; }
  .demo-disclaimer a { color:var(--orange); text-decoration:none; font-weight:700; }
  .demo-disclaimer a:hover { text-decoration:underline; }

  /* ---------- shared small note (used in work section) ---------- */
  .voices-note { font-size:12.5px; color:var(--muted); line-height:1.55; max-width:460px; }
  .voices-note a { color:var(--orange); text-decoration:none; font-weight:700; }
  .voices-note a:hover { text-decoration:underline; }

  /* ---------- skip link ---------- */
  .skip {
    position:absolute; left:16px; top:-60px; z-index:200;
    background:var(--orange); color:#fff; font-weight:800; font-size:14px;
    padding:10px 16px; border-radius:10px; text-decoration:none;
  }
  .skip:focus { top:16px; }
  /* ---------- work screenshots ---------- */
  .cs-shot {
    display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
    border:1px solid var(--line); border-radius:13px; background:#0b1a38;
  }
  .cs-shot img { display:block; width:100%; height:100%; object-fit:cover; }
  /* ---------- safer pay actions ---------- */
  .pay-safe-note { font-size:12.5px; color:var(--body); line-height:1.5; margin:0 0 12px; }
  .pk.hot .pay-safe-note { color:#c4cfe6; }
  /* ---------- form errors ---------- */
  .qform input.is-invalid, .qform select.is-invalid, .qform textarea.is-invalid {
    border-color:#c2410c; background:#fff7ed;
  }
  .qfield-err { display:none; margin-top:6px; font-size:12.5px; font-weight:700; color:#9a3412; }
  .qfield-err.show { display:block; }

  /* ---------- MOTION: scroll reveal + soft float ---------- */
  .reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
    will-change:opacity, transform;
  }
  .reveal.in {
    opacity:1;
    transform:none;
  }
  .reveal-d1 { transition-delay:.08s; }
  .reveal-d2 { transition-delay:.16s; }
  .reveal-d3 { transition-delay:.24s; }
  .reveal-d4 { transition-delay:.32s; }

  .float-soft {
    animation:float-soft 5.5s ease-in-out infinite;
    will-change:transform;
  }
  .float-soft-2 { animation-delay:-1.8s; animation-duration:6.8s; }
  .float-soft-3 { animation-delay:-3.2s; animation-duration:7.4s; }
  @keyframes float-soft {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-8px); }
  }

  /* Gentle shimmer on primary CTAs */
  .btn-solid {
    position:relative; overflow:hidden;
  }
  .btn-solid::after {
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform:skewX(-18deg);
    animation:btn-sheen 4.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes btn-sheen {
    0%,70% { left:-120%; }
    100% { left:140%; }
  }

  /* Sticky nav depth on scroll */
  .nav-outer.scrolled {
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    border-bottom-color:rgba(245,140,20,.18);
  }

  /* Card glow pulse on featured package only */
  .pk.hot {
    animation:hot-glow 4.5s ease-in-out infinite;
  }
  @keyframes hot-glow {
    0%,100% { box-shadow:0 0 0 0 rgba(245,140,20,.0); }
    50% { box-shadow:0 12px 36px rgba(245,140,20,.22); }
  }

  /* Live screenshot cards: soft float when in view */
  .live-card.in-view .live-shot img {
    animation:shot-breathe 8s ease-in-out infinite;
  }
  @keyframes shot-breathe {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.03); }
  }

  @media (prefers-reduced-motion:reduce){
    .orb, .float-soft, .float-soft-2, .float-soft-3,
    .btn-solid::after, .pk.hot, .live-card.in-view .live-shot img {
      animation:none !important;
    }
    .reveal {
      opacity:1; transform:none; transition:none;
    }
    .live-card.in-view .live-shot img { transform:none; }
  }
  @media (max-width:720px){
    .orb-a { width:220px; height:220px; }
    .orb-b { width:180px; height:180px; }
    .orb-c { display:none; }
  }

/* ==========================================================================
   Internal links to the generated SEO landing pages
   (see scripts/build-seo-pages.mjs — /websites, /services, /locations and the
   37 pages behind them). The "What we build" and "under one roof" cards used
   to be plain text with no href at all, so none of that catalogue was
   crawlable from the homepage. These are the links that fixed that.
   ========================================================================== */
.bt h3 a, .ds h3 a { color:inherit; text-decoration:none; }
.bt h3 a:hover, .ds h3 a:hover { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.bt-more, .ds-more {
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:12.5px; font-weight:800; letter-spacing:.01em; text-decoration:none;
  transition:gap .16s, color .16s;
}
.bt-more { color:var(--orange); }
.bt-more:hover { gap:10px; text-decoration:underline; }
.ds-more { color:var(--orange-2); }
.ds-more:hover { gap:10px; color:#fff; text-decoration:underline; }

/* The "building something other than a shop?" pills were <span>; they are now
   links to the vertical landing pages, so they keep the pill look and gain a
   hover state. */
.quote-tags a.oq-chip {
  font-size:12.5px; font-weight:700; color:#e8eefb; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:100px; padding:6px 14px; transition:background .16s, border-color .16s, color .16s;
}
.quote-tags a.oq-chip:hover { background:rgba(245,140,20,.22); border-color:var(--orange); color:#fff; }