/* ══════════════════════════════════════════════════════
   SESSION SECURITY SECTION — Standalone CSS
   ══════════════════════════════════════════════════════ */

/* ── Main Layout ── */
.ss-showcase{position:relative;width:100%;max-width:100%;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sol-header{text-align:center;padding:clamp(40px,6vw,60px) 0 clamp(24px,4vw,40px)}
.sol-tag{display:block;font-size:clamp(8px,1.2vw,10px);letter-spacing:clamp(2px,0.4vw,4px);text-transform:uppercase;color:var(--accent);margin-bottom:clamp(16px,3vw,24px)}
.sol-title{font-size:clamp(24px,4vw,56px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:clamp(12px,2vw,16px)}
.sol-title em{font-style:italic;color:var(--accent);font-weight:300}
.sol-sub{font-size:clamp(14px,2vw,16px);color:var(--text-secondary);line-height:1.7;max-width:clamp(500px,60vw,700px);margin:0 auto}
.sol-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(12px,2vw,20px) 0 clamp(80px,10vw,120px)}

/* ── Left Controls Panel ── */
.controls-panel{position:absolute;left:clamp(-15px,-2vw,-30px);top:50%;transform:translateY(-50%);width:clamp(140px,16vw,180px);display:flex;flex-direction:column;gap:clamp(4px,0.8vw,6px);z-index:1;opacity:1}
.cp-header{font-size:clamp(7px,1.2vw,9px);letter-spacing:clamp(2px,0.4vw,3px);color:var(--accent);text-transform:uppercase;margin-bottom:clamp(6px,1.5vw,10px);display:flex;align-items:center;gap:clamp(4px,1vw,6px);font-weight:600}
.cp-header svg{width:clamp(8px,1.5vw,12px);height:clamp(8px,1.5vw,12px);stroke:var(--accent);fill:none;stroke-width:2}
.cp-item{display:flex;align-items:center;justify-content:space-between;padding:clamp(6px,1.5vw,10px) clamp(8px,1.5vw,14px);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:clamp(6px,1vw,10px);transition:all .3s}
.cp-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.cp-left{display:flex;align-items:center;gap:clamp(6px,1vw,9px)}
.cp-icon{width:clamp(20px,3vw,28px);height:clamp(20px,3vw,28px);border-radius:clamp(5px,1vw,7px);background:var(--text-muted);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cp-icon svg{width:clamp(9px,1.5vw,13px);height:clamp(9px,1.5vw,13px);stroke:var(--text-secondary);fill:none;stroke-width:1.8}
.cp-icon.danger{background:var(--danger-bg);border-color:var(--danger-border)}
.cp-icon.danger svg{stroke:var(--danger)}
.cp-label{font-size:clamp(9px,1.2vw,11px);color:var(--text-secondary);letter-spacing:.2px;line-height:1.3}
.cp-sublabel{font-size:clamp(6px,1vw,8.5px);color:var(--text-muted);margin-top:clamp(1px,0.2vw,1px)}
/* Toggle */
.cp-toggle{width:clamp(24px,3vw,32px);height:clamp(12px,1.5vw,18px);border-radius:clamp(6px,1vw,10px);background:rgba(255,255,255,.08);position:relative;cursor:pointer;flex-shrink:0;transition:background .3s}
.cp-toggle.on{background:var(--text-muted)}
.cp-toggle::after{content:'';position:absolute;top:clamp(1px,0.2vw,2px);left:clamp(1px,0.2vw,2px);width:clamp(10px,1.5vw,14px);height:clamp(10px,1.5vw,14px);border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s}
.cp-toggle.on::after{left:clamp(12px,1.5vw,16px);background:var(--text-secondary);box-shadow:0 0 clamp(3px,0.5vw,6px) var(--text-muted)}

/* ── Right Logs Panel ── */
.logs-panel{position:absolute;right:clamp(-25px,-3vw,-45px);top:50%;transform:translateY(-50%);width:clamp(160px,20vw,200px);display:flex;flex-direction:column;z-index:1;opacity:1}
.lp-header{font-size:clamp(7px,1.2vw,9px);letter-spacing:clamp(2px,0.4vw,3px);color:var(--accent);text-transform:uppercase;margin-bottom:clamp(6px,1.5vw,10px);display:flex;align-items:center;gap:clamp(4px,1vw,6px);font-weight:600}
.lp-header svg{width:clamp(8px,1.5vw,12px);height:clamp(8px,1.5vw,12px);stroke:var(--accent);fill:none;stroke-width:2}
.lp-dot{width:clamp(3px,0.8vw,5px);height:clamp(3px,0.8vw,5px);border-radius:50%;background:var(--text-muted);box-shadow:0 0 clamp(3px,0.8vw,6px) var(--text-muted);animation:ss-logpulse 2s ease infinite;margin-left:auto}
@keyframes ss-logpulse{0%,100%{opacity:1}50%{opacity:.4}}
.lp-list{display:flex;flex-direction:column;gap:clamp(3px,0.8vw,4px);max-height:clamp(300px,40vh,400px);overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,black 5%,black 90%,transparent 100%)}
.lp-entry{padding:clamp(6px,1.5vw,8px) clamp(6px,1.5vw,10px);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:clamp(6px,1vw,8px);font-size:clamp(8px,1.2vw,10px);line-height:1.55;color:var(--text-secondary);display:flex;gap:clamp(4px,1vw,8px);align-items:flex-start;animation:ss-logSlideIn .5s ease-out both}
@keyframes ss-logSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.lp-time{font-family:'JetBrains Mono','Fira Code',monospace;font-size:clamp(7px,1.2vw,9px);color:var(--text-muted);white-space:nowrap;margin-top:clamp(1px,0.2vw,1px);flex-shrink:0}
.lp-text{flex:1}
.lp-text code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:clamp(7.5px,1.2vw,9.5px);color:var(--text-muted);background:transparent;padding:0;border-radius:0}
.lp-badge{display:inline-flex;align-items:center;gap:clamp(2px,0.5vw,3px);font-size:clamp(6px,1vw,8px);letter-spacing:.5px;padding:clamp(1px,0.3vw,2px) clamp(3px,0.8vw,6px);border-radius:clamp(2px,0.5vw,4px);margin-top:clamp(2px,0.5vw,3px)}
.lp-badge.blocked{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.lp-badge.info{background:transparent;color:var(--text-muted);border:1px solid var(--border)}

/* ── Center Stage ── */
.center-stage{position:relative;flex-shrink:0;margin:0 auto;z-index:20}

/* ── Laptop ── */
.ss-laptop{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center}
.laptop-screen{width:clamp(320px,50vw,680px);height:clamp(280px,36vh,480px);background:#0a0d12;border:clamp(1px,0.2vw,2px) solid var(--border-light);border-radius:clamp(10px,1.5vw,14px) clamp(10px,1.5vw,14px) 0 0;overflow:hidden;position:relative;z-index:15;box-shadow:0 0 clamp(40px,5vw,80px) rgba(0,0,0,.6),0 0 clamp(70px,8vw,140px) var(--accent-bg),inset 0 1px 0 var(--border)}
/* Notch */
.laptop-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(70px,8vw,100px);height:clamp(12px,1.5vw,18px);background:#0a0d12;border-radius:0 0 clamp(8px,1.2vw,12px) clamp(8px,1.2vw,12px);border:1px solid rgba(255,255,255,.06);border-top:none;z-index:20;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,8px)}
.laptop-cam{width:clamp(4px,0.8vw,6px);height:clamp(4px,0.8vw,6px);border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);position:relative}
.laptop-cam::after{content:'';position:absolute;inset:clamp(1px,0.2vw,1px);border-radius:50%;background:var(--text-muted);box-shadow:0 0 clamp(2px,0.5vw,4px) var(--text-muted);animation:ss-camglow 3s ease infinite}
@keyframes ss-camglow{0%,100%{opacity:.8}50%{opacity:.3}}
/* Screen content */
.screen-content{position:absolute;inset:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
/* Chrome bar */
.chrome-bar{grid-column:1/-1;height:clamp(20px,2.5vw,28px);background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;padding:0 clamp(6px,1.5vw,10px);gap:clamp(3px,0.8vw,5px)}
.chrome-dots{display:flex;gap:clamp(2px,0.5vw,4px)}
.chrome-dots span{width:clamp(5px,0.8vw,8px);height:clamp(5px,0.8vw,8px);border-radius:50%}
.chrome-dots .r{background:#ff5f57}.chrome-dots .y{background:#febc2e}.chrome-dots .g{background:#28c840}
.chrome-url{margin-left:clamp(4px,1vw,8px);flex:1;height:clamp(12px,1.5vw,18px);background:rgba(255,255,255,.04);border-radius:clamp(3px,0.6vw,5px);display:flex;align-items:center;padding:0 clamp(4px,1vw,8px);font-size:clamp(7px,1.2vw,9px);color:var(--text-muted);gap:clamp(2px,0.5vw,4px)}
.chrome-url svg{width:clamp(5px,0.8vw,8px);height:clamp(5px,0.8vw,8px);stroke:var(--text-muted);fill:none;stroke-width:2.5}
.chrome-tabs{display:flex;margin-left:clamp(4px,1vw,8px);gap:clamp(1px,0.2vw,1px)}
.chrome-tab-item{padding:clamp(2px,0.5vw,4px) clamp(6px,1.2vw,10px);font-size:clamp(6px,1vw,8.5px);color:var(--text-muted);background:rgba(255,255,255,.02);border-radius:clamp(3px,0.6vw,5px) clamp(3px,0.6vw,5px) 0 0;cursor:default}
.chrome-tab-item.on{color:var(--text-secondary);background:rgba(255,255,255,.05)}

/* ── Code Editor ── */
.ss-code-area{display:flex;flex-direction:column;overflow:hidden}
.ss-code-tabs{display:flex;align-items:center;height:clamp(20px,2.5vw,30px);background:rgba(255,255,255,.015);border-bottom:1px solid rgba(255,255,255,.04);padding:0 clamp(4px,1vw,8px);gap:0}
.ss-code-tab{padding:clamp(3px,0.8vw,6px) clamp(8px,1.5vw,14px);font-size:clamp(7px,1.2vw,9.5px);font-family:'JetBrains Mono','Fira Code',monospace;color:var(--text-muted);border-bottom:clamp(1px,0.2vw,2px) solid transparent;cursor:default;display:flex;align-items:center;gap:clamp(3px,0.8vw,5px)}
.ss-code-tab.on{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-bg)}
.ss-code-tab svg{width:clamp(6px,1vw,10px);height:clamp(6px,1vw,10px);stroke:currentColor;fill:none;stroke-width:2}
.ss-code-timer{margin-left:auto;display:flex;align-items:center;gap:clamp(3px,0.8vw,5px);font-size:clamp(7px,1.2vw,9px);font-family:'JetBrains Mono',monospace;color:var(--text-muted)}
.ss-code-timer-dot{width:clamp(3px,0.6vw,5px);height:clamp(3px,0.6vw,5px);border-radius:50%;background:var(--text-muted);animation:ss-timerpulse 1s step-end infinite}
@keyframes ss-timerpulse{0%,100%{opacity:1}50%{opacity:.2}}
.ss-code-body{flex:1;padding:clamp(8px,1.5vw,12px) 0;font-family:'JetBrains Mono','Fira Code',monospace;font-size:clamp(9px,1.2vw,11px);line-height:1.0;overflow:hidden;position:relative}
.ss-code-line{display:flex;padding:0 clamp(8px,1.5vw,12px)}
.ss-ln-num{width:clamp(20px,2.5vw,28px);text-align:right;color:rgba(255,255,255,.12);font-size:clamp(8px,1.2vw,10px);flex-shrink:0;margin-right:clamp(8px,1.5vw,12px);user-select:none}
.ss-ln-code{flex:1}
.ss-kw{color:var(--syntax-keyword)}.ss-fn{color:var(--syntax-function)}.ss-str{color:var(--syntax-string)}.ss-obj{color:var(--accent)}.ss-op{color:var(--text-secondary)}.ss-cmt{color:var(--text-muted);font-style:italic}.ss-num{color:var(--syntax-number)}
.ss-code-cursor{display:inline-block;width:clamp(1px,0.2vw,2px);height:clamp(10px,1.5vw,14px);background:var(--accent);animation:ss-blinkcur 1s step-end infinite;vertical-align:middle;margin-left:clamp(1px,0.2vw,1px)}
@keyframes ss-blinkcur{0%,100%{opacity:1}50%{opacity:0}}
/* Status bar */
.ss-code-statusbar{height:clamp(16px,2vw,22px);background:rgba(255,255,255,.015);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;padding:0 clamp(6px,1.5vw,10px);font-size:clamp(6px,1vw,8px);color:var(--text-muted);gap:clamp(8px,1.5vw,12px);grid-column:1/-1}
.ss-code-statusbar .ss-gdot{width:clamp(3px,0.6vw,5px);height:clamp(3px,0.6vw,5px);border-radius:50%;background:var(--text-muted);box-shadow:0 0 clamp(2px,0.5vw,4px) var(--text-muted)}
.ss-code-statusbar .ss-lock-badge{margin-left:auto;display:flex;align-items:center;gap:clamp(2px,0.5vw,4px);color:var(--accent);font-size:clamp(6px,1vw,8px);letter-spacing:.5px}
.ss-code-statusbar .ss-lock-badge svg{width:clamp(5px,0.8vw,8px);height:clamp(5px,0.8vw,8px);stroke:var(--accent);fill:none;stroke-width:2}

/* ── Video Conference Panel (Floating Zoom-style) ── */
.conf-panel{position:absolute;top:clamp(50px,8vh,80px);right:clamp(12px,2vw,20px);width:clamp(140px,18vw,200px);z-index:30;display:flex;flex-direction:column;gap:clamp(6px,1vw,10px);pointer-events:none}
.conf-header{display:none}
.conf-live{display:flex;align-items:center;gap:clamp(2px,0.5vw,4px);color:var(--text-muted);font-size:clamp(5px,0.8vw,7.5px);letter-spacing:1px;text-transform:uppercase;font-weight:600}
.conf-live-dot{width:clamp(2px,0.5vw,4px);height:clamp(2px,0.5vw,4px);border-radius:50%;background:var(--text-muted);box-shadow:0 0 clamp(2px,0.5vw,4px) var(--text-muted);animation:ss-logpulse 1.5s ease infinite}
.conf-count{font-size:clamp(5px,0.8vw,7.5px);color:var(--text-muted);letter-spacing:.5px}
.conf-enc{margin-left:auto;display:flex;align-items:center;gap:clamp(2px,0.5vw,3px);font-size:clamp(5px,0.8vw,7px);letter-spacing:.5px;color:var(--accent);background:var(--accent-bg);padding:clamp(1px,0.3vw,2px) clamp(3px,0.8vw,6px);border-radius:clamp(2px,0.5vw,4px);border:1px solid var(--accent-border)}
.conf-enc svg{width:clamp(4px,0.8vw,7px);height:clamp(4px,0.8vw,7px);stroke:var(--accent);fill:none;stroke-width:2}
.conf-videos{display:flex;flex-direction:column;gap:clamp(6px,1vw,10px)}
.conf-video-wrap{width:100%;aspect-ratio:4/3;border-radius:clamp(6px,1vw,10px);overflow:hidden;position:relative;background:#000;border:1px solid rgba(255,255,255,.15);box-shadow:0 clamp(3px,0.8vw,6px) clamp(16px,2.5vw,28px) rgba(0,0,0,.6);pointer-events:auto}
.conf-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;opacity:.3}
.conf-name{position:absolute;bottom:0;left:0;right:0;padding:clamp(2px,0.5vw,4px) clamp(4px,1vw,6px);background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:clamp(5px,0.8vw,7px);color:var(--text-secondary);display:flex;align-items:center;gap:clamp(2px,0.5vw,4px)}
.conf-name svg{width:clamp(4px,0.8vw,6px);height:clamp(4px,0.8vw,6px);stroke:currentColor;fill:none;stroke-width:2}
.conf-name .mute-icon{margin-left:auto;opacity:.4}

/* ── Solution section overrides (no inline styles needed in HTML) ── */
.ss-conf-panel{overflow:hidden}
.ss-conf-videos{padding:0!important;gap:0!important}
.ss-conf-wrap{border:0!important;border-radius:0!important;background:transparent!important;width:auto!important;height:auto!important;box-shadow:none!important;flex:1}
.ss-conf-video{width:100%;height:100%;object-fit:cover;display:block;opacity:0.36;object-position:50% 22%;transform:scale(1.22);transform-origin:center}
.ss-statusbar-hidden{display:none}
.ss-status-right{margin-left:auto}

/* ── Laptop Base ── */
.laptop-hinge{width:clamp(320px,50vw,680px);height:clamp(6px,1vw,10px);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:0 0 clamp(2px,0.4vw,3px) clamp(2px,0.4vw,3px);margin:0 auto;position:relative;z-index:15}
.laptop-base{width:clamp(360px,55vw,720px);height:clamp(10px,1.5vw,16px);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border-radius:0 0 clamp(10px,1.5vw,14px) clamp(10px,1.5vw,14px);margin:0 auto;margin-top:clamp(-1px,-0.2vw,-1px);position:relative;z-index:15}
.laptop-base::after{content:'';position:absolute;top:clamp(2px,0.5vw,4px);left:50%;transform:translateX(-50%);width:clamp(50px,6vw,70px);height:clamp(3px,0.6vw,5px);border-radius:clamp(2px,0.4vw,3px);background:rgba(255,255,255,.04)}
/* Shadow underneath */
.laptop-shadow{width:clamp(300px,48vw,640px);height:clamp(16px,2vw,24px);margin:0 auto;background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent);filter:blur(clamp(8px,1.5vw,12px));margin-top:clamp(-4px,-0.8vw,-6px)}

/* MacBook screens - increase laptop height */
@media(min-width:1280px) and (min-height:800px){
  .laptop-screen{height:clamp(320px,42vh,520px)!important}
  .laptop-hinge{height:clamp(8px,1.2vw,12px)!important}
  .laptop-base{height:clamp(12px,1.8vw,20px)!important}
  .laptop-shadow{height:clamp(20px,2.5vw,28px)!important}
}

@media(min-width:1440px) and (min-height:900px){
  .laptop-screen{height:clamp(360px,48vh,580px)!important}
  .laptop-hinge{height:clamp(10px,1.4vw,14px)!important}
  .laptop-base{height:clamp(14px,2vw,22px)!important}
  .laptop-shadow{height:clamp(24px,3vw,32px)!important}
}

/* ══ FLOATING TOOLS (failing) ══ */
.float-tool{position:absolute;z-index:15;border-radius:clamp(8px,1.5vw,14px);border:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 clamp(6px,1.5vw,12px) clamp(20px,3vw,40px) rgba(0,0,0,.5),0 0 clamp(40px,5vw,80px) var(--accent-bg);overflow:hidden}

/* ── AI Cheating Tool (Interview) ── */
.float-ic{top:clamp(-40px,-5vw,-55px);right:clamp(-80px,-10vw,-110px);width:clamp(180px,25vw,240px);background:rgba(18,20,28,.88);animation:ss-floatBob1 6s ease-in-out infinite}
@keyframes ss-floatBob1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ic-header{display:flex;align-items:center;gap:clamp(6px,1.5vw,10px);padding:clamp(8px,1.5vw,12px) clamp(8px,1.5vw,14px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.ic-icon{width:clamp(20px,3vw,28px);height:clamp(20px,3vw,28px);border-radius:clamp(5px,1vw,8px);background:linear-gradient(135deg,#fbbf24,#f59e0b);display:flex;align-items:center;justify-content:center}
.ic-icon svg{width:clamp(10px,1.5vw,16px);height:clamp(10px,1.5vw,16px);stroke:#fff;fill:none;stroke-width:2}
.ic-title{font-size:clamp(8px,1.2vw,11px);font-weight:600;color:var(--text-primary);letter-spacing:.2px}
.ic-ver{font-size:clamp(6px,1vw,8px);color:var(--text-muted)}
.ic-close{margin-left:auto;font-size:clamp(8px,1.2vw,11px);color:var(--text-muted);cursor:default}
.ic-body{padding:clamp(8px,1.5vw,12px) clamp(8px,1.5vw,14px);display:flex;flex-direction:column;gap:clamp(6px,1.5vw,10px)}
.ic-msg{font-size:clamp(8px,1.2vw,11px);color:var(--text-secondary);line-height:1.6;padding:clamp(6px,1.5vw,10px) clamp(8px,1.5vw,12px);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:clamp(6px,1vw,10px)}
.ic-msg strong{color:var(--danger);font-weight:600}

/* ── Browser Extension ── */
.float-ext{bottom:clamp(-20px,-3vw,-30px);right:clamp(-60px,-8vw,-90px);width:clamp(160px,22vw,210px);background:rgba(18,20,28,.88);animation:ss-floatBob2 7s ease-in-out infinite}
@keyframes ss-floatBob2{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.ext-header{display:flex;align-items:center;gap:clamp(4px,1vw,8px);padding:clamp(6px,1.5vw,10px) clamp(8px,1.5vw,14px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.ext-icon-wrap{width:clamp(16px,2.5vw,24px);height:clamp(16px,2.5vw,24px);border-radius:clamp(4px,1vw,6px);background:rgba(255,200,60,.12);display:flex;align-items:center;justify-content:center;font-size:clamp(8px,1.2vw,11px)}
.ext-name{font-size:clamp(7px,1.2vw,10.5px);font-weight:600;color:var(--text-primary)}
.ext-badge{font-size:clamp(5px,0.8vw,7.5px);padding:clamp(1px,0.3vw,2px) clamp(3px,0.8vw,6px);border-radius:clamp(2px,0.5vw,4px);background:var(--text-muted);color:var(--text-secondary);border:1px solid var(--border);margin-left:auto}
.ext-body{padding:clamp(8px,1.5vw,12px) clamp(8px,1.5vw,14px);display:flex;flex-direction:column;gap:clamp(4px,1vw,8px)}
.ext-row{display:flex;align-items:center;gap:clamp(4px,1vw,8px);font-size:clamp(7px,1.2vw,10px);color:var(--text-muted)}
.ext-row .x-icon{color:var(--text-muted);font-weight:700;font-size:clamp(8px,1.2vw,11px)}
.ext-row .check-icon{color:var(--text-muted);font-size:clamp(8px,1.2vw,11px)}
.ext-error{font-size:clamp(7px,1.2vw,10px);color:var(--text-secondary);padding:clamp(4px,1vw,8px) clamp(6px,1.5vw,10px);background:var(--bg-card);border:1px solid var(--border);border-radius:clamp(4px,1vw,8px);line-height:1.5}

/* ── Screenshot (macOS style) ── */
.float-ss{bottom:clamp(-25px,-3.5vw,-40px);left:clamp(-30px,-4vw,-50px);width:clamp(160px,20vw,200px);background:rgba(18,20,28,.92);animation:ss-floatBob3 5.5s ease-in-out infinite}
@keyframes ss-floatBob3{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(5px) rotate(0deg)}}
.ss-header{display:flex;align-items:center;gap:clamp(4px,1vw,8px);padding:clamp(6px,1.5vw,10px) clamp(8px,1.5vw,14px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.ss-icon{width:clamp(16px,2.5vw,24px);height:clamp(16px,2.5vw,24px);border-radius:clamp(4px,1vw,6px);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.ss-icon svg{width:clamp(10px,1.5vw,14px);height:clamp(10px,1.5vw,14px);stroke:var(--text-muted);fill:none;stroke-width:2}
.ss-title{font-size:clamp(7px,1.2vw,10.5px);font-weight:600;color:var(--text-primary)}
.ss-body{padding:clamp(8px,1.5vw,12px) clamp(8px,1.5vw,14px);display:flex;flex-direction:column;gap:clamp(4px,1vw,8px);align-items:center}
.ss-preview{width:clamp(160px,18vw,190px);height:clamp(80px,10vh,110px);background:#000;border-radius:clamp(6px,1vw,8px);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ss-preview::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.01) 2px,rgba(255,255,255,.01) 4px)}
.ss-black-text{font-size:clamp(6px,1vw,9px);color:rgba(255,255,255,.15);letter-spacing:1px;text-transform:uppercase}
.ss-meta{font-size:clamp(6px,1vw,9px);color:var(--text-muted);display:flex;align-items:center;gap:clamp(6px,1.5vw,10px);width:100%}
.ss-meta span{display:flex;align-items:center;gap:clamp(2px,0.5vw,4px)}
.ss-meta svg{width:clamp(6px,1vw,9px);height:clamp(6px,1vw,9px);stroke:currentColor;fill:none;stroke-width:2}
/* Crosshair animation overlay */
.ss-crosshair{position:absolute;inset:0;pointer-events:none}
.ss-crosshair::before,.ss-crosshair::after{content:'';position:absolute;background:rgba(255,255,255,.06)}
.ss-crosshair::before{width:1px;height:100%;left:50%;animation:ss-CrossV 3s ease-in-out infinite}
.ss-crosshair::after{height:1px;width:100%;top:50%;animation:ss-CrossH 3s ease-in-out infinite}
@keyframes ss-CrossV{0%,100%{left:30%}50%{left:70%}}
@keyframes ss-CrossH{0%,100%{top:35%}50%{top:65%}}

/* ── Screen Recorder ── */
.float-rec{top:clamp(-35px,-4.5vw,-50px);left:clamp(-60px,-8vw,-90px);width:clamp(160px,22vw,195px);background:rgba(18,20,28,.88);animation:ss-floatBob4 6.5s ease-in-out infinite}
@keyframes ss-floatBob4{0%,100%{transform:translateY(0) rotate(.5deg)}50%{transform:translateY(-6px) rotate(-.5deg)}}
.rec-header{display:flex;align-items:center;gap:clamp(4px,1vw,8px);padding:clamp(6px,1.5vw,10px) clamp(8px,1.5vw,14px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.rec-icon-wrap{width:clamp(16px,2.5vw,24px);height:clamp(16px,2.5vw,24px);border-radius:clamp(4px,1vw,6px);background:var(--text-muted);display:flex;align-items:center;justify-content:center}
.rec-icon-wrap svg{width:clamp(10px,1.5vw,14px);height:clamp(10px,1.5vw,14px);stroke:var(--text-secondary);fill:none;stroke-width:2}
.rec-name{font-size:clamp(7px,1.2vw,10.5px);font-weight:600;color:var(--text-primary)}
.rec-body{padding:clamp(8px,1.5vw,12px) clamp(8px,1.5vw,14px);display:flex;flex-direction:column;gap:clamp(4px,1vw,8px)}
.rec-preview{width:100%;height:clamp(60px,8vh,80px);background:#000;border-radius:clamp(4px,1vw,8px);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative}
.rec-no-signal{font-size:clamp(6px,1vw,9px);color:rgba(255,255,255,.12);letter-spacing:2px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,0.8vw,5px)}
.rec-no-signal svg{width:clamp(12px,1.5vw,18px);height:clamp(12px,1.5vw,18px);stroke:rgba(255,255,255,.08);fill:none;stroke-width:1.5}
.rec-stats{display:flex;align-items:center;justify-content:space-between;font-size:clamp(6px,1vw,9px);color:var(--text-muted)}
.rec-stat{display:flex;align-items:center;gap:clamp(2px,0.5vw,4px)}
.rec-stat .rdot{width:clamp(3px,0.6vw,6px);height:clamp(3px,0.6vw,6px);border-radius:50%;background:var(--text-muted);animation:ss-icflash 1s ease infinite}
@keyframes ss-icflash{0%,100%{opacity:1}50%{opacity:.3}}
.rec-error-bar{padding:clamp(3px,0.8vw,6px) clamp(4px,1vw,10px);background:var(--bg-card);border:1px solid var(--border);border-radius:clamp(3px,0.6vw,6px);font-size:clamp(6px,1vw,9px);color:var(--text-secondary);display:flex;align-items:center;gap:clamp(3px,0.8vw,5px)}
.rec-error-bar svg{width:clamp(8px,1.2vw,12px);height:clamp(8px,1.2vw,12px);stroke:var(--text-secondary);fill:none;stroke-width:2;flex-shrink:0}

/* ── Ambient glow ── */
.amb-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px);opacity:.12;display:none}
.amb-glow.g1{width:500px;height:500px;background:var(--accent);top:-120px;left:50%;transform:translateX(-50%);display:none}
.amb-glow.g2{width:380px;height:380px;background:#764ba2;bottom:-100px;right:-60px;display:none}
.amb-glow.g3{width:320px;height:320px;background:var(--danger);top:45%;left:-100px;display:none}

/* ── Scanlines ── */
.laptop-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:2}

/* ══════════════════════════════════════════════════════
   SESSION ANIMATION — Intro, Floating Windows, Reveal
   ══════════════════════════════════════════════════════ */

/* ── Intro Overlay ── */
.ss-intro{
  position:absolute;inset:0;z-index:15;
  background:#0a0d12;
  display:flex;flex-direction:column;
  transition:opacity .8s ease,visibility .8s ease;
  opacity:1;visibility:visible
}
.ss-intro.hidden{opacity:0;visibility:hidden;pointer-events:none}

.ss-intro-chrome{
  height:28px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;
  padding:0 10px;gap:5px
}
.ss-intro-chrome span{width:8px;height:8px;border-radius:50%}
.ss-intro-chrome .r{background:#ff5f57}
.ss-intro-chrome .y{background:#febc2e}
.ss-intro-chrome .g{background:#28c840}

.ss-intro-url{
  margin-left:8px;flex:1;height:18px;
  background:rgba(255,255,255,.04);border-radius:5px;
  display:flex;align-items:center;padding:0 8px;
  font-size:9px;color:var(--text-muted);gap:4px
}
.ss-intro-url svg{width:8px;height:8px;stroke:var(--text-muted);fill:none;stroke-width:2.5}

.ss-intro-body{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center
}
.ss-intro-logo-img{
  height:48px;margin-bottom:6px;opacity:.9
}
.ss-intro-sub{
  font-size:11px;color:var(--text-muted);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:30px
}
.ss-intro-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:10px 24px;border-radius:8px;
  background:var(--accent);color:#000;
  font-size:11px;font-weight:600;letter-spacing:.2px;
  cursor:default;
  animation:ss-btnpulse 2s ease infinite
}
@keyframes ss-btnpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(62,190,255,.25)}
  50%{box-shadow:0 0 0 10px rgba(62,190,255,0)}
}

/* ── AI Overlay Floating Window ── */
.ss-float-cluely{
  position:absolute;top:30px;right:-30px;width:200px;z-index:20;
  border-radius:10px;
  background:rgba(14,17,23,.92);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;
  transform:translateY(-20px) translateX(20px);
  transition:opacity .6s ease,transform .6s ease,visibility .6s ease;
  pointer-events:none
}
.ss-float-cluely.visible{
  opacity:1;visibility:visible;
  transform:translateY(0) translateX(0)
}

.ssfc-bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:10px;font-weight:600;color:var(--text-secondary)
}
.ssfc-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}
.ssfc-x{margin-left:auto;color:var(--text-muted);font-size:13px}
.ssfc-body{padding:12px}

.ssfc-msg{
  font-size:11px;color:var(--text-secondary);margin-bottom:6px;
  opacity:0;transition:opacity .4s ease .4s
}
.ss-float-cluely.visible .ssfc-msg{opacity:1}

.ssfc-sub{
  font-size:9px;color:var(--text-muted);letter-spacing:.3px;
  opacity:0;transition:opacity .4s ease .6s
}
.ss-float-cluely.visible .ssfc-sub{opacity:1}

/* ── DRM Ripper Floating Window ── */
.ss-float-drm{
  position:absolute;top:140px;left:-70px;width:190px;z-index:20;
  border-radius:10px;
  background:rgba(14,17,23,.92);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;
  transform:translateX(-30px);
  transition:opacity .6s ease,transform .6s ease,visibility .6s ease;
  pointer-events:none
}
.ss-float-drm.visible{
  opacity:1;visibility:visible;
  transform:translateX(0)
}

.ssfd-bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:10px;font-weight:600;color:var(--text-secondary)
}
.ssfd-bar svg{flex-shrink:0}
.ssfd-body{padding:12px}

.ssfd-status{
  font-size:9px;color:var(--text-muted);margin-bottom:8px;
  display:flex;align-items:center;gap:6px
}
.ssfd-status::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:var(--text-muted);animation:ss-icflash 1s ease infinite;flex-shrink:0
}
.ssfd-error{
  font-size:10px;color:var(--text-secondary);
  padding:8px 10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;line-height:1.5;
  opacity:0;transition:opacity .4s ease .8s
}
.ss-float-drm.visible .ssfd-error{opacity:1}

/* ── Video Conference Reveal ── */
.conf-panel{transition:opacity .8s ease}
.conf-panel.ss-hidden{opacity:0}

/* ── Tablet Responsive - Adjust Laptop Size ── */
@media(max-width:1024px){
  .ss-laptop{transform:scale(0.7)}
  .controls-panel{width:clamp(120px,14vw,140px)}
  .logs-panel{width:clamp(140px,18vw,160px)}
}

/* ── Mobile Responsive - Show Section with Responsive Sizing ── */
@media(max-width:767px){
  .ss-showcase{padding:0 clamp(8px,2vw,16px)}
  .sol-header{padding:clamp(24px,5vw,40px) 0 clamp(16px,3vw,24px)}
  .sol-title{font-size:clamp(22px,5vw,32px);margin-bottom:clamp(8px,2vw,12px)}
  .sol-sub{font-size:clamp(13px,3vw,15px);max-width:100%}
  .sol-tag{font-size:clamp(8px,1.8vw,10px);letter-spacing:clamp(2px,0.5vw,3px);margin-bottom:clamp(12px,2.5vw,18px)}
  
  /* Scale laptop down */
  .ss-laptop{transform:scale(0.65)}
  .center-stage{transform-origin:center;margin:0 auto}
  .laptop-screen{width:clamp(280px,75vw,480px)}
  
  /* Show side panels with adjusted sizing */
  .controls-panel{display:flex;position:relative;left:0;top:0;transform:none;width:100%;max-width:100%;opacity:1;margin-bottom:clamp(12px,3vw,20px);flex-direction:row;flex-wrap:wrap;gap:clamp(4px,1vw,8px)}
  .cp-header{width:100%;margin-bottom:clamp(4px,1vw,8px)}
  .cp-item{flex:1;min-width:calc(50% - 4px);padding:clamp(5px,1.2vw,8px) clamp(6px,1.2vw,10px)}
  .cp-label{font-size:clamp(8px,1.8vw,10px)}
  .cp-icon{width:clamp(16px,3.5vw,22px);height:clamp(16px,3.5vw,22px)}
  
  .logs-panel{display:flex;position:relative;right:0;top:0;transform:none;width:100%;max-width:100%;opacity:1;margin-top:clamp(12px,3vw,20px)}
  .lp-list{max-height:clamp(200px,35vh,300px)}
  
  /* Show floating tools (AI cheating + DRM) with responsive sizing */
  .float-tool{border-radius:clamp(6px,1.5vw,10px);z-index:25!important;opacity:1!important}
  .float-ic{top:10px!important;right:10px!important;width:clamp(130px,35vw,180px);position:fixed!important;opacity:1!important}
  .ic-header{padding:clamp(5px,1.2vw,8px) clamp(6px,1.2vw,10px)}
  .ic-title{font-size:clamp(7px,1.6vw,9px)}
  .ic-body{padding:clamp(5px,1.2vw,8px) clamp(6px,1.2vw,10px);gap:clamp(4px,1vw,8px)}
  .ic-msg{font-size:clamp(7px,1.5vw,9px);padding:clamp(4px,1vw,7px) clamp(5px,1vw,8px)}
  .ic-icon{width:clamp(14px,3.5vw,20px);height:clamp(14px,3.5vw,20px);border-radius:clamp(3px,0.8vw,6px)}
  
  .float-ext{bottom:10px!important;right:10px!important;width:clamp(120px,32vw,170px);position:fixed!important;opacity:1!important}
  .ext-header{padding:clamp(4px,1vw,7px) clamp(5px,1vw,10px)}
  .ext-body{padding:clamp(5px,1vw,8px) clamp(5px,1vw,10px);gap:clamp(3px,0.8vw,6px)}
  
  .float-ss{bottom:clamp(-14px,-2vw,-22px);left:clamp(-16px,-2vw,-30px);width:clamp(120px,32vw,160px)}
  .ss-body{padding:clamp(5px,1vw,8px) clamp(5px,1vw,10px);gap:clamp(3px,0.8vw,6px)}
  .ss-preview{width:clamp(100px,28vw,150px);height:clamp(50px,14vw,80px)}
  
  .float-rec{top:clamp(-20px,-3vw,-35px);left:clamp(-30px,-4vw,-50px);width:clamp(120px,32vw,160px)}
  .rec-header{padding:clamp(4px,1vw,7px) clamp(5px,1vw,10px)}
  .rec-body{padding:clamp(5px,1vw,8px) clamp(5px,1vw,10px);gap:clamp(3px,0.8vw,6px)}
  .rec-preview{height:clamp(40px,10vw,60px)}
  
  /* AI overlay + DRM ripper popups — show on mobile */
  .ss-float-cluely{width:clamp(140px,38vw,180px);top:clamp(16px,4vw,28px);right:clamp(-16px,-3vw,-24px);border-radius:clamp(6px,1.5vw,8px)}
  .ssfc-bar{padding:clamp(5px,1vw,7px) clamp(6px,1.2vw,10px);font-size:clamp(8px,1.8vw,10px);gap:clamp(3px,0.8vw,5px)}
  .ssfc-body{padding:clamp(6px,1.2vw,10px)}
  .ssfc-msg{font-size:clamp(9px,2vw,11px)}
  .ssfc-sub{font-size:clamp(7px,1.5vw,9px)}
  
  .ss-float-drm{width:clamp(130px,36vw,170px);top:clamp(100px,26vw,130px);left:clamp(-40px,-6vw,-60px);border-radius:clamp(6px,1.5vw,8px)}
  .ssfd-bar{padding:clamp(5px,1vw,7px) clamp(6px,1.2vw,10px);font-size:clamp(8px,1.8vw,10px);gap:clamp(3px,0.8vw,5px)}
  .ssfd-body{padding:clamp(6px,1.2vw,10px)}
  .ssfd-status{font-size:clamp(7px,1.5vw,9px)}
  .ssfd-error{font-size:clamp(8px,1.8vw,10px);padding:clamp(5px,1vw,7px) clamp(6px,1.2vw,8px)}
  
  /* Visual section spacing */
  .sol-visual{padding:clamp(8px,2vw,16px) 0 clamp(24px,5vw,40px);overflow:visible}
}

/* ── Ensure no black backgrounds on bullet lists ── */
.bullets, .bullets li, .bdot{
  background:transparent !important;
}