/* DingoTag design system — one source of truth for every page.
   Palette contrast was measured, not guessed:
     #1D1D1F on #FFF = 16.8:1   #6E6E73 on #FFF = 5.07:1
     #0077CC <-> #FFF = 4.66:1  (safe for white-on-blue AND blue-on-white)
   The old brand blue #0EA5E9 is 2.77:1 and is never used for text. */

*{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#FFFFFF;
    --bg-2:#F5F5F7;
    --bg-ink:#0B0B0D;
    --ink:#1D1D1F;
    --ink-2:#6E6E73;
    --ink-on-dark:#F5F5F7;
    --ink-2-on-dark:#98989D;
    --blue:#0077CC;
    --blue-hover:#0069B4;
    --blue-wash:#EAF4FC;
    --green:#0E9F6E;
    --red:#D93025;
    --line:rgba(0,0,0,0.10);
    --line-strong:rgba(0,0,0,0.22);
    --line-dark:rgba(255,255,255,0.14);
    --r-sm:12px; --r:18px; --r-lg:24px; --r-pill:980px;
    --nav-h:52px;
    --s-sec:clamp(64px,9vw,132px);
    --ease:cubic-bezier(0.22,0.61,0.36,1);
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100vw}
body{
    font-family:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg); color:var(--ink);
    font-size:17px; line-height:1.5; font-weight:400;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
section{padding:var(--s-sec) 0}

/* ---------- Type ---------- */
.display{font-size:clamp(2.5rem,6.4vw,4.75rem);line-height:1.04;font-weight:800;letter-spacing:-0.03em}
.h2{font-size:clamp(1.85rem,4.2vw,3.1rem);line-height:1.1;font-weight:700;letter-spacing:-0.025em}
.h3{font-size:1.1rem;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.lead{font-size:clamp(1.0625rem,1.9vw,1.375rem);line-height:1.45;color:var(--ink-2);font-weight:400}
.eyebrow{font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;color:var(--blue);text-transform:uppercase;margin-bottom:14px}
.muted{color:var(--ink-2)}
.center{text-align:center}
.measure{max-width:34ch;margin-inline:auto}
.measure-wide{max-width:52ch}
.sec-head{text-align:center;margin-bottom:clamp(38px,5vw,64px)}
.sec-head .lead{margin-top:14px}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:46px;padding:0 26px;border-radius:var(--r-pill);
    font-size:1rem;font-weight:600;letter-spacing:-0.01em;
    transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease),opacity .22s var(--ease);
    cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-primary:active{transform:scale(0.98)}
.btn-ghost{background:transparent;color:var(--blue);border:1px solid var(--line);padding:0 22px}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-wash)}
.btn-ghost:active{transform:scale(0.98)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#EDEDF0}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-lg{min-height:54px;font-size:1.0625rem;padding:0 32px}
.btn-block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--blue);font-weight:500;font-size:1.0625rem;white-space:nowrap}
.link-arrow svg{width:16px;height:16px;flex-shrink:0;transition:transform .22s var(--ease)}
.link-arrow:hover svg{transform:translateX(-4px)}

/* ---------- Nav ---------- */
.nav{
    position:sticky;top:0;z-index:100;height:var(--nav-h);
    background:rgba(255,255,255,0.72);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:1080px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;letter-spacing:-0.02em}
.nav-logo img{width:26px;height:26px}
.nav-menu{display:flex;align-items:center;gap:30px;list-style:none}
.nav-menu a{font-size:0.9375rem;color:var(--ink);font-weight:400;opacity:.85;transition:opacity .2s var(--ease)}
.nav-menu a:hover{opacity:1}
.nav-buy{
    display:inline-flex;align-items:center;min-height:34px;padding:0 17px;
    border-radius:var(--r-pill);background:var(--blue);color:#fff!important;
    font-size:0.875rem;font-weight:600;opacity:1!important;transition:background .2s var(--ease);
}
.nav-buy:hover{background:var(--blue-hover)}
.nav-back{
    display:inline-flex;align-items:center;gap:6px;font-size:0.9375rem;color:var(--ink-2);
    min-height:44px;transition:color .2s var(--ease);
}
.nav-back:hover{color:var(--ink)}
.nav-back svg{width:16px;height:16px;transform:scaleX(-1)}

/* ---------- Surfaces ---------- */
.card{background:var(--bg-2);border-radius:var(--r-lg);padding:28px}
.card-outline{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.media{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}

/* ---------- Forms ---------- */
.field{margin-bottom:20px}
.field label,.lbl{
    display:block;font-size:0.8125rem;font-weight:600;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;
}
.input,input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=url],select,textarea{
    width:100%;min-height:48px;padding:12px 15px;
    font-family:inherit;font-size:1rem;color:var(--ink);
    background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
    transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
textarea{min-height:110px;resize:vertical;line-height:1.5}
.input:focus,input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);
}
.help{font-size:0.8125rem;color:var(--ink-2);margin-top:7px}
.err{font-size:0.8125rem;color:var(--red);margin-top:7px}

/* ---------- Swatches ---------- */
.sw{width:44px;height:44px;border-radius:50%;position:relative;display:grid;place-items:center;transition:transform .2s var(--ease);flex-shrink:0}
.sw:hover{transform:scale(1.08)}
.sw i,.sw span.dot{width:28px;height:28px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12)}
.sw::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink);opacity:0;transition:opacity .2s var(--ease)}
.sw.on::after,.sw[aria-checked="true"]::after{opacity:1}

/* ---------- Footer ---------- */
footer{padding:44px 0;border-top:1px solid var(--line);font-size:0.875rem;color:var(--ink-2)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* ---------- Floating ---------- */
.wa{
    position:fixed;bottom:22px;left:22px;z-index:90;
    width:50px;height:50px;border-radius:50%;background:#25D366;color:#fff;
    display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,0.16);
    transition:transform .22s var(--ease);
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:26px;height:26px}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
    .split{grid-template-columns:1fr}
}
@media (max-width:700px){
    .nav-menu{display:none}
    .wa{bottom:78px}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none}
}