*,*::before,*::after{ box-sizing:border-box; }

    /* Brand tokens: ink #1b1d1a on paper #f3f2e8 from the o-lab-logo kit,
       coloured with the coral / sand / mint / teal palette.
       Palette fills are light, so text on them is always ink, never paper. */
    :root{
        --coral:#e5866e;
        --coral-dark:#d8705a;
        --sand:#f4c176;
        --mint:#bdddcd;
        --teal:#8ccbcf;
        --ink-soft:#2e302b;

        --ink:#1b1d1a;
        --ink-2:#2b2d29;
        --paper:#f3f2e8;
        --paper-2:#e9e8dc;
        --surface:#fafaf4;
        --gray:#62645d;
        --gray-light:#a4a69c;
        --line:rgba(27,29,26,0.14);
        --line-invert:rgba(243,242,232,0.16);
        --ring:var(--coral);

        /* The O-lab symbol, used as a large background shape */
        --blob-hero:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 291 544 521'%3E%3Cpath fill-rule='evenodd' fill='%23bdddcd' d='M368 291C520 291 640 396 640 540L640 585C640 655 603 697 550 697C515 697 495 693 465 697C430 702 415 740 398 772C384 798 362 812 330 812C270 812 195 772 145 722C112 685 96 625 96 550C96 400 205 291 368 291ZM368 420C420 420 458 470 458 545C458 620 420 678 368 678C316 678 278 620 278 545C278 470 316 420 368 420Z'/%3E%3C/svg%3E");
        --blob-contact:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 291 544 521'%3E%3Cpath fill-rule='evenodd' fill='%23f4c176' fill-opacity='.6' d='M368 291C520 291 640 396 640 540L640 585C640 655 603 697 550 697C515 697 495 693 465 697C430 702 415 740 398 772C384 798 362 812 330 812C270 812 195 772 145 722C112 685 96 625 96 550C96 400 205 291 368 291ZM368 420C420 420 458 470 458 545C458 620 420 678 368 678C316 678 278 620 278 545C278 470 316 420 368 420Z'/%3E%3C/svg%3E");
        --blob-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 291 544 521'%3E%3Cpath fill-rule='evenodd' fill='%23000' d='M368 291C520 291 640 396 640 540L640 585C640 655 603 697 550 697C515 697 495 693 465 697C430 702 415 740 398 772C384 798 362 812 330 812C270 812 195 772 145 722C112 685 96 625 96 550C96 400 205 291 368 291ZM368 420C420 420 458 470 458 545C458 620 420 678 368 678C316 678 278 620 278 545C278 470 316 420 368 420Z'/%3E%3C/svg%3E");

        /* Nunito's round terminals echo the round-capped "lab" strokes */
        --f-display:'Nunito','Helvetica Neue',Arial,sans-serif;
        --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
        --f-mono:'JetBrains Mono','Space Mono',ui-monospace,monospace;

        --radius:26px;
        --container:1240px;
        --pad:clamp(20px,4vw,64px);
    }

    html{ scroll-behavior:smooth; }

    body{
        margin:0;
        background:var(--paper);
        color:var(--ink);
        font-family:var(--f-body);
        line-height:1.6;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
    }

    ::selection{ background:var(--coral); color:var(--ink); }

    a{ color:inherit; }
    img{ max-width:100%; display:block; }

    :focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }

    h1,h2,h3{
        font-family:var(--f-display);
        font-weight:800;
        letter-spacing:-0.015em;
        line-height:1.08;
        text-wrap:balance;
        margin:0;
    }

    p{ margin:0; }

    /* keep anchored sections clear of the sticky header */
    section[id]{ scroll-margin-top:68px; }

    .container{ max-width:var(--container); margin:0 auto; padding:0 var(--pad); }

    /* Language switching */
    body.lang-ru .lang-en{ display:none !important; }
    body.lang-en .lang-ru{ display:none !important; }

    .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;
    }

    .kicker{
        font-family:var(--f-mono);
        font-size:12px;
        letter-spacing:.14em;
        text-transform:uppercase;
        color:var(--gray);
    }
    .kicker.on-dark{ color:var(--gray-light); }

    /* Section kickers are marked with the O-lab symbol itself */
    .section-head .kicker::before,
    .page-hero .kicker::before,
    .cta-band .kicker::before,
    .contact .kicker::before,
    .contact-strip .kicker::before{
        content:'';
        display:inline-block;
        width:15px;
        height:15px;
        margin-right:10px;
        vertical-align:-3px;
        background:var(--ring);
        -webkit-mask:var(--blob-mask) no-repeat center/contain;
        mask:var(--blob-mask) no-repeat center/contain;
    }

    .desc{
        color:var(--gray);
        font-size:15.5px;
        line-height:1.65;
    }
    .on-dark .desc,.on-dark p{ color:var(--gray-light); }

    .btn{
        display:inline-flex;
        align-items:center;
        gap:.65rem;
        font-family:var(--f-mono);
        font-size:12px;
        font-weight:500;
        letter-spacing:.08em;
        text-transform:uppercase;
        background:var(--coral);
        color:var(--ink);
        border:1px solid var(--coral);
        padding:1rem 1.75rem;
        border-radius:999px;
        text-decoration:none;
        transition:background .2s ease, color .2s ease, border-color .2s ease;
    }
    /* Flat world: no lifts, no shadows — hover just swaps the fill */
    .btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
    /* on palette-coloured sections the button goes ink so it still stands out */
    .btn.invert{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .btn.invert:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
    .btn.ghost{ background:var(--mint); color:var(--ink); border-color:var(--mint); }
    .btn.ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
    .btn.small{ padding:.7rem 1.2rem; font-size:11px; }

    /* ---- Header ---- */
    header.site-header{
        position:sticky;
        top:0;
        z-index:500;
        height:68px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:0 var(--pad);
        background:var(--paper);
        border-bottom:1px solid var(--line);
    }

    .logo{
        display:inline-flex;
        align-items:center;
        color:var(--ink);
        text-decoration:none;
        flex-shrink:0;
    }
    .logo svg{ display:block; height:28px; width:auto; }

    .nav-links{
        display:flex;
        gap:28px;
        margin:0 auto 0 48px;
        padding:0;
        list-style:none;
    }
    .nav-links a{
        font-family:var(--f-mono);
        font-size:11px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--gray);
        text-decoration:none;
        transition:color .2s;
        padding:6px 0;
    }
    .nav-links a:hover{ color:var(--ink); }
    .nav-links a[aria-current="page"]{ color:var(--ink); text-decoration:underline 2px var(--coral); text-underline-offset:7px; }

    .header-actions{
        display:flex;
        align-items:center;
        gap:10px;
        flex-shrink:0;
    }

    /* Language toggle built like the "a"/"b" of the logotype:
       a round-capped stem with a thick ring that slides to the active side */
    .lang-switch{
        display:flex;
        align-items:center;
    }
    .lang-switch button{
        border:0;
        background:transparent;
        cursor:pointer;
        font:inherit;
        font-family:var(--f-mono);
        font-size:11px;
        letter-spacing:.06em;
        color:var(--gray);
        padding:.6rem .45rem;
        transition:color .2s ease;
    }
    .lang-switch button:hover,
    .lang-switch button.active{ color:var(--ink); }
    .lang-track{
        position:relative;
        flex-shrink:0;
        width:48px;
        height:22px;
        cursor:pointer;
    }
    .lang-track::before{
        content:'';
        position:absolute;
        left:4px;
        right:4px;
        top:7.5px;
        height:7px;
        border-radius:999px;
        background:var(--mint);
    }
    .lang-knob{
        position:absolute;
        top:0;
        left:0;
        width:22px;
        height:22px;
        border:7px solid var(--coral);
        border-radius:50%;
        background:var(--paper);
        transition:transform .25s ease, border-color .25s ease;
    }
    body.lang-ru .lang-knob{ transform:translateX(26px); border-color:var(--teal); }
    .lang-track:hover .lang-knob{ border-color:var(--ink); }

    .burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; color:var(--ink); }
    .burger svg{ width:22px; height:22px; display:block; }

    .header-cta{ white-space:nowrap; }

    @media (max-width:860px){
        .header-cta{ display:none; }
        .nav-links{
            position:absolute; top:100%; left:0; right:0;
            height:calc(100vh - 68px); height:calc(100dvh - 68px);
            z-index:499; margin:0; flex-direction:column; align-items:flex-start; gap:0;
            background:var(--paper);
            padding:8px var(--pad) 24px;
            transform:translateY(-8px); opacity:0; pointer-events:none;
            transition:opacity .2s ease, transform .2s ease;
            border-top:1px solid var(--line);
        }
        .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
        .nav-links li{ width:100%; }
        .nav-links a{ display:block; width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:12px; }
        .nav-links a[aria-current="page"]{ text-decoration:none; }
        .burger{ display:block; }
    }
    @media (max-width:380px){
        .logo svg{ height:24px; }
    }

    /* Hero = text column + its own column for the big O-lab symbol,
       so copy and shape never collide. The symbol runs off the right edge. */
    .hero, .page-hero{ position:relative; overflow:hidden; }
    .hero-grid{
        display:grid;
        grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
        column-gap:clamp(24px,4vw,64px);
    }
    .hero-grid > *{ grid-column:1; }
    .hero-grid > .hero-art{
        grid-column:2;
        grid-row:1 / span 12;
        position:relative;
        pointer-events:none;
    }
    .hero-art::before{
        content:'';
        position:absolute;
        left:0;
        top:50%;
        height:min(125%, 600px);
        aspect-ratio:544/521;
        transform:translateY(-50%) rotate(-6deg);
        background:var(--blob-hero) no-repeat center/contain;
    }
    @media (max-width:860px){
        .hero-grid{ display:flex; flex-direction:column; }
        .hero-grid > .hero-art{ order:99; height:clamp(150px,42vw,260px); margin-top:2.5rem; }
        .hero-art::before{
            left:auto;
            right:-14%;
            top:0;
            height:auto;
            width:min(84vw,460px);
            transform:rotate(-6deg);
        }
    }

    /* Same symbol in sand on the coral contact sections */
    .blob-dark{ position:relative; overflow:hidden; }
    .blob-dark::before{
        content:'';
        position:absolute;
        right:-140px;
        bottom:-240px;
        width:720px;
        aspect-ratio:544/521;
        transform:rotate(-8deg);
        background:var(--blob-contact) no-repeat center/contain;
        pointer-events:none;
    }
    .blob-dark > .container{ position:relative; z-index:1; }
    @media (max-width:760px){
        .blob-dark::before{ width:420px; right:-160px; bottom:-170px; }
    }

    /* Palette in order, cycled across repeating items via --c */
    .c1{ --c:var(--coral); } .c2{ --c:var(--sand); } .c3{ --c:var(--mint); } .c4{ --c:var(--teal); }

    /* ---- Footer ---- */
    .site-footer{ background:var(--paper); }
    .footer-in{
        display:grid;
        grid-template-columns:1.4fr 1fr 1fr 1fr;
        gap:2.5rem;
        padding:4rem var(--pad) 2.5rem;
        max-width:var(--container);
        margin:0 auto;
    }
    .footer-in .logo svg{ height:34px; }
    .footer-in p{ color:var(--gray); font-size:.9rem; margin-top:1.1rem; max-width:240px; line-height:1.6; }
    .footer-in h4{
        font-family:var(--f-mono);
        font-size:11px;
        letter-spacing:.1em;
        text-transform:uppercase;
        color:var(--gray);
        margin:0 0 1rem;
        font-weight:400;
    }
    .footer-in ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
    .footer-in ul a{ text-decoration:none; font-size:.92rem; color:var(--ink); text-underline-offset:4px; }
    .footer-in ul a:hover{ text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:2px; }
    .footer-bottom{
        border-top:1px solid var(--line);
        text-align:center;
        padding:1.6rem var(--pad) 2rem;
        color:var(--gray);
        font-size:.82rem;
    }
    @media (max-width:760px){
        .footer-in{ grid-template-columns:1fr 1fr; }
    }
    @media (max-width:480px){
        .footer-in{ grid-template-columns:1fr; }
    }

    /* ---- Reveal on scroll ----
       Visible by default so content never depends on JS running.
       JS adds .armed just before observing, THEN removes it via .in
       when the element scrolls into view — a JS failure just means
       no animation, never hidden content. */
    .reveal.armed{
        opacity:0;
        transform:translateY(10px);
        transition:opacity .35s ease, transform .35s ease;
    }
    .reveal.armed.in{ opacity:1; transform:translateY(0); }

    @media (prefers-reduced-motion: reduce){
        *,*::before,*::after{
            animation-duration:.01ms !important;
            animation-iteration-count:1 !important;
            scroll-behavior:auto !important;
            transition-duration:.01ms !important;
        }
    }

    /* ---- Hero ---- */
    .hero{ padding:clamp(80px,10vw,136px) 0 clamp(60px,7vw,96px); }

    .hero h1{
        font-size:clamp(2.4rem,5.8vw,4.3rem);
        font-weight:900;
        line-height:1.04;
        margin-bottom:1.6rem;
        max-width:900px;
    }

    .hero-description{
        font-size:clamp(1rem,1.4vw,1.2rem);
        color:var(--gray);
        max-width:620px;
        line-height:1.7;
        margin-bottom:2.4rem;
    }

    .hero-ctas{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
    }

    /* "From first sketch to a production line", drawn with the logotype's parts:
       an ink stem with thick palette rings, ending in the O-lab symbol */
    .route{
        position:relative;
        list-style:none;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        max-width:560px;
        margin:0 0 2.6rem;
        padding:0;
    }
    .route::before{
        content:'';
        position:absolute;
        left:11px;
        right:calc(25% - 3px);   /* stop on the symbol's solid edge, not in its hole */
        top:7.5px;
        height:7px;
        border-radius:999px;
        background:var(--ink);
    }
    .route li{
        position:relative;
        padding-top:38px;
        font-family:var(--f-mono);
        font-size:11px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--ink);
    }
    .route li::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:22px;
        height:22px;
        border:7px solid var(--c);
        border-radius:50%;
        background:var(--paper);
    }
    .route li:last-child::before{
        top:-4px;
        left:-3px;
        width:30px;
        height:30px;
        border:0;
        border-radius:0;
        background:var(--c);
        -webkit-mask:var(--blob-mask) no-repeat center/contain;
        mask:var(--blob-mask) no-repeat center/contain;
    }

    /* ---- Sections ---- */
    section{ padding:clamp(64px,8vw,108px) 0; }

    .section-head{ max-width:660px; margin-bottom:3.5rem; }
    .section-head .kicker{ display:block; margin-bottom:16px; }
    .section-title{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:1rem; }
    .section-head .desc{ font-size:16px; max-width:560px; }

    .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
    .section-head.center .desc{ margin:0 auto; }

    /* ---- Services (cards) ---- */
    .services{ background:var(--teal); --ring:var(--ink); }
    .services .section-head .kicker,
    .services .section-head .desc{ color:var(--ink-soft); }

    .cards-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }
    @media (max-width:960px){ .cards-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:640px){ .cards-grid{ grid-template-columns:1fr; } }

    .card{
        position:relative;
        isolation:isolate;
        overflow:hidden;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:2.2rem;
        transition:background .25s ease, border-color .25s ease;
    }
    /* Flat hover: the card takes its palette colour, the numeral turns to paper */
    .card:hover{
        background:var(--c);
        border-color:var(--ink);
    }
    .card:hover b.num{ color:var(--surface); }
    .card:hover p{ color:var(--ink-soft); }
    /* Big numeral behind the text, cropped by the card edge —
       the same move as the O-lab symbol behind the hero */
    .card b.num{
        position:absolute;
        z-index:-1;
        top:-.2em;
        right:-.05em;
        font-family:var(--f-display);
        font-size:9rem;
        font-weight:900;
        line-height:1;
        letter-spacing:-.05em;
        color:var(--c, var(--mint));
        pointer-events:none;
        user-select:none;
        transition:color .25s ease;
    }
    .card h3{
        font-size:1.25rem;
        margin:3.6rem 0 .85rem;
    }
    .card p{
        color:var(--gray);
        font-size:.94rem;
        line-height:1.65;
    }

    /* ---- Featured work (proof, real photos) ---- */
    .featured-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }
    @media (max-width:960px){ .featured-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

    .featured-card{
        display:block;
        text-decoration:none;
        color:inherit;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        overflow:hidden;
        transition:background .25s ease, border-color .25s ease;
    }
    .featured-card:hover{
        background:var(--c);
        border-color:var(--ink);
    }
    .featured-card:hover p,
    .featured-card:hover .kicker{ color:var(--ink-soft); }
    .featured-media{
        aspect-ratio:4/3;
        background:var(--mint);
        overflow:hidden;
    }
    .featured-media img{
        width:100%; height:100%; object-fit:cover;
        transition:transform .7s cubic-bezier(.4,0,.2,1);
    }
    .featured-card:hover .featured-media img{ transform:scale(1.05); }
    .featured-body{ padding:1.5rem 1.6rem 1.7rem; }
    .featured-body .kicker{ display:block; margin-bottom:.6rem; }
    .featured-body h3{ font-size:1.15rem; margin-bottom:.5rem; }
    .featured-body p{ color:var(--gray); font-size:.88rem; line-height:1.55; }
    .featured-foot{
        margin-top:2.6rem;
        display:flex;
        justify-content:center;
    }

    /* ---- CTA band ---- */
    .cta-band{
        background:var(--sand);
        text-align:center;
        --ring:var(--ink);
    }
    .cta-band .kicker{ color:var(--ink-soft); }
    .cta-band .container{
        padding-top:3.2rem;
        padding-bottom:3.2rem;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1.4rem;
    }
    .cta-band h2{ font-size:clamp(1.4rem,2.6vw,2rem); max-width:660px; }
    .cta-band-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

    /* ---- Process (dark timeline) ---- */
    .process{ background:var(--ink); color:var(--paper); }
    .process .section-head .kicker{ color:var(--gray-light); }
    .process .section-title{ color:var(--paper); }
    .process .section-head .desc{ color:var(--gray-light); }

    .timeline{ border-top:1px solid var(--line-invert); }
    .timeline-item{
        display:grid;
        grid-template-columns:140px 1fr;
        gap:2rem;
        align-items:start;
        padding:2rem 0;
        border-bottom:1px solid var(--line-invert);
        transition:padding-left .3s ease;
    }
    .timeline-item:hover{ padding-left:14px; }
    /* Same big faint numerals as the service cards, lit up on hover */
    .timeline-num{
        font-family:var(--f-display);
        font-size:4rem;
        font-weight:900;
        line-height:.8;
        letter-spacing:-.05em;
        color:var(--c, var(--coral));
        user-select:none;
    }
    .timeline-content{ padding-top:.1rem; }
    .timeline-content h3{
        font-size:1.3rem;
        color:var(--paper);
        margin-bottom:.6rem;
    }
    .timeline-content p{
        color:var(--gray-light);
        font-size:.95rem;
        line-height:1.7;
        max-width:640px;
    }
    @media (max-width:640px){
        .timeline-item{ grid-template-columns:1fr; gap:1rem; }
        .timeline-num{ font-size:3rem; }
        .timeline-content{ padding-top:0; }
    }

    /* ---- Formats (steps) ---- */
    .formats-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:20px;
    }
    .step-card{
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:2rem;
        background:var(--surface);
        transition:background .25s ease, border-color .25s ease;
    }
    .step-card::before{
        content:'';
        display:block;
        width:44px;
        height:10px;
        margin-bottom:1.4rem;
        border-radius:999px;
        background:var(--c, var(--coral));
        transition:width .35s ease, background .25s ease;
    }
    /* Flat hover: card fills with its colour, the bar turns ink and runs full width */
    .step-card:hover{ background:var(--c); border-color:var(--ink); }
    .step-card:hover::before{ width:100%; background:var(--ink); }
    .step-card:hover p,
    .step-card:hover .kicker{ color:var(--ink-soft); }
    .step-card h3{
        font-size:1.15rem;
        margin:.4rem 0 .8rem;
    }
    .step-card p{ color:var(--gray); font-size:.92rem; line-height:1.6; }

    /* ---- Contact ---- */
    .contact{
        background:var(--coral);
        color:var(--ink);
        text-align:center;
        --ring:var(--ink);
    }
    .contact .kicker{ color:var(--ink-soft); display:block; margin-bottom:1.2rem; }
    .contact .section-title{
        color:var(--ink);
        max-width:760px;
        margin:0 auto 1.2rem;
    }
    .contact .desc{
        color:var(--ink-soft);
        max-width:480px;
        margin:0 auto 2.4rem;
        font-size:16px;
    }

    /* stacked hero: the symbol sits under the buttons and is cut by the teal section */
    @media (max-width:860px){
        .hero{ padding-bottom:0; }
    }

    @media (max-width:768px){
        section{ padding:4rem var(--pad); }
        .hero{ padding:3.5rem var(--pad) 0; }
        section > .container{ padding:0; }
    }

    /* ---- Dark theme ---- */
    .theme-toggle{
        width:26px; height:26px; padding:0; cursor:pointer; flex-shrink:0;
        border:3px solid var(--ink); border-radius:50%;
        background:linear-gradient(90deg, var(--ink) 50%, var(--paper) 50%);
        transition:border-color .2s ease;
    }
    .theme-toggle:hover{ border-color:var(--coral); }
    /* Dark: the same palette, taken down to deep tones, with light text on them */
    :root[data-theme="dark"]{
        color-scheme:dark;
        --coral:#a94c37; --coral-dark:#bd5a43;
        --sand:#9a7428; --mint:#3f6b5c; --teal:#2c6469;
        --ink:#f3f2e8; --ink-soft:#e2e1d4; --ink-2:#f3f2e8;
        --paper:#1b1d1a; --paper-2:#242622; --surface:#242622;
        --gray:#a4a69c; --gray-light:#a4a69c;
        --line:rgba(243,242,232,.14);
        --ring:#d9856e;
        --blob-hero:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 291 544 521'%3E%3Cpath fill-rule='evenodd' fill='%232b3d36' d='M368 291C520 291 640 396 640 540L640 585C640 655 603 697 550 697C515 697 495 693 465 697C430 702 415 740 398 772C384 798 362 812 330 812C270 812 195 772 145 722C112 685 96 625 96 550C96 400 205 291 368 291ZM368 420C420 420 458 470 458 545C458 620 420 678 368 678C316 678 278 620 278 545C278 470 316 420 368 420Z'/%3E%3C/svg%3E");
        --blob-contact:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 291 544 521'%3E%3Cpath fill-rule='evenodd' fill='%239a7428' fill-opacity='.55' d='M368 291C520 291 640 396 640 540L640 585C640 655 603 697 550 697C515 697 495 693 465 697C430 702 415 740 398 772C384 798 362 812 330 812C270 812 195 772 145 722C112 685 96 625 96 550C96 400 205 291 368 291ZM368 420C420 420 458 470 458 545C458 620 420 678 368 678C316 678 278 620 278 545C278 470 316 420 368 420Z'/%3E%3C/svg%3E");
    }
    :root[data-theme="dark"] .process{ background:#111210; --paper:#f3f2e8; --line-invert:rgba(243,242,232,.14); }
    :root[data-theme="dark"] ::selection{ background:var(--coral); color:#f3f2e8; }
    :root[data-theme="dark"] .btn,:root[data-theme="dark"] .btn.ghost{ color:#f3f2e8; }
    :root[data-theme="dark"] .btn:hover{ background:var(--coral-dark); border-color:var(--coral-dark); color:#f3f2e8; }
    :root[data-theme="dark"] .btn.ghost:hover{ background:var(--teal); border-color:var(--teal); color:#f3f2e8; }
    :root[data-theme="dark"] .btn.invert,:root[data-theme="dark"] .btn.invert:hover{ background:#111210; border-color:#111210; color:#f3f2e8; }
    :root[data-theme="dark"] .btn.invert:hover{ background:#000; border-color:#000; }
    :root[data-theme="dark"] .route::before{ background:rgba(243,242,232,.3); }
    :root[data-theme="dark"] .lang-track::before{ background:var(--teal); }
    :root[data-theme="dark"] .tags li{ border-color:rgba(243,242,232,.22); }
    :root[data-theme="dark"] .card:hover b.num,:root[data-theme="dark"] .svc:hover b.num{ color:rgba(243,242,232,.22); }
    :root[data-theme="dark"] .card:hover p,:root[data-theme="dark"] .svc:hover p,:root[data-theme="dark"] .featured-card:hover p,:root[data-theme="dark"] .step-card:hover p{ color:#f3f2e8; }
    :root[data-theme="dark"] .step-card:hover::before{ background:#f3f2e8; }
    :root[data-theme="dark"] .project-card:hover .kicker::before{ background:#f3f2e8; }

    /* Calm hover: cards keep their fill, only the outline sharpens */
    :root[data-theme] .card:hover,:root[data-theme] .featured-card:hover,:root[data-theme] .step-card:hover,:root[data-theme] .project-card:hover,:root[data-theme] .svc:hover{ background:var(--surface); border-color:var(--gray); }
    :root[data-theme] .card:hover b.num,:root[data-theme] .svc:hover b.num{ color:var(--c, var(--mint)); }
    :root[data-theme] .card:hover p,:root[data-theme] .svc:hover p,:root[data-theme] .featured-card:hover p,:root[data-theme] .featured-card:hover .kicker,:root[data-theme] .step-card:hover p,:root[data-theme] .step-card:hover .kicker,:root[data-theme] .project-card:hover .desc,:root[data-theme] .project-card:hover .kicker,:root[data-theme] .project-card:hover .spec-list b{ color:var(--gray); }
    :root[data-theme] .step-card:hover::before{ width:44px; background:var(--c, var(--coral)); }
    :root[data-theme] .project-card:hover .kicker::before{ background:var(--c, var(--coral)); }
    :root[data-theme] .svc:hover .tags li{ border-color:var(--line); }
    :root[data-theme] .svc:hover .btn{ background:var(--coral); border-color:var(--coral); color:var(--ink); }
    :root[data-theme="dark"] .svc:hover .btn{ color:#f3f2e8; }

    .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    @media (max-width:960px){ .svc-grid{ grid-template-columns:1fr; } }
    .svc{
        position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
        background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
        padding:2.2rem; transition:background .25s ease, border-color .25s ease;
    }
    .svc:hover{ background:var(--c); border-color:var(--ink); }
    .svc b.num{
        position:absolute; z-index:-1; top:-.2em; right:-.05em;
        font-family:var(--f-display); font-size:9rem; font-weight:900; line-height:1; letter-spacing:-.05em;
        color:var(--c); user-select:none; transition:color .25s ease;
    }
    .svc:hover b.num{ color:var(--surface); }
    .svc h3{ font-size:1.55rem; margin:4.2rem 0 .9rem; }
    .svc p{ color:var(--gray); font-size:.96rem; line-height:1.65; }
    .svc:hover p{ color:var(--ink-soft); }
    .tags{ list-style:none; margin:1.5rem 0 2rem; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
    .tags li{
        font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
        border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; color:var(--ink);
    }
    .svc:hover .tags li{ border-color:var(--ink); }
    .svc .btn{ margin-top:auto; align-self:flex-start; }
    .svc:hover .btn{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

    /* ---- Portfolio grid ---- */
    .portfolio-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:24px;
    }
    @media (max-width:760px){ .portfolio-grid{ grid-template-columns:1fr; } }

    .project-card{
        display:flex;
        flex-direction:column;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        overflow:hidden;
        transition:background .25s ease, border-color .25s ease;
    }
    .project-card:hover{
        background:var(--c);
        border-color:var(--ink);
    }
    .project-card:hover .desc,
    .project-card:hover .kicker,
    .project-card:hover .spec-list b{ color:var(--ink-soft); }
    .project-card:hover .kicker::before{ background:var(--ink); }
    .project-media{
        aspect-ratio:16/10;
        background:var(--mint);
        overflow:hidden;
    }
    .project-media img{
        width:100%; height:100%; object-fit:cover;
        transition:transform .7s cubic-bezier(.4,0,.2,1);
    }
    .project-card:hover .project-media img{ transform:scale(1.05); }
    .project-body{
        padding:1.8rem 1.9rem 2rem;
        display:flex;
        flex-direction:column;
        gap:.9rem;
    }
    .project-body .kicker{ display:block; }
    .project-body .kicker::before{
        content:'';
        display:inline-block;
        width:14px;
        height:14px;
        margin-right:9px;
        vertical-align:-3px;
        background:var(--c, var(--coral));
        -webkit-mask:var(--blob-mask) no-repeat center/contain;
        mask:var(--blob-mask) no-repeat center/contain;
    }
    .project-body h2{ font-size:1.5rem; }
    .project-body .desc{ font-size:.94rem; }

    .spec-list{
        list-style:none;
        margin:.4rem 0 0;
        padding:.9rem 0 0;
        border-top:1px solid var(--line);
        display:flex;
        flex-direction:column;
        gap:.55rem;
    }
    .spec-list li{
        display:flex;
        justify-content:space-between;
        gap:16px;
        font-size:.86rem;
    }
    .spec-list li b{
        font-family:var(--f-mono);
        font-weight:400;
        font-size:.72rem;
        letter-spacing:.06em;
        text-transform:uppercase;
        color:var(--gray);
        flex-shrink:0;
    }
    .spec-list li span{
        text-align:right;
        color:var(--ink);
    }



    /* ================= v2 additions: shared by all generated pages ================= */
    .skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:999; }
    .skip:focus{ left:8px; top:8px; }
    .alt{ background:var(--paper-2); }

    /* header: six links + CTA need a little more room */
    @media (max-width:1240px){ .nav-links{ gap:20px; margin-left:28px; } }
    @media (max-width:860px){ .nav-links{ gap:0; margin-left:0; } }

    /* hero variants */
    .hero .kicker{ display:block; margin-bottom:22px; }
    .hero-grid.single{ grid-template-columns:minmax(0,1fr); }
    .hero.compact{ padding:clamp(64px,8vw,112px) 0 clamp(40px,5vw,72px); }
    .hero.compact h1{ font-size:clamp(2.1rem,4.8vw,3.5rem); max-width:860px; }
    .hero.no-art{ padding-bottom:clamp(48px,6vw,88px); }
    .hero.no-art .hero-grid{ grid-template-columns:minmax(0,1fr); }
    @media (max-width:860px){ .hero.no-art{ padding-bottom:clamp(40px,8vw,64px); } }
    @media (max-width:768px){ .hero.no-art{ padding:3.5rem var(--pad) 3rem; } }
    .hero .route{ margin-top:0; }

    /* promise strip */
    .promise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 32px; }
    @media (max-width:960px){ .promise-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .promise-grid{ grid-template-columns:1fr; } }
    .promise{ border-top:2px solid var(--ink); padding-top:1.4rem; }
    .promise::before{
        content:''; display:block; width:30px; height:30px; margin-bottom:1.1rem;
        background:var(--c, var(--coral));
        -webkit-mask:var(--blob-mask) no-repeat center/contain; mask:var(--blob-mask) no-repeat center/contain;
    }
    .promise h3{ font-size:1.2rem; margin-bottom:.6rem; }
    .promise p{ color:var(--gray); font-size:.94rem; line-height:1.65; }

    /* pricing */
    .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    @media (max-width:860px){ .price-grid{ grid-template-columns:1fr; } }
    .price-card{
        background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2rem;
    }
    .price-card::before{ content:''; display:block; width:44px; height:10px; margin-bottom:1.4rem; border-radius:999px; background:var(--c, var(--coral)); }
    .price-card h3{ font-size:1.2rem; margin-bottom:.7rem; }
    .price-card p{ color:var(--gray); font-size:.95rem; line-height:1.65; }
    .price-foot{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
    .factor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 28px; }
    @media (max-width:960px){ .factor-grid{ grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .factor-grid{ grid-template-columns:1fr; } }
    .factor{ border-top:1px solid var(--line); padding-top:1.1rem; }
    .factor h3{ font-size:1.05rem; margin-bottom:.45rem; }
    .factor p{ color:var(--gray); font-size:.92rem; line-height:1.6; }

    /* FAQ */
    .faq-list{ border-bottom:1px solid var(--line); max-width:860px; }
    .faq-list.wide{ max-width:none; }
    details.q{ border-top:1px solid var(--line); }
    details.q summary{
        list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
        padding:1.35rem 0; font-family:var(--f-display); font-weight:800; font-size:1.15rem; line-height:1.3; letter-spacing:-.01em;
    }
    details.q summary::-webkit-details-marker{ display:none; }
    details.q summary::after{
        content:''; flex-shrink:0; width:22px; height:22px; border-radius:50%;
        border:7px solid var(--coral); background:var(--paper); transition:border-color .2s ease, background .2s ease;
    }
    details.q[open] summary::after{ background:var(--coral); border-color:var(--coral); }
    details.q summary:hover::after{ border-color:var(--ink); }
    details.q .a{ padding:0 3rem 1.6rem 0; color:var(--gray); font-size:1rem; line-height:1.75; max-width:760px; }
    .faq-group{ margin-bottom:3.4rem; scroll-margin-top:90px; }
    .faq-group h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:1.2rem; }
    .faq-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2rem; }
    .faq-nav a{
        font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
        border:1px solid var(--line); border-radius:999px; padding:.6rem 1rem; transition:background .2s ease, border-color .2s ease;
    }
    .faq-nav a:hover{ background:var(--mint); border-color:var(--mint); color:#1b1d1a; }
    .faq-more{ margin-top:2.2rem; }

    /* contact block: text + channels on the left, brief on the right */
    .contact.contact-split{ text-align:left; }
    .contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:start; }
    @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
    .contact-split .section-title{ margin:0 0 1.2rem; max-width:none; font-size:clamp(1.9rem,3.6vw,2.9rem); }
    .contact-split .desc{ margin:0 0 2.2rem; max-width:480px; }
    .channels{ list-style:none; margin:0; padding:0; border-bottom:2px solid var(--ink); }
    .channels a{
        display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none;
        padding:1.05rem 0; border-top:2px solid var(--ink); transition:padding-left .2s ease;
    }
    .channels a:hover{ padding-left:10px; }
    .channels small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; }
    .channels b{ font-family:var(--f-display); font-weight:800; font-size:1.25rem; word-break:break-word; }
    .channels .arrow{ flex-shrink:0; width:26px; height:26px; border:7px solid var(--ink); border-radius:50%; }
    .brief{ background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); }
    .brief h3{ font-size:1.3rem; margin-bottom:1.3rem; }
    .brief label.f{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin:1.2rem 0 .5rem; }
    .brief .chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .chip{ position:relative; }
    .chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
    .chip span{
        display:inline-block; font-size:.9rem; font-weight:500; padding:.55rem 1rem; border-radius:999px;
        border:1.5px solid var(--line); transition:background .2s ease, border-color .2s ease; cursor:pointer;
    }
    .chip input:checked + span{ background:var(--coral); border-color:var(--coral); color:#1b1d1a; }
    :root[data-theme="dark"] .chip input:checked + span{ color:#f3f2e8; }
    .chip input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
    .brief textarea, .brief input[type=text]{
        width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper-2);
        border:1.5px solid transparent; border-radius:16px; padding:.9rem 1.1rem; resize:vertical;
    }
    .brief textarea{ min-height:120px; }
    .brief textarea:focus, .brief input[type=text]:focus{ outline:none; border-color:var(--ink); }
    .brief .send{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.4rem; }
    .brief .send .btn{ cursor:pointer; font-size:11px; padding:.9rem 1.3rem; }
    .brief .send-l{ margin-top:1.6rem; }
    .brief .note{ margin-top:1rem; font-size:.85rem; color:var(--gray); line-height:1.5; min-height:1.3em; }
    :root[data-theme="dark"] .contact .brief .btn.invert{ background:var(--coral); border-color:var(--coral); }
    .contact .brief .btn.invert{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
    .contact .brief .btn.invert:hover{ background:var(--coral); border-color:var(--coral); color:#1b1d1a; }
    :root[data-theme="dark"] .contact .brief .btn.invert:hover{ background:var(--coral-dark); border-color:var(--coral-dark); color:#f3f2e8; }

    /* footer: contact column */
    .footer-in .foot-contact a{ display:block; }

    /* checklists and misc */
    .center-head{ text-align:center; margin-left:auto; margin-right:auto; }
    .center-head .desc{ margin:0 auto; }
    .more-link{ margin-top:2.4rem; display:flex; justify-content:center; }
    .not-found{ min-height:60vh; display:flex; align-items:center; }
    @media (max-width:768px){
        .contact.contact-split{ padding:4rem var(--pad); }
        section > .container{ padding:0; }
    }

    /* ================= online-store page ================= */
    .hero-art.has-shot{ display:flex; align-items:center; pointer-events:auto; }
    .hero-art.has-shot::before{ display:none; }
    .shot-frame{ position:relative; width:100%; margin:0; }
    .shot-frame::before{
        content:''; position:absolute; z-index:0; left:14%; right:-10%; top:52%; bottom:-24%;
        background:var(--coral); border-radius:999px 999px 0 0;
    }
    .shot-frame::after{
        content:''; position:absolute; z-index:0; width:24%; aspect-ratio:1; left:12%; top:-12%;
        background:var(--mint); border-radius:50%;
    }
    .shot-frame img{ position:relative; z-index:1; width:100%; height:auto; border-radius:20px; border:1px solid var(--line); background:var(--surface); }
    @media (max-width:860px){
        .hero-grid > .hero-art.has-shot{ height:auto; margin-top:3rem; margin-bottom:0; padding:0 4% 0; }
        .shot-frame::before{ bottom:-40%; }
    }

    /* flat colour tiles, as in the presentation */
    .tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .tiles.two{ grid-template-columns:repeat(2,1fr); }
    @media (max-width:860px){ .tiles, .tiles.two{ grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .tiles, .tiles.two{ grid-template-columns:1fr; } }
    .tile{ background:var(--c); color:var(--ink); border-radius:var(--radius); padding:2rem 2rem 2.1rem; }
    .tile h3{ font-size:1.55rem; margin-bottom:.6rem; }
    .tile p{ font-size:1rem; line-height:1.5; }
    .tile.paper{ background:var(--surface); border:1px solid var(--line); }
    .tile.ink{ background:#111210; color:#f3f2e8; }
    .tile.slim{ padding:1.5rem 1.7rem; }
    .tile.slim h3{ font-size:1.2rem; margin:0; }

    /* screenshot next to colour chips */
    .split{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
    @media (max-width:900px){ .split{ grid-template-columns:1fr; } }
    .shot{ margin:0; }
    .shot img{ width:100%; height:auto; border-radius:20px; border:1px solid var(--line); background:var(--surface); display:block; }
    .shot figcaption{ margin-top:1rem; font-family:var(--f-display); font-weight:800; font-size:1.2rem; }
    .shots{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    @media (max-width:760px){ .shots{ grid-template-columns:1fr; } }
    .chip-col{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
    .chip-col li{ background:var(--c); color:var(--ink); border-radius:20px; padding:1.15rem 1.5rem; font-family:var(--f-display); font-weight:800; font-size:1.2rem; line-height:1.3; }
    .sub-line{ margin-top:2rem; font-family:var(--f-display); font-weight:800; font-size:1.2rem; color:var(--gray); }

    /* price-monitoring flow */
    .flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:52px; }
    @media (max-width:960px){ .flow{ grid-template-columns:1fr 1fr; gap:48px 52px; } }
    @media (max-width:560px){ .flow{ grid-template-columns:1fr; gap:46px; } }
    .flow li{ position:relative; background:var(--c); color:var(--ink); border-radius:var(--radius); padding:1.8rem; }
    .flow li h3{ font-size:1.5rem; margin-bottom:.6rem; }
    .flow li p{ font-size:.98rem; line-height:1.5; }
    .flow li::after{
        content:''; position:absolute; width:30px; height:24px; background:var(--paper);
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 8h16V1l14 11-14 11v-7H0z'/%3E%3C/svg%3E") no-repeat center/contain;
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 8h16V1l14 11-14 11v-7H0z'/%3E%3C/svg%3E") no-repeat center/contain;
        right:-41px; top:calc(50% - 12px);
    }
    .flow li:last-child::after{ display:none; }
    @media (max-width:960px){ .flow li:nth-child(2)::after{ display:none; } }
    @media (max-width:560px){
        .flow li:nth-child(2)::after{ display:block; }
        .flow li::after{ right:calc(50% - 15px); top:auto; bottom:-38px; transform:rotate(90deg); }
    }
    .flow-note{ margin-top:2rem; font-family:var(--f-display); font-weight:800; font-size:1.2rem; color:var(--sand); }
    .process .tile, .process .flow li{ color:var(--ink); }

    /* admin panel list */
    .promise-grid.three{ grid-template-columns:repeat(3,1fr); }
    @media (max-width:900px){ .promise-grid.three{ grid-template-columns:1fr 1fr; } }
    @media (max-width:560px){ .promise-grid.three{ grid-template-columns:1fr; } }

    /* CRM / 1C */
    .crm{ display:grid; grid-template-columns:1fr 70px 1.7fr; align-items:center; gap:0; }
    @media (max-width:860px){ .crm{ grid-template-columns:1fr; gap:18px; } .crm .crm-arrows{ display:none; } }
    .crm-store{ background:#111210; color:#f3f2e8; border-radius:var(--radius); padding:2.2rem; }
    .crm-store h3{ font-size:1.9rem; margin:1.4rem 0 .5rem; }
    .crm-store p{ color:var(--mint); }
    .crm-store::before{
        content:''; display:block; width:34px; height:34px; background:var(--sand);
        -webkit-mask:var(--blob-mask) no-repeat center/contain; mask:var(--blob-mask) no-repeat center/contain;
    }
    .crm-arrows{ display:flex; flex-direction:column; gap:10px; align-items:center; }
    .crm-arrows i{ width:44px; height:34px; background:var(--coral);
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 8h16V1l14 11-14 11v-7H0z'/%3E%3C/svg%3E") no-repeat center/contain;
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 8h16V1l14 11-14 11v-7H0z'/%3E%3C/svg%3E") no-repeat center/contain; }
    .crm-arrows i + i{ background:var(--teal); transform:scaleX(-1); }
    .crm-list{ display:flex; flex-direction:column; gap:14px; }
    .crm-list div{ background:var(--c); color:var(--ink); border-radius:20px; padding:1.3rem 1.7rem; display:grid; grid-template-columns:1fr 1.2fr; gap:16px; align-items:center; }
    .crm-list b{ font-family:var(--f-display); font-weight:900; font-size:1.5rem; }
    @media (max-width:560px){ .crm-list div{ grid-template-columns:1fr; gap:4px; } }

    /* AI manager chat */
    .chat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,3vw,2rem); display:flex; flex-direction:column; gap:14px; }
    .chat p{ max-width:78%; padding:1rem 1.3rem; border-radius:22px; font-size:1rem; line-height:1.5; }
    .chat .u{ background:var(--paper-2); align-self:flex-start; border:1px solid var(--line); }
    .chat .b{ background:var(--mint); color:var(--ink); align-self:flex-start; margin-left:14px; }
    :root[data-theme="dark"] .chat .b{ background:var(--mint); }

    /* packages table */
    .table-wrap{ overflow-x:auto; }
    table.pkg{ width:100%; border-collapse:collapse; min-width:560px; }
    table.pkg th, table.pkg td{ text-align:left; padding:1.05rem 1rem; border-bottom:1px solid var(--line-invert); font-size:1.05rem; }
    table.pkg thead th{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; border-bottom:2px solid var(--paper); }
    table.pkg tbody th{ font-weight:500; }
    table.pkg td.no{ color:var(--gray-light); }
    .pkg-note{ margin-top:2rem; color:var(--gray-light); max-width:640px; line-height:1.6; }
    .pkg-cta{ margin-top:1.6rem; }
    .pkg-cta .btn{ background:var(--coral); border-color:var(--coral); color:#1b1d1a; }
    :root[data-theme="dark"] .pkg-cta .btn{ color:#f3f2e8; }
    .pkg-cta .btn:hover{ background:var(--paper); border-color:var(--paper); color:#1b1d1a; }
    @media (max-width:640px){
        table.pkg{ min-width:0; }
        table.pkg th, table.pkg td{ padding:.8rem .3rem; font-size:.74rem; word-break:normal; overflow-wrap:normal; hyphens:none; }
        table.pkg tbody th{ width:34%; }
        table.pkg thead th{ font-size:.9rem; }
    }