/* ==========================================================================
   JUAM design system
   Warm editorial canvas, deep-ink type, logo green + orange as brand voice.
   Light is the default theme; dark is opt-in via [data-theme="dark"].
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
    --font-sans:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;

    /* Logo colours */
    --brand-green:#357A37;
    --brand-green-deep:#1d4a21;
    --brand-orange:#ED9102;

    /* Surfaces */
    --canvas:#fbfaf8;
    --surface:#ffffff;
    --surface-2:#f4f1ec;
    --hairline:#ebe7e0;
    --hairline-strong:#d9d4ca;

    /* Text */
    --ink:#0f1a13;
    --heading:#1d4a21;
    --body:#3d3e45;
    --muted:#6f7073;
    --link:#2b652d;
    --accent-text:#a85f00;

    /* Actions */
    --primary-fill:#357A37;
    --primary-fill-hover:#2b652d;
    --on-primary:#ffffff;
    --accent-fill:#ED9102;
    --accent-fill-hover:#f5a12a;
    --on-accent:#1b1205;

    /* Pastel washes (section/card rotation) */
    --wash-green:#e8f1e4;
    --wash-peach:#fef1e1;
    --wash-butter:#fde8ce;
    --wash-sage:#eef2e6;

    /* Deep brand band (CTA, footer) */
    --band:#14361a;
    --band-2:#1b4522;
    --on-band:#f2f6f0;
    --on-band-muted:#b9c9bb;

    --nav-bg:rgba(251,250,248,.82);
    --ring:0 0 0 3px rgba(53,122,55,.25);
    --shadow-float:0 24px 60px -24px rgba(15,26,19,.28);

    --radius-card:16px;
    --radius-panel:24px;
    --radius-btn:8px;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-in-out:cubic-bezier(.76,0,.24,1);

    /* Legacy variables used by existing page styles */
    --primary:#357A37;
    --accent:#ED9102;
    --dark:var(--ink);
    --light:var(--canvas);
    --gray:var(--muted);

    color-scheme:light;
}

[data-theme="dark"]{
    --canvas:#0c120e;
    --surface:#131b16;
    --surface-2:#18221c;
    --hairline:#223027;
    --hairline-strong:#2e3e33;

    --ink:#eef3ee;
    --heading:#9fd89d;
    --body:#c2cac3;
    --muted:#8c978e;
    --link:#8fd18c;
    --accent-text:#f6b04a;

    --primary-fill:#3f8f43;
    --primary-fill-hover:#4aa24e;
    --on-primary:#ffffff;
    --accent-fill:#f29a12;
    --accent-fill-hover:#f8ad3d;
    --on-accent:#1b1205;

    --wash-green:#14231a;
    --wash-peach:#231b12;
    --wash-butter:#241e13;
    --wash-sage:#171f19;

    --band:#0f2615;
    --band-2:#15321c;
    --on-band:#eef4ee;
    --on-band-muted:#a8baa9;

    --nav-bg:rgba(12,18,14,.78);
    --ring:0 0 0 3px rgba(143,209,140,.28);
    --shadow-float:0 24px 60px -24px rgba(0,0,0,.7);

    --primary:#4a9a4d;
    --accent:#f29a12;

    color-scheme:dark;
}

/* ---------- Base ---------- */
html{
    background:var(--canvas);
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}
body{
    font-family:var(--font-sans);
    background:var(--canvas);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
::selection{background:var(--brand-orange);color:#1b1205;}
:focus-visible{outline:2px solid var(--brand-orange);outline-offset:3px;}

/* Smooth theme switch, applied only while toggling */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
    transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease !important;
}

/* Lenis smooth scrolling */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* ==========================================================================
   Loader + page transitions
   ========================================================================== */
html.juam-loading body{visibility:hidden;}

.juam-loader{
    position:fixed;
    inset:0;
    z-index:99999;
    pointer-events:all;
    visibility:visible;
}
.juam-loader__panel{
    position:absolute;
    inset:0;
    clip-path:inset(0 0 0 0);
    transition:clip-path .9s var(--ease-in-out);
}
.juam-loader__panel--green{background:var(--brand-green);}
.juam-loader__panel--orange{background:var(--brand-orange);}
.juam-loader__panel--canvas{
    background:var(--canvas);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
}
.juam-loader__content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    transition:opacity .35s ease,transform .5s var(--ease-out);
}
.juam-loader__mark{width:112px;height:112px;overflow:visible;}
.juam-loader__half{
    fill:var(--brand-green);
    transform-box:fill-box;
    transform-origin:100% 50%;
    animation:juamHalf 1s var(--ease-out) both;
}
.juam-loader__gap{
    fill:var(--canvas);
    transform-box:fill-box;
    transform-origin:50% 50%;
    animation:juamPop .6s .45s var(--ease-out) both;
}
.juam-loader__dot{
    fill:var(--brand-orange);
    transform-box:fill-box;
    transform-origin:50% 50%;
    animation:juamPop .7s .6s cubic-bezier(.34,1.56,.64,1) both,juamBeat 1.6s 1.4s ease-in-out infinite;
}
.juam-loader__ripple{
    fill:none;
    stroke:var(--brand-orange);
    stroke-width:1.4;
    transform-box:fill-box;
    transform-origin:50% 50%;
    opacity:0;
    animation:juamRipple 1.8s 1.1s ease-out infinite;
}
.juam-loader__ripple:nth-of-type(2){animation-delay:1.7s;}
.juam-loader__word{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-family:var(--font-sans);
    line-height:1;
}
.juam-loader__word b{
    display:inline-flex;
    font-size:30px;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--ink);
    overflow:hidden;
}
.juam-loader__word b span{
    display:inline-block;
    transform:translateY(110%);
    animation:juamLetter .7s var(--ease-out) forwards;
    animation-delay:calc(.75s + var(--i) * 70ms);
}
.juam-loader__word small{
    font-size:13px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent-text);
    opacity:0;
    animation:juamFade .6s 1.15s ease forwards;
}
.juam-loader__bar{
    width:180px;
    height:3px;
    border-radius:3px;
    background:var(--hairline);
    overflow:hidden;
}
.juam-loader__bar span{
    display:block;
    height:100%;
    width:100%;
    transform:scaleX(0);
    transform-origin:0 50%;
    background:linear-gradient(90deg,var(--brand-green),var(--brand-orange));
    transition:transform .35s ease-out;
}

/* Quick mode: on later page views the intro is shortened */
.juam-loader.is-quick .juam-loader__word,
.juam-loader.is-quick .juam-loader__bar{display:none;}
.juam-loader.is-quick .juam-loader__mark{width:72px;height:72px;}
.juam-loader.is-quick .juam-loader__half{animation-duration:.55s;}
.juam-loader.is-quick .juam-loader__gap{animation-delay:.15s;animation-duration:.4s;}
.juam-loader.is-quick .juam-loader__dot{animation:juamPop .5s .25s cubic-bezier(.34,1.56,.64,1) both,juamBeat 1.4s .8s ease-in-out infinite;}
.juam-loader.is-quick .juam-loader__ripple{animation-delay:.6s;}

/* Exit: content lifts, then the three panels wipe upward in sequence */
.juam-loader.is-leaving{pointer-events:none;}
.juam-loader.is-leaving .juam-loader__content{opacity:0;transform:translateY(-24px) scale(.96);}
.juam-loader.is-leaving .juam-loader__panel{clip-path:inset(0 0 100% 0);}
.juam-loader.is-leaving .juam-loader__panel--canvas{transition-delay:.12s;}
.juam-loader.is-leaving .juam-loader__panel--orange{transition-delay:.22s;}
.juam-loader.is-leaving .juam-loader__panel--green{transition-delay:.32s;}

/* Leave transition when navigating to another page */
.juam-leave{
    position:fixed;
    inset:0;
    z-index:99998;
    pointer-events:none;
}
.juam-leave span{
    position:absolute;
    inset:0;
    clip-path:inset(100% 0 0 0);
    transition:clip-path .55s var(--ease-in-out);
}
.juam-leave span:nth-child(1){background:var(--brand-green);}
.juam-leave span:nth-child(2){background:var(--brand-orange);transition-delay:.06s;}
.juam-leave span:nth-child(3){background:var(--canvas);transition-delay:.12s;}
.juam-leave.is-active{pointer-events:all;}
.juam-leave.is-active span{clip-path:inset(0 0 0 0);}

@keyframes juamHalf{
    0%{transform:scaleX(0) rotate(-24deg);opacity:0;}
    60%{opacity:1;}
    100%{transform:scaleX(1) rotate(0);opacity:1;}
}
@keyframes juamPop{from{transform:scale(0);}to{transform:scale(1);}}
@keyframes juamBeat{0%,100%{transform:scale(1);}50%{transform:scale(.82);}}
@keyframes juamRipple{
    0%{transform:scale(1);opacity:.75;}
    100%{transform:scale(3.2);opacity:0;}
}
@keyframes juamLetter{to{transform:translateY(0);}}
@keyframes juamFade{to{opacity:1;}}

/* ==========================================================================
   Theme toggle
   ========================================================================== */
.theme-toggle{
    position:relative;
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:inline-grid;
    place-items:center;
    border-radius:999px;
    border:1px solid var(--hairline-strong);
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
    overflow:hidden;
    transition:border-color .25s,background-color .25s,transform .3s var(--ease-out);
}
.theme-toggle:hover{border-color:var(--brand-green);transform:rotate(-8deg);}
.theme-toggle i{
    grid-area:1/1;
    font-size:17px;
    line-height:1;
    transition:transform .55s var(--ease-out),opacity .35s ease;
}
.theme-toggle .bi-sun{color:var(--brand-orange);}
.theme-toggle .bi-moon-stars{transform:translateY(140%) rotate(-90deg);opacity:0;}
[data-theme="dark"] .theme-toggle .bi-sun{transform:translateY(-140%) rotate(90deg);opacity:0;}
[data-theme="dark"] .theme-toggle .bi-moon-stars{transform:none;opacity:1;color:#cfe8cd;}
/* Icon fallback for pages without Bootstrap Icons */
.theme-toggle .tt-glyph{grid-area:1/1;font-size:17px;line-height:1;}

.theme-toggle--floating{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1200;
    width:46px;
    height:46px;
    box-shadow:var(--shadow-float);
}
body.has-floating-toggle .whatsapp-chat{bottom:78px !important;}

/* ==========================================================================
   PUBLIC SITE  (body.site — pages that use includes/header.php)
   ========================================================================== */
:where(.site),
:where(.site) *,
:where(.site) *::before,
:where(.site) *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.site{
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
}
.site main{display:block;}
.site a{color:inherit;}
.site img{max-width:100%;}

/* Type scale */
.site h1,.site h2,.site h3,.site h4{
    font-family:var(--font-sans);
    font-weight:700;
    color:var(--heading);
    letter-spacing:-.022em;
    margin:0 0 16px;
}
.site h1{font-size:clamp(40px,5.6vw,72px);line-height:1.08;color:var(--ink);}
.site h2{font-size:clamp(30px,4.2vw,56px);line-height:1.12;}
.site h3{font-size:clamp(20px,1.8vw,24px);line-height:1.3;color:var(--ink);letter-spacing:-.012em;}
.site p{
    color:var(--body);
    font-size:clamp(16px,1.2vw,18px);
    line-height:1.62;
    margin:0 0 14px;
}
.site .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;}
.site .eyebrow-mark{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:18px;
}
.site .eyebrow-mark::before,
.site .eyebrow-mark::after{
    content:"";
    height:10px;
    border-radius:10px;
}
.site .eyebrow-mark::before{width:28px;background:var(--brand-green);}
.site .eyebrow-mark::after{width:10px;background:var(--brand-orange);}

/* Layout */
.site main > section,
.site .container-x{
    width:min(1200px,100% - 32px);
    margin-inline:auto;
    padding:clamp(56px,8vw,104px) 0;
}
.site .grid{display:grid;gap:clamp(20px,2.6vw,32px);}
@media(min-width:768px){
    .site .grid-2{grid-template-columns:1fr 1fr;align-items:center;}
    .site .grid-3{grid-template-columns:repeat(3,1fr);}
}
.site .center{text-align:center;}
.site .center p{margin-inline:auto;max-width:760px;}

/* Panels — tinted section bands with soft radius */
.site main > section.panel,
.site .panel{
    padding:clamp(44px,7vw,88px) clamp(20px,5.5vw,72px);
    border-radius:var(--radius-panel);
    margin-block:clamp(16px,3vw,40px);
}
.site .panel--peach{background:var(--wash-peach);}
.site .panel--green{background:var(--wash-green);}
.site .panel--butter{background:var(--wash-butter);}
.site .panel--deep{
    background:var(--band);
    color:var(--on-band);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.site .panel--deep h2,.site .panel--deep h3{color:var(--on-band);}
.site .panel--deep p{color:var(--on-band-muted);}
/* Logo geometry echoed as a decorative motif on deep bands */
.site .panel--deep::before{
    content:"";
    position:absolute;
    z-index:-1;
    right:-120px;
    top:50%;
    width:340px;
    height:440px;
    transform:translateY(-50%);
    border-radius:340px 0 0 340px / 220px 0 0 220px;
    background:var(--band-2);
}
.site .panel--deep::after{
    content:"";
    position:absolute;
    z-index:-1;
    right:120px;
    top:50%;
    width:86px;
    height:86px;
    transform:translateY(-50%);
    border-radius:50%;
    background:var(--brand-orange);
    box-shadow:0 0 0 22px var(--band);
    opacity:.95;
}
@media(max-width:768px){
    .site .panel--deep::before{right:-220px;opacity:.6;}
    .site .panel--deep::after{right:16px;top:28px;transform:none;width:44px;height:44px;box-shadow:0 0 0 10px var(--band);}
}

/* ---------- Buttons ---------- */
.site .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 22px;
    border-radius:var(--radius-btn);
    border:1px solid transparent;
    font:700 16px/1.2 var(--font-sans);
    letter-spacing:.005em;
    text-decoration:none;
    cursor:pointer;
    box-shadow:none;
    margin:0;
    transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .4s var(--ease-out);
}
.site .btn:hover{transform:translateY(-2px);box-shadow:none;}
.site .btn:active{transform:translateY(0);}
.site .btn i{font-size:1.05em;transition:transform .35s var(--ease-out);}
.site .btn:hover i{transform:translateX(2px);}
.site .btn-primary{background:var(--primary-fill);color:var(--on-primary);}
.site .btn-primary:hover{background:var(--primary-fill-hover);color:var(--on-primary);}
.site .btn-accent{background:var(--accent-fill);color:var(--on-accent);}
.site .btn-accent:hover{background:var(--accent-fill-hover);color:var(--on-accent);}
.site .btn-ghost{background:transparent;color:var(--link);border-color:currentColor;}
.site .btn-ghost:hover{background:var(--wash-green);color:var(--link);}
.site .btn-light{background:var(--on-band);color:var(--band);}
.site .btn-light:hover{background:#ffffff;color:var(--band);}
.site .btn-outline-light{background:transparent;color:var(--on-band);border-color:rgba(242,246,240,.45);}
.site .btn-outline-light:hover{border-color:var(--on-band);background:rgba(255,255,255,.06);color:var(--on-band);}
.site .btn-block{width:100%;}
.site .actions,
.site .hero-actions,
.site .cta-actions,
.site .support-actions,
.site .section-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-top:28px;
}
.site .center .actions,
.site .center .cta-actions,
.site .section-actions{justify-content:center;}

/* ---------- Cards ---------- */
.site .card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-card);
    padding:32px;
    box-shadow:none;
    overflow:hidden;
    transition:transform .5s var(--ease-out),border-color .3s ease,background-color .3s ease;
}
.site .card::before{content:none;}
.site .card:hover{transform:translateY(-6px);border-color:var(--hairline-strong);box-shadow:none;}
.site .card h3{margin-bottom:10px;}
.site .card p{font-size:16px;}
.site .card p:last-child{margin-bottom:0;}
/* Pastel rotation inside grids */
.site .grid-3 > .card:nth-child(3n+1){background:var(--wash-green);border-color:transparent;}
.site .grid-3 > .card:nth-child(3n+2){background:var(--wash-peach);border-color:transparent;}
.site .grid-3 > .card:nth-child(3n+3){background:var(--wash-butter);border-color:transparent;}
.site .icon-chip{
    width:52px;
    height:52px;
    display:inline-grid;
    place-items:center;
    border-radius:14px;
    background:var(--surface);
    color:var(--brand-green);
    font-size:24px;
    margin-bottom:20px;
}
.site .icon-chip--orange{color:var(--brand-orange);}
[data-theme="dark"] .site .icon-chip{background:var(--surface-2);}

/* ---------- Media ---------- */
.site .media{
    position:relative;
    border-radius:var(--radius-card);
    overflow:hidden;
    background:var(--surface-2);
}
.site .media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0;
    transition:transform 1.2s var(--ease-out);
}
.site .media:hover img{transform:scale(1.035);}
.site .media--tall{aspect-ratio:4/5;}
.site .media--wide{aspect-ratio:4/3;}

/* ---------- Hero (split, text-left / visual-right) ---------- */
.site main > section.hero{
    display:grid;
    gap:clamp(36px,5vw,64px);
    align-items:center;
    padding-top:clamp(40px,6vw,88px);
    padding-bottom:clamp(48px,7vw,96px);
    text-align:left;
    background:none;
    color:var(--ink);
}
@media(min-width:960px){
    .site main > section.hero{grid-template-columns:1.05fr .95fr;}
}
.site .hero h1{margin-bottom:20px;}
.site .hero p{max-width:600px;color:var(--body);font-size:clamp(17px,1.5vw,20px);}
.site .hero-visual{
    position:relative;
    padding:28px 0 28px 28px;
}
.site .hero-frame{
    position:relative;
    z-index:1;
    border-radius:var(--radius-card);
    overflow:hidden;
    aspect-ratio:5/4;
    background:var(--surface-2);
}
.site .hero-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:0;
}
.site .hero-shape{position:absolute;pointer-events:none;}
.site .hero-shape--half{
    z-index:0;
    left:0;
    top:0;
    width:58%;
    height:72%;
    background:var(--wash-green);
    border-radius:999px 0 0 999px / 60% 0 0 60%;
}
.site .hero-shape--block{
    z-index:0;
    right:-12px;
    bottom:0;
    width:46%;
    height:46%;
    background:var(--wash-peach);
    border-radius:var(--radius-card);
}
.site .hero-shape--dot{
    z-index:2;
    right:28px;
    top:2px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--brand-orange);
    box-shadow:0 0 0 10px var(--canvas);
    animation:heroFloat 6s ease-in-out infinite;
}
.site .hero-badge{
    position:absolute;
    z-index:3;
    left:0;
    bottom:46px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px 12px 12px;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:14px;
    box-shadow:var(--shadow-float);
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    animation:heroFloat 7s 1s ease-in-out infinite;
}
.site .hero-badge img{width:34px;height:34px;object-fit:contain;border-radius:0;}
.site .hero-badge i{color:var(--brand-green);font-size:18px;}
@keyframes heroFloat{0%,100%{translate:0 0;}50%{translate:0 -10px;}}

/* Entrance after the loader lifts */
.site .hero-copy > *{opacity:1;}
html.juam-enter .site .hero-copy > *{
    animation:enterUp 1s var(--ease-out) both;
}
html.juam-enter .site .hero-copy > *:nth-child(2){animation-delay:.08s;}
html.juam-enter .site .hero-copy > *:nth-child(3){animation-delay:.16s;}
html.juam-enter .site .hero-copy > *:nth-child(4){animation-delay:.24s;}
html.juam-enter .site .hero-visual{animation:enterScale 1.2s .1s var(--ease-out) both;}
@keyframes enterUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes enterScale{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}

/* Scroll reveal (added by theme.js) */
.site .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform 1.1s var(--ease-out);}
.site .reveal.is-in{opacity:1;transform:none;}
.site .reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms);}
.site .reveal-stagger.is-in > *{opacity:1;transform:none;}

/* ---------- Forms ---------- */
.site form .field,
.site label{display:block;}
.site label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.site input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.site select,
.site textarea{
    width:100%;
    font:400 16px/1.4 var(--font-sans);
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-btn);
    padding:14px 16px;
    margin:0 0 14px;
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.site textarea{min-height:140px;resize:vertical;}
.site input::placeholder,.site textarea::placeholder{color:var(--muted);}
.site input:focus,.site select:focus,.site textarea:focus{outline:none;border-color:var(--brand-green);box-shadow:var(--ring);}
.site .form-card,
.site form.form-card{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-card);
    padding:clamp(24px,4vw,40px);
    box-shadow:none;
}
.site .alert{
    margin-bottom:18px;
    padding:14px 16px;
    border-radius:var(--radius-btn);
    font-size:15px;
    background:var(--wash-green);
    color:var(--link);
    border:1px solid transparent;
}
.site .alert--error{background:var(--wash-peach);color:var(--accent-text);}

/* ---------- Auth / single-form pages ---------- */
.site .auth-wrap,
.site .request-wrap{
    position:relative;
    width:min(100% - 32px,var(--auth-width,560px));
    margin:clamp(40px,7vw,96px) auto;
    padding:0;
    isolation:isolate;
}
.site .auth-wrap::before,
.site .request-wrap::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-56px;
    top:-40px;
    width:200px;
    height:260px;
    border-radius:200px 0 0 200px / 130px 0 0 130px;
    background:var(--wash-green);
}
.site .auth-wrap::after,
.site .request-wrap::after{
    content:"";
    position:absolute;
    z-index:-1;
    right:-28px;
    bottom:-28px;
    width:84px;
    height:84px;
    border-radius:50%;
    background:var(--brand-orange);
    box-shadow:0 0 0 14px var(--canvas);
}
.site .auth-card,
.site .request-card{
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-panel);
    padding:clamp(28px,5vw,48px);
    box-shadow:var(--shadow-float);
}
.site .auth-card h1,
.site .request-card h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:10px;}
.site .auth-card > p,
.site .request-card > p{color:var(--body);margin-bottom:26px;}
.site .auth-card .logo-mark,
.site .request-card .logo-mark{width:48px;height:48px;margin-bottom:20px;display:block;}
.site .auth-card button[type="submit"],
.site .request-card button[type="submit"]{width:100%;margin-top:6px;}
.site .helper-link{display:block;margin-top:18px;text-align:center;font-weight:700;color:var(--link);text-decoration:none;}
.site .helper-link:hover{text-decoration:underline;text-underline-offset:4px;}
@media(max-width:600px){
    .site .auth-wrap::before,.site .request-wrap::before{left:-16px;top:-24px;width:120px;height:160px;}
    .site .auth-wrap::after,.site .request-wrap::after{right:-6px;bottom:-18px;width:52px;height:52px;box-shadow:0 0 0 8px var(--canvas);}
}

/* ---------- Navbar ---------- */
.site .navbar{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px clamp(16px,3.5vw,40px);
    background:var(--nav-bg);
    -webkit-backdrop-filter:saturate(1.5) blur(14px);
    backdrop-filter:saturate(1.5) blur(14px);
    border-bottom:1px solid transparent;
    box-shadow:none;
    transition:border-color .3s ease,padding .3s ease,background-color .3s ease;
}
.site .navbar.is-scrolled{border-bottom-color:var(--hairline);padding-top:10px;padding-bottom:10px;}
.site .logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink);
    line-height:1.05;
    flex-shrink:0;
}
.site .logo-mark{width:40px;height:40px;flex:0 0 40px;object-fit:contain;border-radius:0;transition:transform .6s var(--ease-out);}
.site .logo:hover .logo-mark{transform:rotate(-12deg) scale(1.05);}
.site .logo-text{display:flex;flex-direction:column;}
.site .logo-name{font-weight:800;font-size:19px;letter-spacing:.06em;color:var(--ink);}
.site .logo-sub{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-top:3px;}

.site .nav-links{display:flex;align-items:center;gap:4px;}
.site .nav-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:var(--radius-btn);
    color:var(--ink);
    font-weight:500;
    font-size:15px;
    text-decoration:none;
    transition:color .2s ease,background-color .2s ease;
}
.site .nav-links a > i{font-size:15px;color:var(--muted);transition:color .2s ease;}
.site .nav-links a:not(.nav-cta):not(.nav-login):hover{color:var(--link);background:var(--wash-green);}
.site .nav-links a:not(.nav-cta):not(.nav-login):hover > i{color:var(--link);}
.site .nav-links a.is-active:not(.nav-cta):not(.nav-login){color:var(--link);}
.site .nav-links a.is-active:not(.nav-cta):not(.nav-login)::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:3px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--brand-green) 70%,var(--brand-orange) 70%);
}
.site .nav-links .nav-login{
    margin-left:8px;
    border:1px solid currentColor;
    color:var(--link);
    font-weight:700;
    padding:8px 14px;
}
.site .nav-links .nav-login > i,.site .nav-links .nav-cta > i{color:inherit;}
.site .nav-links .nav-login:hover{background:var(--wash-green);color:var(--link);}
.site .nav-links .nav-cta{
    background:var(--primary-fill);
    color:var(--on-primary);
    font-weight:700;
    padding:9px 15px;
}
.site .nav-links .nav-cta:hover{background:var(--primary-fill-hover);color:var(--on-primary);}
.site .nav-tools{display:flex;align-items:center;gap:10px;}
.site .lang-switch{
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:3px;
    border:1px solid var(--hairline-strong);
    border-radius:999px;
    background:var(--surface);
    font-size:13px;
}
.site .lang-switch span{display:none;}
.site .lang-switch a{
    padding:6px 10px;
    border-radius:999px;
    border:0;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
    color:var(--muted);
    transition:background-color .25s ease,color .25s ease;
}
.site .lang-switch a:hover{color:var(--ink);}
.site .lang-switch a.active{background:var(--ink);color:var(--canvas);}
.site .menu-toggle{
    display:none;
    width:40px;
    height:40px;
    place-items:center;
    border-radius:999px;
    border:1px solid var(--hairline-strong);
    background:var(--surface);
    color:var(--ink);
    font-size:22px;
    cursor:pointer;
}
@media(max-width:1080px){
    .site .menu-toggle{display:inline-grid;}
    .site .nav-links{
        position:absolute;
        top:calc(100% + 8px);
        left:16px;
        right:16px;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:12px;
        background:var(--surface);
        border:1px solid var(--hairline);
        border-radius:var(--radius-card);
        box-shadow:var(--shadow-float);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px) scale(.98);
        transform-origin:top center;
        transition:opacity .3s ease,transform .45s var(--ease-out),visibility 0s .45s;
    }
    .site .nav-links.active{
        display:flex;
        opacity:1;
        visibility:visible;
        transform:none;
        transition:opacity .3s ease,transform .45s var(--ease-out),visibility 0s;
    }
    .site .nav-links a{padding:12px 14px;font-size:16px;}
    .site .nav-links a.is-active:not(.nav-cta):not(.nav-login)::after{display:none;}
    .site .nav-links a.is-active:not(.nav-cta):not(.nav-login){background:var(--wash-green);}
    .site .nav-links .nav-login{margin:8px 0 0;justify-content:center;}
    .site .nav-links .nav-cta{justify-content:center;margin-top:6px;}
}
@media(max-width:520px){
    .site .logo-sub{display:none;}
    .site .logo-mark{width:34px;height:34px;flex-basis:34px;}
    .site .nav-tools{gap:6px;}
    .site .lang-switch a{padding:5px 8px;}
}

/* ---------- Floating helpers ---------- */
.site .whatsapp,
.site .whatsapp-chat a{
    background:#25D366;
    color:#fff;
    text-decoration:none;
    box-shadow:0 14px 30px -12px rgba(37,211,102,.7);
}
.site .whatsapp{
    position:fixed;
    right:20px;
    bottom:84px;
    z-index:999;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:26px;
    animation:none;
    transition:transform .4s var(--ease-out);
}
.site .whatsapp::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid #25D366;
    animation:waPing 2.4s ease-out infinite;
}
.site .whatsapp:hover{transform:scale(1.06);}
@keyframes waPing{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.7);opacity:0;}}
.site .whatsapp-chat{position:fixed;right:20px;bottom:84px;z-index:999;}
.site .whatsapp-chat a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:999px;
    font-weight:700;
    transition:transform .4s var(--ease-out);
}
.site .whatsapp-chat a:hover{transform:translateY(-2px);}
.site .whatsapp-chat i{font-size:20px;}
@media(max-width:768px){.site .whatsapp-chat a span{display:none;}.site .whatsapp-chat a{padding:14px;}}
.site .top-btn{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:998;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid var(--hairline-strong);
    background:var(--surface);
    color:var(--ink);
    font-size:18px;
    cursor:pointer;
    box-shadow:var(--shadow-float);
    opacity:0;
    pointer-events:none;
    transform:translateY(12px);
    transition:opacity .35s ease,transform .45s var(--ease-out),border-color .2s ease;
}
.site .top-btn.is-visible{opacity:1;pointer-events:auto;transform:none;}
.site .top-btn:hover{border-color:var(--brand-green);color:var(--link);}

/* ---------- Footer ---------- */
.site .footer{
    position:relative;
    overflow:hidden;
    background:var(--band);
    color:var(--on-band-muted);
    margin-top:clamp(48px,6vw,80px);
    padding:clamp(56px,7vw,88px) 0 28px;
}
.site .footer-container{
    width:min(1200px,100% - 32px);
    margin:0 auto;
    display:grid;
    gap:36px;
}
@media(min-width:768px){.site .footer-container{grid-template-columns:1.5fr 1fr 1fr 1.2fr;}}
.site .footer h3{
    color:var(--on-band);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-bottom:18px;
}
.site .footer p{color:var(--on-band-muted);font-size:15px;margin-bottom:10px;line-height:1.6;}
.site .footer a{color:var(--on-band-muted);text-decoration:none;transition:color .2s ease;}
.site .footer a:hover{color:var(--brand-orange);}
.site .footer-brand .logo{margin-bottom:18px;}
.site .footer-brand .logo-name{color:var(--on-band);}
.site .footer-brand .logo-sub{color:var(--brand-orange);}
.site .footer-brand p{max-width:360px;}
.site .socials{display:flex;gap:10px;margin-top:20px;}
.site .socials a{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(242,246,240,.2);
    color:var(--on-band);
    font-size:16px;
    margin:0;
    transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .4s var(--ease-out);
}
.site .socials a:hover{background:var(--brand-orange);border-color:var(--brand-orange);color:#1b1205;transform:translateY(-3px);}
.site .footer-wordmark{
    width:min(1200px,100% - 32px);
    margin:clamp(40px,6vw,72px) auto 0;
    font-weight:800;
    font-size:clamp(72px,19vw,250px);
    line-height:.8;
    letter-spacing:-.04em;
    color:transparent;
    -webkit-text-stroke:1px rgba(242,246,240,.16);
    user-select:none;
    white-space:nowrap;
}
.site .footer-wordmark span{color:var(--brand-orange);-webkit-text-stroke:0;}
.site .footer-bottom{
    width:min(1200px,100% - 32px);
    margin:28px auto 0;
    padding-top:20px;
    border-top:1px solid rgba(242,246,240,.12);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px 24px;
    text-align:left;
    font-size:13px;
}
.site .footer-bottom p{font-size:13px;margin:0;}
.site .footer-bottom a{color:var(--brand-orange);}

/* ==========================================================================
   APP PAGES  (dashboards & standalone pages that don't use the site header)
   Colour/surface layer only — layouts are left untouched.
   ========================================================================== */
body:not(.site){
    font-family:var(--font-sans);
    background:var(--canvas);
    color:var(--ink);
}
body:not(.site) :is(input,select,textarea,button){font-family:var(--font-sans);}

body:not(.site) :is(h1,h2,h3,h4){color:var(--ink);letter-spacing:-.015em;}
body:not(.site) :is(.subtext,.subtitle,.desc,.meta,.date,.time,.email){color:var(--muted);}

/* Sidebar — deep brand green */
body:not(.site) .sidebar{
    background:var(--band);
    color:var(--on-band);
    border-right:1px solid rgba(255,255,255,.04);
}
body:not(.site) .sidebar :is(h1,h2,h3,span){color:var(--on-band);}
body:not(.site) .sidebar a{
    color:var(--on-band-muted);
    border-radius:var(--radius-btn);
    transition:background-color .2s ease,color .2s ease,transform .3s var(--ease-out);
}
body:not(.site) .sidebar a span{color:inherit;}
body:not(.site) .sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;}
body:not(.site) .sidebar a.is-active{background:var(--brand-green);color:#fff;box-shadow:inset 3px 0 0 var(--brand-orange);}
body:not(.site) .sidebar .logout,
body:not(.site) .sidebar a[href*="logout"]{background:rgba(237,145,2,.12);color:#ffd08a;}
body:not(.site) .sidebar .logout:hover,
body:not(.site) .sidebar a[href*="logout"]:hover{background:var(--brand-orange);color:#1b1205;}
body:not(.site) .toggle,
body:not(.site) .menu-btn{border-radius:var(--radius-btn);}

/* Surfaces */
body:not(.site) :is(.card,.box,.activity,.form-card,.table-wrapper,.job,.log,.story .actions){
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--hairline);
    border-radius:var(--radius-card);
    box-shadow:none;
}
body:not(.site) :is(.card,.job,.log):hover{border-color:var(--hairline-strong);}
body:not(.site) .card::before{background:linear-gradient(90deg,var(--brand-green),var(--brand-orange));}
body:not(.site) .card i{color:var(--brand-green);}
body:not(.site) :is(.card,.activity,.job,.log,.form-card) p{color:var(--body);}
body:not(.site) .cards .card:nth-child(4n+2) i,
body:not(.site) .stats .card:nth-child(4n+2) i{color:var(--brand-orange);}
body:not(.site) .activity li{border-bottom-color:var(--hairline);}

/* Header / topbar */
body:not(.site) :is(.topbar,.header){color:var(--ink);}
body:not(.site) .topbar{background:var(--surface);border-bottom:1px solid var(--hairline);}

/* Tables */
body:not(.site) table{background:var(--surface);color:var(--ink);border-color:var(--hairline);}
body:not(.site) th{background:var(--surface-2);color:var(--ink);border-color:var(--hairline);}
body:not(.site) td{border-color:var(--hairline);color:var(--body);}
body:not(.site) tr:hover td{background:var(--wash-green);}

/* Forms */
body:not(.site) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),select,textarea){
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-btn);
    transition:border-color .2s ease,box-shadow .2s ease;
}
body:not(.site) :is(input,select,textarea):focus{outline:none;border-color:var(--brand-green);box-shadow:var(--ring);}
body:not(.site) ::placeholder{color:var(--muted);}
body:not(.site) label{color:var(--ink);}
body:not(.site) :is(.btn,button,.action-btn,.apply-btn){border-radius:var(--radius-btn);transition:background-color .2s ease,transform .3s var(--ease-out),filter .2s ease;}
body:not(.site) :is(.btn,.action-btn,.apply-btn):hover{transform:translateY(-1px);}
body:not(.site) .action-btn{background:var(--primary-fill);}
body:not(.site) .action-btn:hover{background:var(--primary-fill-hover);}
body:not(.site) .badge{border-radius:999px;}

/* Status / alerts */
body:not(.site) .alert{background:var(--wash-peach);color:var(--accent-text);border:1px solid transparent;border-radius:var(--radius-btn);}
body:not(.site) .success{background:var(--wash-green);color:var(--link);border-radius:var(--radius-btn);}
body:not(.site) .error{border-radius:var(--radius-btn);}
body:not(.site) .empty{color:var(--muted);}

/* Tabs (auth portal) */
body:not(.site) .tab{color:var(--muted);transition:color .2s ease,border-color .2s ease;}
body:not(.site) .tab.active{color:var(--link);border-bottom-color:var(--brand-green);}

/* Standalone auth portal (auth.php) */
body:not(.site) .auth-container{background:var(--canvas);border:0;}
body:not(.site) .auth-container .left{
    background:var(--band);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
body:not(.site) .auth-container .left::before{
    content:"";
    position:absolute;
    z-index:-1;
    right:-80px;
    bottom:-60px;
    width:300px;
    height:380px;
    border-radius:300px 0 0 300px / 190px 0 0 190px;
    background:var(--band-2);
}
body:not(.site) .auth-container .left::after{
    content:"";
    position:absolute;
    z-index:-1;
    right:90px;
    bottom:110px;
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--brand-orange);
    box-shadow:0 0 0 18px var(--band);
}
body:not(.site) .auth-container .left :is(h1,p){color:var(--on-band);}
body:not(.site) .auth-container .left h1{font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:-.02em;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    .site .reveal,.site .reveal-stagger > *{opacity:1;transform:none;}
}