/* =============================================
   RPL NET — Megacorp Evil Corp Cinematic
   Cold silver, DM Serif Display, E Corp vibes
   ============================================= */

:root {
    --c-bg:       #0c0c0e;
    --c-surface:  #111114;
    --c-surface2: #161619;
    --c-border:   #1e1e24;
    --c-border2:  #28282f;
    --c-text:     #7a7a86;
    --c-dim:      #50505a;
    --c-bright:   #d0d0d8;
    --c-white:    #e8e8ec;
    --c-accent:   #c8c8d4;
    --c-accent08: rgba(200,200,212,.06);
    --c-accent15: rgba(200,200,212,.12);
    --c-accent30: rgba(200,200,212,.25);
    --f-serif:    'DM Serif Display',Georgia,'Times New Roman',serif;
    --f-sans:     'Inter',system-ui,sans-serif;
    --f-mono:     'JetBrains Mono',ui-monospace,monospace;
    --ease:       cubic-bezier(.16,1,.3,1);
    --ease-out:   cubic-bezier(.0,.0,.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box }
img,video,canvas,iframe { max-width:100%;height:auto }
html { scroll-behavior:smooth;font-size:16px;scrollbar-color:#151518 transparent;overflow-x:hidden }
body { font-family:var(--f-sans);background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;margin:0;padding:0;overflow-x:hidden }
#page-wrap { overflow-x:hidden;overflow-y:auto;width:100%;position:relative }
::selection { background:var(--c-accent);color:var(--c-bg) }
a { color:inherit;text-decoration:none }
img { display:block;max-width:100% }
button,input,select,textarea { font:inherit }

/* ---- Background Grid Pattern ---- */
body::before {
    content:'';
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(200,200,212,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,200,212,.03) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
}

/* ---- Layout ---- */
.a { color:var(--c-accent) }
.wrap { max-width:1000px;width:100%;margin:0 auto;padding:0 3rem }

/* =============================================
   Nav
   ============================================= */
#nav {
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:3.5rem;padding:0 3rem;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(12,12,14,.55);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
    border-bottom:1px solid transparent;
    transform:translateY(-100%);animation:slideDown .6s var(--ease) .3s forwards;
    transition:border-color .4s,background .4s;
}
#nav.scrolled { border-bottom-color:var(--c-border);background:rgba(12,12,14,.92) }

.nav-brand {
    font:400 1.15rem/1 var(--f-serif);letter-spacing:.15em;color:var(--c-white);
    display:flex;align-items:center;gap:.6rem;
}
.nav-links { display:flex;align-items:center;gap:2rem }
.nav-links a { font:400 .8rem/1 var(--f-sans);color:var(--c-dim);transition:color .3s }
.nav-links a:hover { color:var(--c-white) }
.lang-btn { background:0;border:1px solid var(--c-border2);color:var(--c-accent);font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;padding:.28rem .6rem;transition:all .25s }
.lang-btn:hover { background:var(--c-accent08);border-color:var(--c-accent) }
.mobile-menu { display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer;padding:4px }
.mobile-menu span { display:block;width:20px;height:1.5px;background:var(--c-bright);transition:all .3s }

/* =============================================
   Sections
   ============================================= */
.s { position:relative;z-index:1;padding:10rem 0 }
.s-label { font:500 .7rem/1 var(--f-mono);color:var(--c-accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem }

/* Reveal */
[data-r] { opacity:0;transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out) }
[data-r="up"]   { transform:translateY(40px) }
[data-r="left"] { transform:translateX(-40px) }
[data-r="right"]{ transform:translateX(40px) }
[data-r="blur"] { filter:blur(10px);transform:translateY(12px) }
[data-r="fade"] { transform:none }
[data-r].vis { opacity:1;transform:none;filter:none }
[data-d="1"]{transition-delay:.12s}[data-d="2"]{transition-delay:.24s}[data-d="3"]{transition-delay:.36s}[data-d="4"]{transition-delay:.48s}[data-d="5"]{transition-delay:.6s}

/* =============================================
   Hero — Cinematic
   ============================================= */
.s-hero {
    min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
    padding:0 3rem;
    background:radial-gradient(ellipse 60% 50% at 50% 45%, rgba(200,200,212,.02) 0%, transparent 70%);
}
.hero-inner { position:relative;z-index:2;max-width:750px }

/* Protocol Logo */
.hero-logo-text {
    margin:0 auto 2.5rem;
    opacity:0;animation:logoFadeIn .8s var(--ease) .2s forwards;
    position:relative;
    display:flex;align-items:baseline;justify-content:center;
    gap:0;
}
.hero-logo-text::before {
    content:'';position:absolute;inset:-30px -60px;
    background:radial-gradient(ellipse 70% 60%,rgba(200,200,212,.04) 0%,transparent 70%);
    animation:logoGlow 4s ease-in-out 2s infinite alternate;
    pointer-events:none;
}
.hero-proto {
    font:300 clamp(2.5rem,6vw,4.5rem)/1 var(--f-mono);
    color:var(--c-dim);letter-spacing:-.02em;
    opacity:0;animation:protoSlide .6s var(--ease) .4s forwards;
    position:relative;z-index:1;
}
.hero-rpl {
    font:400 clamp(4rem,10vw,7.5rem)/1 var(--f-serif);
    color:var(--c-white);letter-spacing:.1em;
    opacity:0;animation:fadeUp .8s var(--ease) .7s forwards;
    position:relative;z-index:1;
}

/* Nav protocol logo */
.nav-proto {
    font:300 .7rem/1 var(--f-mono);color:var(--c-dim);
    letter-spacing:-.02em;margin-right:.1rem;
}
.nav-rpl {
    font:400 1.15rem/1 var(--f-serif);color:var(--c-white);
    letter-spacing:.12em;margin-right:.08rem;
}

.hero-title {
    font:400 clamp(1.3rem,3vw,1.8rem)/1.4 var(--f-serif);color:var(--c-white);
    max-width:550px;margin:0 auto 1.5rem;text-align:center;
    opacity:0;animation:fadeUp .8s var(--ease) 1s forwards;
}
.hero-tagline {
    font:300 1.1rem/1.8 var(--f-sans);color:var(--c-text);min-height:2rem;margin-bottom:3.5rem;
    opacity:0;animation:fadeUp .6s var(--ease) 1.6s forwards;
}
.hero-tagline .word {
    display:inline-block;opacity:0;transform:translateY(8px);
    animation:wordReveal .5s var(--ease) forwards;
}
.hero-actions {
    display:flex;gap:1rem;justify-content:center;
    opacity:0;animation:fadeUp .6s var(--ease) 1.9s forwards;
}
.scroll-cue { position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);opacity:0;animation:fadeIn .6s var(--ease) 2.5s forwards }
.scroll-cue-line { width:1px;height:48px;background:linear-gradient(to bottom,var(--c-accent),transparent);animation:scrollPulse 3s ease-in-out infinite }

/* ---- Buttons ---- */
.btn {
    display:inline-flex;align-items:center;padding:.85rem 2.2rem;
    font:500 .82rem/1 var(--f-sans);letter-spacing:.05em;
    border:1px solid transparent;transition:all .35s var(--ease);border-radius:0;
}
.btn-fill { background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent) }
.btn-fill:hover { background:var(--c-white);box-shadow:0 4px 30px rgba(200,200,212,.1) }
.btn-line { background:0;color:var(--c-bright);border-color:var(--c-border2) }
.btn-line:hover { border-color:var(--c-bright) }
.magnetic { display:inline-block;transition:transform .3s var(--ease) }

/* ---- Marquee ---- */
.marquee { overflow:hidden;white-space:nowrap;padding:1.2rem 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);position:relative;z-index:1;width:100% }
.marquee-track { display:inline-flex;gap:3rem;animation:marquee 50s linear infinite }
.marquee-track span { font:500 .6rem/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim) }
.marquee-track .sep { color:var(--c-accent);opacity:.15;font-size:.4rem }

/* ---- Divider — Geometric ---- */
.divider {
    position:relative;z-index:1;height:1px;background:var(--c-border);
}
.divider::before {
    content:'';position:absolute;left:50%;top:-4px;
    width:9px;height:9px;border:1px solid var(--c-border2);
    transform:translateX(-50%) rotate(45deg);
    background:var(--c-bg);
}

/* =============================================
   Capabilities
   ============================================= */
.cap-head h2 { font:400 clamp(1.6rem,3vw,2.4rem)/1.3 var(--f-serif);color:var(--c-white);max-width:550px;letter-spacing:.01em }
.cap-head p { color:var(--c-text);font-size:.95rem;line-height:1.75;margin-top:1rem;max-width:480px }
.cap-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-border);margin-top:4rem }
.cap-item { background:var(--c-bg);padding:3rem;transition:background .4s var(--ease) }
.cap-item:hover { background:var(--c-surface) }
.cap-num { font:600 .65rem/1 var(--f-mono);color:var(--c-accent);letter-spacing:.08em;opacity:.4;margin-bottom:1.5rem;display:block }
.cap-item h3 { font:400 1.15rem/1.3 var(--f-serif);color:var(--c-bright);margin-bottom:.8rem }
.cap-item p { font-size:.88rem;line-height:1.8;color:var(--c-dim) }

/* =============================================
   Section headers (reused by steps, solutions, pricing)
   ============================================= */
.cases-head h2 { font:400 clamp(1.6rem,3vw,2.4rem)/1.3 var(--f-serif);color:var(--c-white) }
.cases-head p { color:var(--c-text);font-size:.95rem;line-height:1.75;margin-top:.8rem }
.steps-head { text-align:center }
.steps-head h2 { margin:0 auto }
.pricing-btn { width:100%;justify-content:center }
.honey-field { display:none }

/* =============================================
   Connect — Integrated AI
   ============================================= */
.s-connect { background:linear-gradient(180deg,transparent,rgba(200,200,212,.004) 50%,transparent) }
.connect-head { text-align:center;margin-bottom:3.5rem }
.connect-head h2 { font:400 clamp(1.6rem,3vw,2.4rem)/1.3 var(--f-serif);color:var(--c-white) }
.connect-head p:not(.s-label) { color:var(--c-text);font-size:.95rem;line-height:1.75;margin-top:.8rem;max-width:500px;margin-left:auto;margin-right:auto }

.connect-chat {
    max-width:660px;margin:0 auto;
    background:var(--c-surface);border:1px solid var(--c-border);
    overflow:hidden;transition:border-color .3s;
}
.connect-chat:focus-within { border-color:var(--c-border2) }
.connect-chat-head {
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1.4rem;border-bottom:1px solid var(--c-border);
}
.chat-head-info { display:flex;align-items:center;gap:.55rem }
.chat-head-title { font:600 .8rem/1 var(--f-sans);color:var(--c-white);letter-spacing:.02em }
.connect-powered { display:flex;align-items:center;gap:.35rem;font:.58rem/1 var(--f-sans);color:var(--c-dim) }
.chat-powered-logo { height:11px;opacity:.25;filter:grayscale(1) brightness(2);transition:opacity .25s }
.chat-powered-logo:hover { opacity:.5;filter:grayscale(0) }

.connect-messages {
    min-height:280px;max-height:380px;overflow-y:auto;padding:1.3rem 1.4rem;
    display:flex;flex-direction:column;gap:.7rem;
    scrollbar-width:thin;scrollbar-color:var(--c-border) transparent;
}
/* Chat messages — generated by JS at runtime */
.chat-msg { display:flex;animation:msgIn .35s var(--ease) both }
.chat-msg-user { justify-content:flex-end }
.chat-msg-assistant { justify-content:flex-start }
.chat-bubble { max-width:80%;padding:.7rem 1rem;font-size:.85rem;line-height:1.7;word-wrap:break-word }
.chat-bubble-user { background:var(--c-accent);color:var(--c-bg);font-weight:500 }
.chat-bubble-assistant { background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-border) }
.chat-typing { display:flex;align-items:center;gap:3px;padding:.8rem 1rem }
.chat-typing span { width:4px;height:4px;border-radius:50%;background:var(--c-accent);opacity:.3;animation:bounce 1.4s ease-in-out infinite }
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}

.connect-input {
    display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--c-border);
}
#connect-input {
    flex:1;background:var(--c-bg);border:1px solid var(--c-border);
    color:var(--c-white);font:.88rem/1.5 var(--f-sans);padding:.7rem 1rem;outline:0;
    transition:border-color .25s;
}
#connect-input:focus { border-color:var(--c-accent) }
#connect-input::placeholder { color:var(--c-dim) }
#connect-send {
    background:var(--c-accent);border:0;color:var(--c-bg);
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .25s var(--ease);
}
#connect-send:hover { background:var(--c-white) }

.connect-alt { margin-top:2.5rem;font-size:.85rem;color:var(--c-dim);text-align:center }

/* Contact form */
.contact-form-wrap {
    max-width:660px;margin:2rem auto 0;
}
.contact-form-header {
    font:.75rem/1 var(--f-mono);color:var(--c-dim);text-align:center;
    margin-bottom:1rem;letter-spacing:.05em;
}
.contact-form { display:flex;flex-direction:column;gap:.6rem; }
.contact-row { display:flex;gap:.6rem; }
.contact-input, .contact-textarea {
    flex:1;background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-white);
    font:.85rem/1.5 var(--f-sans);padding:.65rem 1rem;outline:0;transition:border-color .2s;
    font-family:var(--f-sans);
}
.contact-input:focus, .contact-textarea:focus { border-color:var(--c-accent); }
.contact-input::placeholder, .contact-textarea::placeholder { color:var(--c-dim); }
.contact-textarea { resize:vertical;min-height:80px; }

.connect-phone { color:var(--c-accent);font-weight:500;transition:opacity .25s }
.connect-phone:hover { opacity:.6 }
.connect-sep { color:var(--c-dim);margin:0 .4rem }
.connect-email { color:var(--c-accent);font-weight:500;transition:opacity .25s }
.connect-email:hover { opacity:.6 }

/* ---- Status dot (reused in chat header) ---- */
.status-dot { width:6px;height:6px;border-radius:50%;background:var(--c-accent);animation:pulse 2.5s ease-in-out infinite;flex-shrink:0 }

/* ---- Trust bar ---- */
.trust-bar {
    position:relative;z-index:1;padding:1.2rem 0;
    background:var(--c-surface);border-top:1px solid var(--c-border);
}
.trust-text {
    text-align:center;font:.7rem/1.6 var(--f-mono);color:var(--c-dim);
    letter-spacing:.05em;
}

/* ---- Social proof ---- */
.s-proof { position:relative;z-index:1;padding:4rem 0; }
.proof-items { display:flex;align-items:center;justify-content:center;gap:4rem; }
.proof-item { text-align:center; }
.proof-number { font:400 2.5rem/1 var(--f-serif);color:var(--c-white);margin-bottom:.3rem; }
.proof-label { font:.7rem/1 var(--f-mono);color:var(--c-dim);letter-spacing:.1em;text-transform:uppercase; }

/* ---- Footer ---- */
.foot { position:relative;z-index:1;border-top:1px solid var(--c-border);padding:2.5rem 0 }
.foot-inner { display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--c-dim) }
.foot .nav-brand { font:400 1rem/1 var(--f-serif);letter-spacing:.15em }
.foot-mid a { color:var(--c-accent);transition:opacity .25s }
.foot-mid a:hover { opacity:.6 }

/* =============================================
   Solutions — Cards with mockups
   ============================================= */
.sol-grid {
    display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:4rem;
}
.sol-card {
    background:var(--c-surface);border:1px solid var(--c-border);
    overflow:hidden;transition:all .3s var(--ease);position:relative;
    cursor:pointer;
}
.sol-card:hover { border-color:var(--c-accent);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3) }

/* Solution preview area */
.sol-mockup {
    height:160px;background:var(--c-bg);border-bottom:1px solid var(--c-border);
    overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:.6rem;
    transition:background .3s var(--ease);
}
.sol-card:hover .sol-mockup, .sol-featured:hover .sol-mockup { background:var(--c-surface2) }
.sol-mockup-icon {
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--c-border2);background:var(--c-surface);
    transition:all .3s var(--ease);
}
.sol-card:hover .sol-mockup-icon, .sol-featured:hover .sol-mockup-icon {
    border-color:var(--c-accent);background:var(--c-accent08);
}
.sol-mockup-icon svg { width:20px;height:20px;stroke:var(--c-dim);fill:none;stroke-width:1.5;transition:stroke .3s }
.sol-card:hover .sol-mockup-icon svg, .sol-featured:hover .sol-mockup-icon svg { stroke:var(--c-accent) }
.sol-mockup-label {
    font:.62rem/1 var(--f-mono);color:var(--c-dim);letter-spacing:.08em;text-transform:uppercase;
    transition:color .3s;
}
.sol-card:hover .sol-mockup-label, .sol-featured:hover .sol-mockup-label { color:var(--c-accent) }

/* Glassmorphism modal */
.sol-modal-overlay {
    position:fixed;inset:0;z-index:9000;
    background:rgba(12,12,14,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    display:flex;align-items:center;justify-content:center;padding:1rem;
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sol-modal-overlay.active { opacity:1;pointer-events:all; }
.sol-modal {
    width:100%;max-width:1100px;height:85vh;
    background:rgba(17,17,20,.7);border:1px solid var(--c-border);
    border-radius:4px;overflow:hidden;
    display:flex;flex-direction:column;
    transform:scale(.95);transition:transform .3s var(--ease);
    backdrop-filter:blur(10px);
}
.sol-modal-overlay.active .sol-modal { transform:scale(1); }
.sol-modal-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:.6rem 1rem;border-bottom:1px solid var(--c-border);
    background:rgba(12,12,14,.5);flex-shrink:0;
}
.sol-modal-title { font:.75rem/1 var(--f-mono);color:var(--c-dim); }
.sol-modal-close {
    background:none;border:1px solid var(--c-border);color:var(--c-accent);
    padding:.3rem .8rem;font:.7rem/1 var(--f-mono);cursor:pointer;
}
.sol-modal-close:hover { background:var(--c-surface2); }
.sol-modal iframe { flex:1;width:100%;border:0; }

/* Card content */
.sol-body { padding:1.5rem }
.sol-icon { margin-bottom:1rem }
.sol-icon svg { width:28px;height:28px;stroke:var(--c-accent);fill:none;stroke-width:1.5 }
.sol-body h3 { font:400 1.05rem/1.3 var(--f-serif);color:var(--c-bright);margin-bottom:.6rem }
.sol-body p { font-size:.82rem;line-height:1.75;color:var(--c-dim) }
.sol-tags { display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem }
.sol-tags span { font:.52rem/1 var(--f-mono);letter-spacing:.05em;color:var(--c-dim);padding:.12rem .4rem;border:1px solid var(--c-border);text-transform:uppercase }
.sol-note { font:.85rem/1.7 var(--f-sans);color:var(--c-text);max-width:500px;margin:0 auto }

/* =============================================
   How it works — 3 steps visual
   ============================================= */
.steps-visual {
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:4rem;
    position:relative;
}
.steps-visual::before {
    content:'';position:absolute;top:2.8rem;left:16%;right:16%;
    height:1px;background:var(--c-border);z-index:0;
}
.step-v {
    text-align:center;position:relative;z-index:1;padding:0 1.5rem;
}
.step-v-num {
    width:56px;height:56px;margin:0 auto 1.5rem;
    display:flex;align-items:center;justify-content:center;
    font:400 1.5rem/1 var(--f-serif);color:var(--c-white);
    border:1px solid var(--c-border2);background:var(--c-bg);
    position:relative;
}
.step-v-num::before {
    content:'';position:absolute;inset:-4px;
    border:1px solid var(--c-border);
}
.step-v h3 {
    font:400 1.05rem/1.3 var(--f-serif);color:var(--c-bright);margin-bottom:.6rem;
}
.step-v p {
    font:.85rem/1.7 var(--f-sans);color:var(--c-dim);max-width:260px;margin:0 auto;
}

/* =============================================
   Featured solution — full width
   ============================================= */
.sol-featured {
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    background:var(--c-surface);border:1px solid var(--c-border);
    margin-top:4rem;margin-bottom:1.5rem;overflow:hidden;position:relative;
    transition:all .3s var(--ease);cursor:pointer;
}
.sol-featured:hover { border-color:var(--c-accent);box-shadow:0 8px 30px rgba(0,0,0,.3) }
.sol-featured .sol-mockup {
    height:220px;border-bottom:0;border-right:1px solid var(--c-border);
}
.sol-featured .sol-body {
    padding:2rem;display:flex;flex-direction:column;justify-content:center;
}

/* =============================================
   Pricing — Accessible
   ============================================= */
.s-pricing { background:linear-gradient(180deg,transparent,rgba(200,200,212,.006) 50%,transparent) }
.pricing-grid {
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--c-border);margin-top:4rem;
}
.pricing-card {
    background:var(--c-bg);padding:2.5rem 2rem;
    display:flex;flex-direction:column;
    transition:background .4s var(--ease);
}
.pricing-card:hover { background:var(--c-surface) }
.pricing-card.featured {
    background:var(--c-surface);position:relative;
}
.pricing-card.featured::before {
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--c-accent);
}
.pricing-name {
    font:400 1.2rem/1 var(--f-serif);color:var(--c-white);margin-bottom:.4rem;
}
.pricing-desc {
    font:.8rem/1.6 var(--f-sans);color:var(--c-dim);margin-bottom:1.5rem;
}
.pricing-price {
    font:400 2rem/1 var(--f-serif);color:var(--c-white);margin-bottom:.3rem;
}
.pricing-price .pricing-unit {
    font:.75rem/1 var(--f-sans);color:var(--c-dim);font-weight:400;
}
.pricing-note {
    font:.7rem/1.4 var(--f-mono);color:var(--c-dim);margin-bottom:1.5rem;
    letter-spacing:.02em;
}
.pricing-list {
    list-style:none;display:flex;flex-direction:column;gap:.5rem;
    margin-bottom:2rem;flex:1;
}
.pricing-list li {
    font:.82rem/1.5 var(--f-sans);color:var(--c-text);
    padding-left:1.2rem;position:relative;
}
.pricing-list li::before {
    content:'—';position:absolute;left:0;color:var(--c-accent);
}
.pricing-cta {
    margin-top:auto;
}
.pricing-badge {
    display:inline-block;font:.55rem/1 var(--f-mono);color:var(--c-accent);
    border:1px solid rgba(200,200,212,.2);padding:.2rem .5rem;
    letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;
}
.pricing-footer {
    text-align:center;margin-top:3rem;
}
.pricing-footer-text {
    font:.85rem/1.7 var(--f-sans);color:var(--c-dim);max-width:500px;margin:0 auto;
}

/* =============================================
   AI Banner
   ============================================= */
.s-ai-banner {
    position:relative;z-index:1;padding:5rem 0;
    background:var(--c-surface);
    border-top:1px solid var(--c-border);
    border-bottom:1px solid var(--c-border);
}
.ai-banner-inner { text-align:center;max-width:600px;margin:0 auto }
.ai-banner-line {
    width:40px;height:1px;background:var(--c-border2);margin:0 auto 1.5rem;
}
.ai-banner-inner .ai-banner-line:last-child { margin:1.5rem auto 0 }
.ai-banner-text {
    font:400 1rem/1.8 var(--f-serif);color:var(--c-bright);
    margin-bottom:1rem;
}
.ai-banner-sub {
    font:400 .85rem/1.6 var(--f-sans);color:var(--c-accent);
    letter-spacing:.02em;
}

/* =============================================
   Keyframes
   ============================================= */
@keyframes slideDown { to { transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes fadeUp { from { opacity:0;transform:translateY(20px) } to { opacity:1;transform:translateY(0) } }
@keyframes logoFadeIn { from { opacity:0;transform:scale(.9) } to { opacity:1;transform:scale(1) } }
@keyframes protoSlide { from { opacity:0;transform:translateX(-15px) } to { opacity:1;transform:translateX(0) } }
@keyframes logoGlow { from { opacity:.5;transform:scale(.95) } to { opacity:1;transform:scale(1.05) } }
@keyframes wordReveal { to { opacity:1;transform:translateY(0) } }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }
@keyframes scrollPulse { 0%,100% { opacity:1 } 50% { opacity:.15;transform:scaleY(.3);transform-origin:top } }
@keyframes bounce { 0%,60%,100% { transform:translateY(0);opacity:.3 } 30% { transform:translateY(-2px);opacity:1 } }
@keyframes marquee { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }
@keyframes msgIn { from { opacity:0;transform:translateY(6px) } to { opacity:1;transform:none } }

/* =============================================
   Responsive
   ============================================= */
@media (max-width:768px) {
    /* Nav */
    #nav { padding:0 1.2rem }
    .nav-links { display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(12,12,14,.97);flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;z-index:99 }
    .nav-links a { font-size:1.1rem }
    .mobile-menu { display:flex;z-index:101 }

    /* Sections & layout */
    .s { padding:5rem 0 }
    .wrap { padding:0 1.2rem }

    /* Hero */
    .s-hero { min-height:100vh;padding:0 1.2rem }
    .hero-inner { max-width:100% }
    .hero-logo-text { margin-bottom:1.5rem }
    .hero-logo-text::before { display:none }
    .hero-rpl { letter-spacing:.05em }
    .hero-proto { font-size:clamp(2rem,5vw,4.5rem) }
    .hero-title { font-size:clamp(1.1rem,4.5vw,1.8rem) }
    .hero-tagline { font-size:1rem;margin-bottom:2.5rem }
    .hero-actions { flex-direction:column;align-items:stretch;width:100%;max-width:320px;margin:0 auto }
    .hero-actions .btn { justify-content:center;text-align:center;padding:.85rem 1.5rem }

    /* Marquee — keep contained */
    .marquee { width:100%;max-width:100vw }

    /* Steps */
    .steps-visual { grid-template-columns:1fr;gap:2rem }
    .steps-visual::before { display:none }
    .step-v { padding:0 .5rem }

    /* Capabilities */
    .cap-grid { grid-template-columns:1fr }
    .cap-item { padding:2rem 1.2rem }
    .cap-head h2 { font-size:clamp(1.3rem,5vw,2.4rem) }

    /* Solutions */
    .sol-featured { grid-template-columns:1fr }
    .sol-featured .sol-mockup { border-right:0;border-bottom:1px solid var(--c-border);min-height:200px }
    .sol-featured .sol-body { padding:1.5rem 1.2rem }
    .sol-grid { grid-template-columns:1fr }
    .sol-body { padding:1.2rem }

    /* Pricing */
    .pricing-grid { grid-template-columns:1fr }
    .pricing-card { padding:2rem 1.2rem }

    /* Proof / stats */
    .proof-items { gap:1.5rem;flex-wrap:wrap;justify-content:center }
    .proof-number { font-size:1.8rem }

    /* Connect / chat */
    .connect-chat { max-width:100% }
    .connect-chat-head { padding:.75rem 1rem }
    .connect-messages { padding:1rem;min-height:220px;max-height:320px }
    .connect-input { padding:.6rem .8rem }
    #connect-input { padding:.6rem .8rem;font-size:.85rem }
    .connect-powered { font-size:.52rem }
    .chat-bubble { max-width:85% }

    /* Contact form */
    .contact-form-wrap { max-width:100% }
    .contact-row { flex-direction:column }
    .contact-input,.contact-textarea { font-size:16px }

    /* AI Banner */
    .s-ai-banner { padding:3rem 0 }
    .ai-banner-inner { padding:0 1.2rem }

    /* Trust bar */
    .trust-text { font-size:.62rem;padding:0 1rem }

    /* Footer */
    .foot-inner { flex-direction:column;gap:.8rem;text-align:center }

    /* Modal on mobile */
    .sol-modal { height:90vh;max-height:90vh }
    .sol-modal-overlay { padding:.5rem }

    /* Buttons full width on mobile */
    .pricing-btn { width:100%;justify-content:center }

    /* Section headers */
    .cases-head h2 { font-size:clamp(1.3rem,5vw,2.4rem) }
    .connect-head h2 { font-size:clamp(1.3rem,5vw,2.4rem) }
}
/* Extra small screens (320px) */
@media (max-width:374px) {
    .wrap { padding:0 1rem }
    .s-hero { padding:0 1rem }
    .hero-rpl { font-size:clamp(3rem,12vw,4rem);letter-spacing:.03em }
    .hero-proto { font-size:clamp(1.6rem,5vw,2.5rem) }
    .hero-title { font-size:clamp(1rem,4vw,1.3rem) }
    .cap-item { padding:1.5rem 1rem }
    .pricing-card { padding:1.5rem 1rem }
    .proof-items { gap:1rem }
    .proof-number { font-size:1.5rem }
    .proof-label { font-size:.6rem }
    .btn { padding:.75rem 1.2rem;font-size:.78rem }
    .connect-chat-head { padding:.6rem .8rem }
    .chat-head-title { font-size:.72rem }
}

body.nav-open .nav-links { display:flex }
body.nav-open .mobile-menu span:nth-child(1) { transform:rotate(45deg) translate(4px,4px) }
body.nav-open .mobile-menu span:nth-child(2) { opacity:0 }
body.nav-open .mobile-menu span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px) }