:root{
    --brand-700:#0DA1B3;
    --brand-600:#15AFC2;
    --brand-500:#49B6C3;
    --brand-400:#6ECAD1;
    --brand-300:#8FDADD;
    --brand-100:#BEEBEB;
    --ink-900:#0B1320;
    --ink-700:#243443;
    --surface:#F7FBFB;
    --white:#FFFFFF;
    --radius:14px;
    --shadow:0 8px 30px rgba(13,161,179,.12);
    --shadow-strong:0 12px 40px rgba(13,161,179,.18);
    --ring:0 0 0 4px rgba(13,161,179,.15);
    --ease:cubic-bezier(.22,1,.36,1);


    --header-h: 68px;
}

*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
body{
    margin:0;
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
    line-height:1.55;
    color:var(--ink-900);
    background:var(--surface);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}


.skip-to-content{
    position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-to-content:focus{
    left:1rem;top:1rem;width:auto;height:auto;padding:.6rem .8rem;background:var(--white);
    border:2px solid var(--brand-500);border-radius:10px;z-index:1000;
}


.container{width:min(1120px,90%);margin-inline:auto}
.section{padding:64px 0}
.muted{color:var(--ink-700)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.no-scroll{overflow:hidden}


section[id]{scroll-margin-top: calc(var(--header-h) + 12px)}


.site-header{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(0,0,0,.04);
    transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
    background: rgba(255,255,255,.94);
    border-bottom-color: rgba(13,161,179,.18);
    box-shadow: 0 6px 22px rgba(13,161,179,.10);
}
.nav{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav-links a{
    color:var(--ink-900);text-decoration:none;font-weight:700;
    position:relative;padding:.45rem .7rem;border-radius:10px;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color: var(--brand-700); }
.nav-links a:focus-visible{ outline:none; box-shadow: var(--ring); }


.nav-links a::after{
    content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:2px;
    border-radius:999px; background:linear-gradient(90deg,var(--brand-700),var(--brand-400));
    transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); opacity:.9;
}
.nav-links a:hover::after{ transform:scaleX(1); }


.nav-links a.is-active,
.nav-links a[aria-current="true"]{
    color:var(--brand-700);
    background:rgba(13,161,179,.08);
}
.nav-links a.btn::after{ content:none; }


.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink-900);margin:5px 0;border-radius:1px;transition:transform .3s var(--ease),opacity .2s}


.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0}
.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


.hero{position:relative;isolation:isolate}
.hero__grid{
    display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:48px;
}
.eyebrow{
    display:inline-block;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.82rem;
    color:var(--brand-700);
    background:rgba(13,161,179,.09);
    border:1px solid rgba(13,161,179,.18);
    padding:.35rem .6rem;
    border-radius:999px;
    margin:0 0 .6rem;
}
.hero h1{
    font-size:clamp(1.9rem,3.2vw,2.8rem);
    margin:0 0 .5rem;
    letter-spacing:-.02em;
    text-wrap:balance;
}
.lead{font-size:1.125rem;color:var(--ink-700)}
.cta{display:flex;gap:.75rem;margin:1rem 0 1.25rem}
.checks{display:grid;gap:.35rem;padding:0;margin:0;list-style:none}
.checks li{display:flex;align-items:center;gap:.5rem}
.checks li::before{
    content:"done";
    font-family:"Material Symbols Rounded";
    font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 24;
    font-size:1.1rem;line-height:1;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}


.pill-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none}
.pill{
    display:inline-flex;align-items:center;gap:.35rem;
    font-weight:700;font-size:.9rem;color:var(--ink-900);
    padding:.44rem .6rem;border-radius:999px;
    background:linear-gradient(145deg,#fff, #f2fafb);
    border:1px solid rgba(13,161,179,.16);
    box-shadow:0 4px 14px rgba(13,161,179,.10);
}
.pill .material-symbols-rounded{
    font-size:1.05rem;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}


.hero__highlights{
    display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem
}
.highlight{
    display:inline-flex;align-items:center;gap:.35rem;
    font-weight:700;font-size:.9rem;color:var(--ink-700);
    background:#fff;border:1px solid rgba(0,0,0,.06);
    border-radius:12px;padding:.5rem .6rem;box-shadow:var(--shadow)
}
.highlight .material-symbols-rounded{
    font-size:1rem;color:var(--brand-700)
}


.hero__icon{
    position:relative;display:grid;place-items:center;min-height:320px
}
.mega-icon{
    font-size:clamp(6rem,12vw,10rem);
    line-height:1;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 14px 40px rgba(13,161,179,.25));
    animation:floatY 6s var(--ease) infinite;
}
@keyframes floatY{
    0%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
    100%{transform:translateY(0)}
}
.orbit{
    position:absolute;border-radius:999px;inset:12% 8%;
    background:radial-gradient(60% 60% at 50% 50%, rgba(13,161,179,.12), transparent 60%);
    filter:blur(6px);
    animation:spin 18s linear infinite;
}
.orbit--2{inset:6% 0%; animation-duration:26s; opacity:.8}
.orbit--3{inset:0 -6%; animation-duration:34s; opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}


.hero__bg{
    position:absolute;inset:-120px -40px auto -40px;height:360px;z-index:-1;
    background:
            radial-gradient(600px 200px at 20% 60%, rgba(13,161,179,.25), transparent 60%),
            radial-gradient(600px 200px at 80% 20%, rgba(73,182,195,.25), transparent 60%),
            linear-gradient(180deg, var(--brand-100), transparent);
}


.cards{display:grid;gap:18px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
    position:relative;
    background:var(--white);
    border:1px solid rgba(0,0,0,.06);
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card h3{margin:.35rem 0 .5rem;font-weight:800;letter-spacing:-.01em}
.card p{color:var(--ink-700)}
.card .card__icon{
    --size:44px;
    width:var(--size);height:var(--size);border-radius:12px;display:grid;place-items:center;margin-bottom:.6rem;
    background:
            radial-gradient(120% 120% at 0% 0%, rgba(13,161,179,.18), transparent 60%),
            linear-gradient(135deg, rgba(77,207,221,.18), rgba(13,161,179,.08));
    border:1px solid rgba(13,161,179,.15);
    box-shadow:0 6px 18px rgba(13,161,179,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.card .material-symbols-rounded{
    font-size:24px;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card--lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}
.card:focus-within{box-shadow:var(--shadow-strong), var(--ring);outline:none}


.card--hover-border::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    background:linear-gradient(120deg, rgba(13,161,179,.35), rgba(77,207,221,.25), rgba(13,161,179,.35));
    opacity:0;transition:opacity .35s var(--ease);
}
.card--hover-border:hover::after{opacity:1}


.how .steps{
    display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step;
}
.how .steps li{
    list-style:none;background:var(--white);border:1px solid rgba(0,0,0,.06);
    padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.how .steps li:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong)}
.how .steps li span{
    display:inline-grid;place-content:center;width:28px;height:28px;border-radius:999px;
    background:var(--brand-700);color:#fff;font-weight:800;margin-right:.5rem;
}


.demo__grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.demo__media video{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}


.cta__box{
    background:linear-gradient(145deg, var(--brand-100), #fff);
    border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.contact-form label{display:grid;gap:6px;font-weight:700}
.contact-form input,.contact-form textarea{
    width:100%;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:10px;
    font:inherit;background:#fff;transition:border-color .2s var(--ease), box-shadow .2s var(--ease)
}
.contact-form input:focus,.contact-form textarea:focus{
    border-color:var(--brand-500);box-shadow:0 0 0 4px rgba(73,182,195,.18);outline:0
}
.contact-form textarea{grid-column:1/-1}


.site-footer{padding:32px 0;border-top:1px solid rgba(0,0,0,.06)}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:18px}


.btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.74rem 1rem;border-radius:12px;background:var(--brand-700);
    color:#fff;text-decoration:none;font-weight:800;border:2px solid transparent;
    transition:transform .12s var(--ease), filter .12s var(--ease);
    will-change:transform;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn--ghost{
    background:transparent;color:var(--brand-700);border-color:var(--brand-300);border-style:solid;
}
.btn--ghost:hover{ background:rgba(13,161,179,.08); }
.btn--lg{padding:.95rem 1.2rem}
.btn--contact{
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    box-shadow: 0 8px 24px rgba(13,161,179,.24);
}


.nav-links .btn:not(.btn--ghost){ color:#fff; }


.faq details{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px 16px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:800}


.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.is-inview{opacity:1;transform:none}





.audience__head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:18px
}
.audience__lanes{
    display:grid;gap:14px;
}
.lane{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:16px;
    padding:18px 18px 16px 14px;
    border-radius:16px;
    background:
            linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.94)),
            radial-gradient(120% 120% at 0% 0%, rgba(13,161,179,.06), transparent 60%),
            radial-gradient(120% 120% at 100% 0%, rgba(73,182,195,.06), transparent 60%);
    border:1px solid rgba(13,161,179,.14);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    isolation:isolate;
}
.lane:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-strong);
    border-color:rgba(13,161,179,.22);
}


.lane__accent{
    position:absolute;inset:0 auto 0 0;width:6px;border-radius:16px 0 0 16px;opacity:.95;
    background:linear-gradient(180deg, var(--accent), var(--accent-2));
}


.icon-ring{
    --size:58px;
    width:var(--size); height:var(--size); border-radius:16px;
    display:grid; place-items:center;
    background:
            radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.75), transparent 60%),
            linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
    border:1px solid rgba(13,161,179,.18);
    box-shadow:
            0 10px 26px rgba(13,161,179,.18),
            inset 0 1px 0 rgba(255,255,255,.9);
}
.icon-ring .material-symbols-rounded{
    font-size:28px; line-height:1;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 32;
}


.lane h3{margin:.1rem 0 .25rem;font-size:1.15rem;letter-spacing:-.01em}
.lane p{margin:.15rem 0 .5rem;color:var(--ink-700)}
.lane__checks{
    display:grid;gap:.35rem;margin:0;padding:0;list-style:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.lane__checks li{
    display:flex;align-items:flex-start;gap:.45rem; font-size:.98rem; color:var(--ink-700)
}
.lane__checks .material-symbols-rounded{
    font-size:18px; line-height:1; margin-top:.08rem;
    font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 24;
    color:var(--brand-700);
}


.lane--emp{      --accent:#0DA1B3; --accent-2:#6ECAD1; }
.lane--compras{  --accent:#15AFC2; --accent-2:#8FDADD; }
.lane--log{      --accent:#49B6C3; --accent-2:#BEEBEB; }


@media (max-width: 980px){
    .hero__grid{grid-template-columns:1fr}
    .demo__grid{grid-template-columns:1fr}
    .how .steps{grid-template-columns:1fr 1fr}
    .cards--3{grid-template-columns:1fr 1fr}

    .lane__checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
    .nav-links{display:none}
    .nav-toggle{display:block}
    .cards--3,.how .steps{grid-template-columns:1fr}
    .contact-form{grid-template-columns:1fr}
    .hero__bg{inset:-90px -16px auto -16px;height:280px}
    .pill{font-size:.88rem}

    .lane{grid-template-columns:auto 1fr}
    .lane__checks{grid-template-columns:1fr}
}


.menu-open .nav-links{
    position:fixed; inset:calc(var(--header-h)) 12px auto 12px; display:grid;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(10px);
    padding:12px 14px; border-top:1px solid rgba(0,0,0,.06);
    border:1px solid rgba(13,161,179,.14);
    border-radius:16px; gap:.5rem; box-shadow:var(--shadow-strong); z-index:1001;
}
.menu-open .nav-links a{ padding:.65rem .7rem; border-radius:10px; }
.menu-open .nav-links a:hover{ background:rgba(13,161,179,.08) }
.menu-open .nav-links .btn{ width:100%; justify-content:center; }
.menu-open .nav-links .btn--contact{ order:-1; }


.nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(11,19,32,.32); backdrop-filter:blur(2px); z-index:1000; }
.menu-open .nav-backdrop{ display:block; }


@media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}






.modules .modules__head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:18px
}
.modules__grid{
    display:grid;gap:14px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .modules__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .modules__grid{ grid-template-columns:1fr; } }


.module-card{
    position:relative; overflow:hidden; isolation:isolate;
    border-radius:16px; padding:18px;
    background:
            linear-gradient(180deg,#fff,rgba(255,255,255,.96)),
            radial-gradient(120% 120% at 0% 0%, rgba(13,161,179,.06), transparent 60%),
            radial-gradient(120% 120% at 100% 0%, rgba(73,182,195,.06), transparent 60%);
    border:1px solid rgba(13,161,179,.14);
    box-shadow:var(--shadow);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.module-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-strong); border-color:rgba(13,161,179,.22); }


.module-card::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, var(--mod-a, var(--brand-700)), var(--mod-b, var(--brand-400)));
    opacity:0; transition:opacity .35s var(--ease);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding:1px;
}
.module-card:hover::after{ opacity:.55; }


.module-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.55rem; }
.module-card__tag{
    font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-700);
    background:linear-gradient(145deg,#fff,#f2fafb);
    border:1px solid rgba(13,161,179,.16);
    border-radius:999px; padding:.32rem .6rem;
    box-shadow:0 4px 14px rgba(13,161,179,.10);
}


.icon-badge{
    --s:56px;
    width:var(--s); height:var(--s); border-radius:14px; display:grid; place-items:center;
    background:
            radial-gradient(130% 130% at 0% 0%, rgba(255,255,255,.35), transparent 60%),
            linear-gradient(135deg, var(--mod-a, var(--brand-700)), var(--mod-b, var(--brand-400)));
    border:1px solid rgba(13,161,179,.18);
    box-shadow: 0 10px 26px rgba(13,161,179,.18), inset 0 1px 0 rgba(255,255,255,.7);
    transform:translateZ(0);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.module-card:hover .icon-badge{ transform:translateY(-1px); box-shadow: 0 12px 30px rgba(13,161,179,.24), inset 0 1px 0 rgba(255,255,255,.75); }
.icon-badge .material-symbols-rounded{
    font-size:28px; line-height:1; color:#fff;
    font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 32;
}


.module-card h3{ margin:.25rem 0 .3rem; font-size:1.12rem; letter-spacing:-.01em; font-weight:800; }
.module-card p{ margin:.15rem 0 .6rem; color:var(--ink-700); }


.module-card__meta{
    display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none;
}
.module-card__meta li{
    font-weight:700; font-size:.82rem; color:var(--ink-900);
    background:linear-gradient(145deg,#fff,#f2fafb);
    border:1px solid rgba(13,161,179,.16);
    border-radius:999px; padding:.34rem .56rem;
    box-shadow:0 4px 14px rgba(13,161,179,.08);
}


.mod--cuadrillas{ --mod-a: var(--brand-700); --mod-b: var(--brand-400); }
.mod--fletes{     --mod-a: var(--brand-600); --mod-b: var(--brand-300); }
.mod--visitas{    --mod-a: var(--brand-500); --mod-b: var(--brand-100); }
.mod--kilos{      --mod-a: var(--brand-700); --mod-b: var(--brand-500); }
.mod--calc{       --mod-a: var(--brand-600); --mod-b: var(--brand-400); }
.mod--contratos{  --mod-a: var(--brand-700); --mod-b: var(--brand-300); }
.mod--log{        --mod-a: var(--brand-500); --mod-b: var(--brand-400); }
.mod--evidencias{ --mod-a: var(--brand-700); --mod-b: var(--brand-100); }
.mod--cert{       --mod-a: var(--brand-600); --mod-b: var(--brand-300); }





.how--flow .how__head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:14px
}

.how--flow .flow{
    position:relative; display:grid; gap:10px; margin-top:6px;
}


.how--flow .flow::before{
    content:""; position:absolute; left:34px; top:22px; bottom:22px; width:2px;
    background:linear-gradient(180deg, var(--brand-100), var(--brand-400));
    border-radius:999px; opacity:.8;
}

.how--flow .flow__step{
    position:relative; display:grid; grid-template-columns:68px 1fr; align-items:start; gap:12px;
    padding:10px 12px; border-radius:14px; border:1px solid transparent;
    transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.how--flow .flow__step:hover{
    background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));
    border-color:rgba(13,161,179,.14); box-shadow:var(--shadow); transform:translateY(-2px);
}


.how--flow .flow__icon{
    --s:56px; position:relative; z-index:1; width:var(--s); height:var(--s);
    border-radius:14px; display:grid; place-items:center;
    background:
            radial-gradient(130% 130% at 0% 0%, rgba(255,255,255,.65), transparent 60%),
            linear-gradient(135deg, var(--brand-700), var(--brand-400));
    border:1px solid rgba(13,161,179,.20);
    box-shadow:0 12px 28px rgba(13,161,179,.20), inset 0 1px 0 rgba(255,255,255,.75);
}
.how--flow .flow__icon .material-symbols-rounded{
    color:#fff; font-size:30px; line-height:1;
    font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 32;
}


.how--flow .flow__num{
    position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; border-radius:999px;
    display:grid; place-items:center; font-weight:800; font-size:.76rem; color:var(--brand-700);
    background:#fff; border:1px solid rgba(13,161,179,.22); box-shadow:var(--shadow);
}


.how--flow .flow__body h3{
    margin:.1rem 0 .2rem; font-size:1.08rem; font-weight:800; letter-spacing:-.01em;
}
.how--flow .flow__body p{
    margin:.1rem 0 .55rem; color:var(--ink-700);
}


.how--flow .flow__chips{
    display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none;
}
.how--flow .flow__chips li{
    font-weight:700; font-size:.8rem; color:var(--ink-900);
    padding:.32rem .54rem; border-radius:999px;
    background:linear-gradient(145deg,#fff,#f6fbfb);
    border:1px solid rgba(13,161,179,.14);
    box-shadow:0 2px 10px rgba(13,161,179,.08);
}


@media (max-width: 640px){
    .how--flow .flow::before{ left:28px }
    .how--flow .flow__step{ grid-template-columns:60px 1fr }
    .how--flow .flow__icon{ --s:50px; border-radius:12px }
}


.faq .faq__grid{
    display:grid;
    gap:12px;
    align-items:start;
}
@media (min-width:980px){
    .faq .faq__grid{ grid-template-columns:1fr 1fr; }
}

.faq .faq__grid > details{ align-self:start; }


.faq details{
    background:#fff;
    border:1px solid rgba(13,161,179,.14);
    border-radius:14px;
    padding:12px 14px;
    box-shadow:var(--shadow);
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.faq details[open]{ border-color:rgba(13,161,179,.26); box-shadow:var(--shadow-strong); }

.faq summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem;
    font-weight:800;
}
.faq summary::-webkit-details-marker{ display:none; }

.faq summary .material-symbols-rounded{
    font-size:22px;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}


.faq summary::after{
    content:"add";
    margin-left:auto;
    font-family:"Material Symbols Rounded";
    font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 24;
    color:var(--brand-700);
}
.faq details[open] summary::after{ content:"remove"; }

.faq .faq__content{ margin:.45rem 0 .2rem; color:var(--ink-700); }
.faq .faq__hint{ margin-top:.6rem; font-size:.92rem; }


.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.contact-form .field{ display:grid; gap:6px; }
.contact-form .field--full{ grid-column:1/-1; }
.field__label{ font-weight:800; }
.field__control{
    display:flex; align-items:center; gap:.5rem;
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    border-radius:12px; padding:10px 12px;
    box-shadow: inset 0 2px 10px rgba(13,161,179,.06);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field__control:focus-within{ border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(73,182,195,.18); }

.field__control input,
.field__control textarea{
    border:0; outline:0; width:100%;
    padding:.35rem 0; font:inherit; background:transparent; color:inherit;
}
.field__control .material-symbols-rounded{
    font-size:22px;
    background:linear-gradient(135deg,var(--brand-700),var(--brand-400));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

.field__msg{ min-height:1em; color:#b3261e; font-size:.84rem; }
.field.is-error .field__control{ border-color:#b3261e; box-shadow:0 0 0 4px rgba(179,38,30,.14); }
.field.is-error .field__msg::before{ content:"• "; }

.actions{ grid-column:1/-1; display:flex; align-items:center; gap:.75rem; }
.btn.btn--loading{ position:relative; opacity:.85; }
.btn.btn--loading::after{
    content:""; width:18px; height:18px; margin-left:.35rem;
    border:2px solid currentColor; border-top-color:transparent; border-right-color:transparent;
    border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }


@media (max-width:640px){ .contact-form{ grid-template-columns:1fr; } }


.brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; flex-shrink:0; }

.brand img,
.brand svg{
    display:block;
    width:auto;
    height:auto;

    max-height: clamp(40px, calc(var(--header-h) - 18px), 64px);
    object-fit:contain;
}


@media (max-width: 640px){
    .brand img,
    .brand svg{
        max-height: clamp(36px, calc(var(--header-h) - 14px), 56px);
    }
}


.nav-toggle{ flex-shrink:0; }

#faq .faq__content {
    display: none;
}

#faq details[open] .faq__content {
    display: block;
}
