/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

:root {
    --bg: #06080c;
    --surface: #0e1219;
    --card: #141a24;
    --border: #1e2636;
    --text: #e2e6ed;
    --text-dim: #8892a8;
    --accent: #00d4ff;
    --accent-dim: rgba(0,212,255,0.12);
    --green: #4ade80;
    --radius: 14px;
    --radius-sm: 10px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ===== UTILITY ===== */
.gradient-text {
    background: linear-gradient(135deg, var(--accent), #7c3aed, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hidden{display:none!important}
.btn-primary,.btn-ghost{
    cursor:pointer;border:none;border-radius:40px;font-weight:600;transition:all .25s;
    font-family:inherit
}
.btn-primary{
    background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;padding:10px 24px;font-size:14px
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(0,212,255,.3)}
.btn-primary.btn-lg{padding:14px 36px;font-size:16px}
.btn-ghost{
    background:transparent;color:var(--text);border:1px solid var(--border);padding:10px 24px;font-size:14px
}
.btn-ghost:hover{background:var(--card);border-color:var(--accent);color:#fff}
.btn-ghost.btn-lg{padding:14px 36px;font-size:16px}

/* ===== HEADER ===== */
header{
    position:fixed;top:0;width:100%;z-index:50;
    background:rgba(6,8,12,.8);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border)
}
nav{
    max-width:1100px;margin:0 auto;padding:0 24px;height:60px;
    display:flex;align-items:center;justify-content:space-between
}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:#fff}
.logo-icon{
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),#7c3aed);border-radius:8px;font-size:16px;color:#fff
}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
#start-onboarding{padding:8px 20px;font-size:13px}

/* ===== HERO ===== */
.hero{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:80px 24px 40px;position:relative;overflow:hidden
}
.hero-bg-lens{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,212,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(124,58,237,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(244,114,182,0.04) 0%, transparent 50%);
    pointer-events:none
}
.hero-content{max-width:780px;text-align:center;position:relative;z-index:1}
.hero-badge{
    display:inline-block;padding:4px 14px;border-radius:40px;font-size:11px;font-weight:600;
    background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,212,255,.2);
    margin-bottom:20px;text-transform:uppercase;letter-spacing:1px
}
.hero-content h1{
    font-size:clamp(36px,7vw,72px);line-height:1.08;margin:0 0 20px;color:#fff;font-weight:800
}
.hero-sub{
    font-size:clamp(15px,2vw,18px);color:var(--text-dim);line-height:1.6;
    max-width:600px;margin:0 auto 32px
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.hero-metrics{
    display:flex;gap:32px;justify-content:center;flex-wrap:wrap;
    font-size:14px;color:var(--text-dim)
}
.hero-metrics strong{color:#fff;font-weight:700}

/* ===== SECTIONS COMMON ===== */
.section-title{
    text-align:center;font-size:clamp(28px,4vw,44px);font-weight:800;color:#fff;margin:0 0 12px
}
.section-sub{text-align:center;color:var(--text-dim);font-size:16px;margin:0 auto 48px;max-width:500px}

/* ===== HOW IT WORKS ===== */
.how-section{padding:80px 24px;background:var(--surface)}
.how-steps{display:flex;gap:24px;max-width:900px;margin:40px auto 0;flex-wrap:wrap;justify-content:center}
.how-step{
    flex:1;min-width:240px;max-width:300px;background:var(--card);border-radius:var(--radius);
    padding:24px;border:1px solid var(--border);transition:transform .25s,border-color .25s
}
.how-step:hover{transform:translateY(-4px);border-color:var(--accent)}
.step-num{
    width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent-dim);color:var(--accent);font-weight:700;font-size:14px;margin-bottom:14px
}
.how-step h3{margin:0 0 8px;font-size:16px;color:#fff}
.how-step p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.6}

/* ===== SIMULATOR PREVIEW ===== */
.preview-section{
    padding:80px 24px;background:var(--bg);position:relative
}
#simulator{
    display:flex;gap:32px;max-width:860px;margin:0 auto;justify-content:center;align-items:flex-start;flex-wrap:wrap
}

/* PHONE */
#phone-frame{
    width:300px;height:620px;border-radius:44px;position:relative;overflow:hidden;
    background:#000;box-shadow:
        0 0 0 1px #222,
        0 0 0 6px #111,
        0 0 0 7px #333,
        0 30px 80px rgba(0,0,0,.6);
    flex-shrink:0
}
#phone-notch{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:110px;height:22px;background:#000;border-radius:0 0 12px 12px;z-index:15
}
#screen-container{
    width:100%;height:100%;background:#f5f5f5;color:#000;position:relative;overflow:hidden
}
#active-screen{width:100%;height:100%;position:absolute;top:0;left:0}

/* WATER LENS */
#water-lens{
    position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:16
}
#water-lens.active{
    backdrop-filter:blur(1.5px) brightness(1.04) contrast(1.01);
    background:radial-gradient(ellipse at 50% 50%,rgba(0,212,255,0.04) 0%,transparent 70%);
    animation:lensRipple 5s ease-in-out infinite alternate
}
@keyframes lensRipple{
    0%{background:radial-gradient(ellipse at 40% 45%,rgba(0,212,255,0.05) 0%,transparent 70%)}
    50%{background:radial-gradient(ellipse at 60% 55%,rgba(0,212,255,0.06) 0%,transparent 70%)}
    100%{background:radial-gradient(ellipse at 45% 60%,rgba(0,212,255,0.04) 0%,transparent 70%)}
}
#lens-indicator{
    position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:6px;z-index:17;
    font-size:10px;font-weight:600;color:rgba(255,255,255,.6);
    background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
    padding:4px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.05)
}
.lens-dot{
    width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* DRAWER */
#detail-drawer{
    width:280px;background:var(--card);border-radius:var(--radius);
    border:1px solid var(--border);padding:24px;transition:all .25s
}
.drawer-header{margin-bottom:14px}
.drawer-pill{
    display:inline-block;padding:2px 12px;border-radius:40px;font-size:10px;font-weight:600;
    background:var(--accent-dim);color:var(--accent);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px
}
#element-name{margin:0;font-size:17px;color:#fff;font-weight:700}
.drawer-body p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.6}
.actions{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.actions button{
    background:var(--surface);border:1px solid var(--border);color:var(--text);
    padding:9px 14px;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit;font-weight:500
}
.actions button:hover{background:var(--accent-dim);border-color:var(--accent);color:#fff}

/* ===== SCREEN TEMPLATES ===== */
.screen{width:100%;height:100%;position:absolute;top:0;left:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.status-bar{height:28px;background:var(--screen-bg,#000);color:#fff;font-size:11px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.sb-icons{font-size:8px;opacity:.6;letter-spacing:2px}
.screen-header{font-size:15px;font-weight:600;padding:8px 16px;display:flex;align-items:center}

/* HOTSPOT BASE */
.hotspot{
    position:absolute;border-radius:10px;cursor:pointer;transition:all .25s;
    display:flex;flex-direction:column;justify-content:center;
    padding:8px 12px;overflow:hidden
}
.hotspot::before{
    content:'';position:absolute;inset:0;border-radius:10px;opacity:0;
    background:linear-gradient(135deg,var(--accent),#7c3aed);transition:opacity .3s
}
.hotspot:hover::before{opacity:.15}
.hotspot:hover{transform:scale(1.04);border-color:var(--accent)!important;z-index:12}
.hs-label{font-size:9px;opacity:.75;text-transform:uppercase;letter-spacing:.5px;position:relative;z-index:1}
.hs-value{font-size:13px;font-weight:700;position:relative;z-index:1}
.hs-label,.hs-value{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ===== CRYPTO ===== */
.crypto{background:linear-gradient(180deg,#0a0d1a 0%,#111631 100%)}
.crypto .status-bar,.crypto .screen-header{background:transparent;color:rgba(255,255,255,.9)}
.balance-card{
    background:linear-gradient(135deg,rgba(42,63,143,.6),rgba(26,42,106,.6));
    backdrop-filter:blur(8px);margin:4px 12px 10px;padding:16px;border-radius:16px;text-align:center;
    border:1px solid rgba(255,255,255,.06)
}
.bal-label{font-size:10px;opacity:.6;color:rgba(255,255,255,.7)}
.bal-value{font-size:26px;font-weight:800;margin:4px 0;color:#fff}
.bal-change{font-size:12px;font-weight:600}.bal-change.up{color:var(--green)}
.crypto .hotspot{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2)}
.token-list{padding:0 12px}
.token-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.token-item:last-child{border-bottom:none}
.token-usd{margin-left:auto;font-weight:600;color:rgba(255,255,255,.7)}
.token-sub{font-size:11px;color:rgba(255,255,255,.4)}
.token-icon{width:26px;height:26px;border-radius:50%}
.token-icon.eth{background:linear-gradient(135deg,#627eea,#ecf0f1)}
.token-icon.btc{background:linear-gradient(135deg,#f7931a,#f9b453)}
.token-icon.sol{background:linear-gradient(135deg,#00d18c,#9945ff)}
.bottom-actions{display:flex;gap:6px;padding:10px 12px}
.bottom-actions button{
    flex:1;padding:8px;border-radius:10px;border:none;font-size:12px;font-weight:600;cursor:pointer
}
.bottom-actions .buy{background:var(--green);color:#000}
.bottom-actions .send{background:rgba(255,255,255,.08);color:#fff}
.bottom-actions .swap{background:rgba(255,255,255,.08);color:#fff}

/* ===== SOLAR ===== */
.solar{background:linear-gradient(180deg,#0a1a0a 0%,#0f240f 100%)}
.solar .status-bar,.solar .screen-header{background:transparent;color:var(--green)}
.solar-top{display:flex;gap:12px;padding:6px 12px;align-items:center}
.battery-icon{
    width:46px;height:80px;border:2px solid var(--green);border-radius:8px;position:relative;background:rgba(0,0,0,.3)
}
.batt-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(0deg,var(--green),#a3e635);border-radius:0 0 6px 6px}
.batt-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:800;color:var(--green)}
.solar-quick{text-align:center}
.sq-val{font-size:22px;font-weight:800;color:var(--green)}
.sq-label{font-size:10px;color:rgba(74,222,128,.6)}
.solar .hotspot{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2)}
.solar .hs-label{color:rgba(74,222,128,.7)}
.solar-graph{display:flex;align-items:flex-end;gap:3px;padding:8px 12px;height:50px}
.s-bar{flex:1;background:var(--green);border-radius:2px 2px 0 0;opacity:.5;min-height:4px}
.solar-status{display:flex;justify-content:space-between;padding:6px 12px;font-size:11px;color:rgba(74,222,128,.6)}

/* ===== BROWSER ===== */
.browser{background:#fff;color:#000}
.browser .status-bar{background:#fff;color:#000}
.browser .screen-header{background:transparent;color:#000}
.br-tabs{display:flex;gap:0;padding:4px 8px 0;background:#dee1e6}
.br-tab{padding:5px 14px;font-size:11px;background:#e8eaed;border-radius:6px 6px 0 0;color:#555;cursor:pointer}
.br-tab.active{background:#fff;color:#000;font-weight:600}
.url-bar{background:#e8eaed;border-radius:20px;padding:5px 12px;font-size:11px;color:#555;display:flex;align-items:center;gap:4px}
.browser .hotspot{background:rgba(0,106,255,.07);border:1px solid rgba(0,106,255,.15)}
.browser .hs-label,.browser .hs-value{color:#000;text-shadow:none}
.br-bookmarks{display:flex;gap:16px;padding:4px 12px;font-size:11px;color:#888}
.br-content{padding:10px 12px;font-size:12px;color:#444}
.br-content h4{margin:0 0 10px;font-size:14px;color:#000}
.br-cards{display:flex;gap:8px;margin-bottom:10px}
.br-card{flex:1;background:#f0f4ff;border-radius:10px;padding:10px;text-align:center}
.brc-val{display:block;font-size:20px;font-weight:700;color:#006aff}
.brc-lbl{font-size:10px;color:#777}
.br-content p{line-height:1.5;color:#666}

/* ===== TAX ===== */
.tax{background:linear-gradient(180deg,#120d1a 0%,#1a1530 100%)}
.tax .status-bar,.tax .screen-header{background:transparent;color:rgba(255,255,255,.8)}
.tax-form{padding:4px 12px;font-size:12px;display:flex;gap:6px}
.tax-field{flex:1}
.tax-field label{font-size:10px;color:rgba(255,255,255,.4);display:block;margin-bottom:2px}
.tax-input{background:rgba(255,255,255,.05);border-radius:6px;padding:6px 8px;font-size:12px;color:#fff}
.tax .hotspot{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2)}
.tax .hs-label{color:rgba(168,85,247,.7)}
.tax-refund{text-align:center;padding:10px;font-size:13px;color:var(--green);margin-top:16px}

/* ===== QUANTUM ===== */
.quantum{background:linear-gradient(180deg,#0a0e1a 0%,#141a2a 100%)}
.quantum .status-bar,.quantum .screen-header{background:transparent;color:rgba(255,255,255,.8)}
.q-diagram{display:flex;justify-content:center;padding:8px}
.q-circle{
    width:130px;height:90px;border-radius:50%;border:1px solid rgba(0,212,255,.2);position:relative;
    background:radial-gradient(circle,rgba(0,212,255,.03) 0%,transparent 70%)
}
.q-dot{
    position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 12px rgba(0,212,255,.4)
}
.quantum .hotspot{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.15)}
.q-note{text-align:center;font-size:10px;color:rgba(255,255,255,.3);padding:10px}

/* ===== FEATURES ===== */
.features-section{padding:80px 24px;background:var(--surface)}
.features-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
    max-width:960px;margin:40px auto 0
}
.feature-card{
    background:var(--card);border-radius:var(--radius);padding:24px;
    border:1px solid var(--border);transition:transform .25s,border-color .25s
}
.feature-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.feature-icon{
    width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--accent-dim);color:var(--accent);font-size:16px;margin-bottom:14px
}
.feature-card h3{margin:0 0 8px;font-size:15px;color:#fff}
.feature-card p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.6}

/* ===== CTA ===== */
.cta-section{padding:80px 24px}
.cta-card{
    max-width:600px;margin:0 auto;text-align:center;
    background:linear-gradient(135deg,var(--card),var(--surface));
    border-radius:24px;padding:48px 32px;border:1px solid var(--border)
}
.cta-card h2{font-size:28px;color:#fff;margin:0 0 12px}
.cta-card p{color:var(--text-dim);margin:0 0 24px;font-size:15px}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);padding:32px 24px}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--text-dim);text-decoration:none;font-size:13px}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:12px;color:var(--text-dim)}

/* ===== ONBOARDING MODAL ===== */
#onboarding-modal{
    position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center
}
.modal-backdrop{
    position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px)
}
.modal-content{
    position:relative;background:var(--card);border:1px solid var(--border);
    border-radius:24px;padding:40px;max-width:400px;width:90%;text-align:center;
    box-shadow:0 40px 80px rgba(0,0,0,.5)
}
.modal-close{
    position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-dim);
    font-size:24px;cursor:pointer;transition:color .2s
}
.modal-close:hover{color:#fff}
.modal-content h2{color:#fff;margin:0 0 8px;font-size:22px}
.modal-content p{color:var(--text-dim);margin:0 0 24px;font-size:14px;line-height:1.6}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;cursor:pointer}
.dot.active{background:var(--accent);width:24px;border-radius:4px}

/* ===== SIMULATOR CONTROLS ===== */
.simulator-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
    flex-wrap: wrap;
}
.sim-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-weight: 500;
}
.sim-tab:hover {
    color: var(--text);
    border-color: var(--text-dim);
}
.sim-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}

/* ===== WALKTHROUGH SECTION ===== */
.walkthrough-section {
    padding: 80px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.walkthrough-timeline {
    max-width: 800px;
    margin: 40px auto 0;
    position: relative;
}
.walkthrough-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), #7c3aed, transparent);
}
.timeline-step {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
}
.timeline-step:last-child {
    margin-bottom: 0;
}
.timeline-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #7c3aed);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}
.timeline-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    flex-grow: 1;
    transition: transform 0.25s, border-color 0.25s;
}
.timeline-content:hover {
    transform: translateX(4px);
    border-color: var(--accent);
}
.timeline-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #fff;
}
.timeline-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* ===== DASHBOARD DIRECTORY ===== */
.dashboard-section {
    padding: 80px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.dashboard-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.dashboard-container h3 {
    margin: 0 0 6px 0;
    font-size: 24px;
    color: #fff;
    font-weight: 800;
}
.dashboard-sub {
    margin: 0 0 40px 0;
    font-size: 15px;
    color: var(--text-dim);
}
.dashboard-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.dash-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px;
    color: var(--text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-btn:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(0, 212, 255, 0.1);
}
.dash-icon {
    font-size: 28px;
    margin-bottom: 10px;
}
.dash-btn strong {
    font-size: 15px;
    color: #fff;
    display: block;
    margin-bottom: 6px;
}
.dash-btn span:last-child {
    font-size: 12px;
    color: var(--text-dim);
}

/* ===== ALTERNATING FEATURE PANELS ===== */
.feature-panel {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 960px;
    margin: 160px auto;
    padding: 0 24px;
    scroll-margin-top: 100px;
}
.feature-panel.alternate {
    flex-direction: row-reverse;
}
.feature-text {
    flex: 1.2;
}
.feature-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}
.feature-text h3 {
    font-size: 28px;
    color: #fff;
    margin: 0 0 16px 0;
    font-weight: 800;
}
.feature-text p {
    font-size: 15.5px;
    color: var(--text-dim);
    line-height: 1.7;
    margin: 0;
}
.feature-visual {
    flex: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* MINI PHONE FRAME FOR WEAVING GRAPHICS */
.phone-frame-mini {
    width: 200px;
    height: 410px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    background: #000;
    box-shadow: 
        0 0 0 1px #222,
        0 0 0 4px #111,
        0 0 0 5px #333,
        0 15px 40px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.screen-container-mini {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    color: #000;
    position: relative;
    overflow: hidden;
}
.screen-container-mini .screen {
    position: absolute;
    inset: 0;
    transform: scale(0.667);
    transform-origin: top left;
    width: 300px;
    height: 615px;
    pointer-events: none; /* static preview */
}
.screen-container-mini .hotspot {
    animation: none; /* disable pulse on mini previews */
    border-color: rgba(0, 212, 255, 0.4);
}
.water-lens-mini {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    backdrop-filter: blur(0.8px) brightness(1.02);
    background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 80%);
    border-radius: 26px;
}

/* CUSTOM LIBRARY CARD */
.custom-library-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.cl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.cl-row:last-child {
    border-bottom: none;
}
.cl-term {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.cl-arrow {
    color: var(--accent);
    font-weight: 700;
}
.cl-analogy {
    font-size: 13.5px;
    color: var(--text-dim);
    font-style: italic;
}

/* SPACING & ZOOM ADJUSTMENTS */
body {
    font-size: 17px;
}
.hero {
    padding: 120px 24px 80px;
}
.hero-content h1 {
    font-size: clamp(40px, 8vw, 76px);
}
.hero-sub {
    font-size: 20px;
    max-width: 680px;
    margin-bottom: 48px;
}
.section-title {
    font-size: clamp(34px, 5vw, 48px);
}
.section-sub {
    font-size: 18px;
    margin-bottom: 80px;
}

/* RIPPLES IN SIMULATOR */
.water-ripple-effect {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99;
}
.ripple-ring {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.7);
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    transform: scale(0);
    opacity: 0;
    animation: rippleExpand 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rippleExpand {
    0% { transform: scale(0.5); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: scale(8); opacity: 0; border-width: 1px; }
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .nav-links{display:none}
    .hero-content h1{font-size:36px}
    #simulator{flex-direction:column;align-items:center}
    #detail-drawer{width:100%;max-width:300px}
    .features-grid{grid-template-columns:1fr}
    .feature-panel, .feature-panel.alternate {
        flex-direction: column;
        gap: 32px;
        margin: 60px auto;
        text-align: center;
    }
}