/* =====================================================
   TRANSLUCID — Responsive Breakpoints
   Mobile-first media queries for all screen sizes
   
   Breakpoints:
   - xs:  0–479px    (small phones)
   - sm:  480–767px  (large phones)
   - md:  768–1023px (tablets / iPad portrait)
   - lg:  1024–1439px (laptops / iPad landscape)
   - xl:  1440px+    (desktop, default)
   - xxl: 1920px+    (large monitors / TV)
   ===================================================== */

/* ══════════════════════════════════════════════════
   LARGE MONITORS / TV  (1920px+)
   ══════════════════════════════════════════════════ */
@media(min-width:1920px){
  :root{--margin-x:240px}
  .threat-inner{max-width:1400px}
  .ss-showcase{max-width:1600px}
  .how-title{font-size:60px}
  .hero h1{font-size:clamp(42px,3.2vw,56px)}
  .hero p{font-size:19px}
  .sol-title{font-size:clamp(42px,3.5vw,64px)}
  .api-section{max-width:1400px}
  .uc-section{max-width:1600px}
  .api-title{font-size:clamp(42px,3.2vw,56px)}
}

/* ══════════════════════════════════════════════════
   EXTRA LARGE (2560px+ / TV)
   ══════════════════════════════════════════════════ */
@media(min-width:2560px){
  :root{--margin-x:400px}
  .hero h1{font-size:clamp(48px,2.5vw,64px)}
  .hero p{font-size:20px}
}

/* ══════════════════════════════════════════════════
   LAPTOPS  (1024–1439px)
   ══════════════════════════════════════════════════ */
@media(max-width:1439px){
  :root{--margin-x:80px}
  .controls-panel{left:-10px;width:180px;transform:translateY(-50%) scale(.88)}
  .logs-panel{right:-30px;width:210px;transform:translateY(-50%) scale(.88)}
  .laptop-screen{width:620px;height:388px}
  .laptop-hinge{width:620px}
  .laptop-base{width:660px}
  .laptop-shadow{width:580px}
  .float-ic{right:-80px;width:210px}
  .float-ext{right:-60px;width:190px}
  .float-ss{left:-30px;width:180px}
  .how-title{font-size:42px}
  .split{grid-template-columns:46fr 54fr}
}

/* ══════════════════════════════════════════════════
   TABLETS  (768–1023px)
   ══════════════════════════════════════════════════ */
@media(max-width:1023px){
  :root{--margin-x:32px}

  /* Global font scaling */
  .section-stage-label{font-size:10px;letter-spacing:3px;margin-bottom:20px}
  .btn,.btn-primary,.btn-outline{font-size:12px;padding:10px 22px}

  /* Nav — show hamburger, keep Sign In + Get in Touch */
  .nav-menu{display:none}
  .nav-hamburger{display:flex}
  nav{padding:14px 0}
  .nav-right{gap:8px}
  .nav-btn-signin,.nav-btn-demo{font-size:12px;padding:7px 14px}

  /* Hero */
  .hero{padding:32px 16px 48px}
  .hero h1{font-size:clamp(22px,3.5vw,32px);white-space:normal}
  .hero p{font-size:14px;max-width:600px}
  .hv-scene{transform:perspective(800px) rotateX(12deg);gap:4px}
  .hv-device{transform:scale(.85)}

  /* Logo Bar */
  .logo-bar{flex-wrap:wrap;gap:20px;padding:24px 0}
  .logo-bar-label{width:100%;text-align:center}
  .logo-bar-items{gap:16px;flex-wrap:wrap;justify-content:center}
  .logo-bar-item{height:36px}

  /* Threat Section */
  .threat{padding:40px 0 60px}
  .threat-header{padding:0 20px}
  .threat-header h2{font-size:clamp(18px,3.2vw,30px);white-space:normal}
  .threat-header p{font-size:13px;white-space:normal}
  .threat-tab{padding:8px 14px;font-size:11px}
  .threat-monitor{max-height:380px}
  .scene-label h3{font-size:13px}
  .scene-label p{font-size:10px}

  /* Solution / Session Security */
  .ss-showcase{padding:0 20px}
  .sol-title{font-size:clamp(22px,3.2vw,34px)}
  .sol-sub{font-size:14px}
  .sol-header{padding:40px 0 30px}
  .controls-panel{display:none}
  .logs-panel{display:none}
  .laptop-screen{width:100%;max-width:520px;height:auto;aspect-ratio:16/10}
  .laptop-hinge{width:100%;max-width:520px}
  .laptop-base{width:100%;max-width:560px}
  .laptop-shadow{width:100%;max-width:480px}
  .float-tool{display:none}
  .ss-float-cluely{display:none}
  .ss-float-drm{display:none}
  .sol-visual{padding:20px 0 40px}
  .center-stage{width:100%;display:flex;flex-direction:column;align-items:center}
  .ss-laptop{width:100%;display:flex;flex-direction:column;align-items:center}

  /* How It Works — keep sticky scroll, just scale */
  .how-wrap{height:400vh}
  .how-left{width:40%;padding:40px 0 30px 0}
  .how-right{width:60%;padding:40px 0 40px 0}
  .how-title{font-size:clamp(24px,3.2vw,32px);margin-bottom:28px}
  .step-text h3{font-size:13px}
  .step-text p{font-size:11px}
  .scene{width:100%;max-width:480px;height:380px}

  /* API Section */
  .api-section{padding:48px 24px}
  .api-code-area{grid-template-columns:1fr;min-height:auto}
  .api-preview{display:none}
  .api-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .api-card{padding:16px}
  .api-title{font-size:clamp(22px,3.2vw,34px)}
  .api-tag{font-size:12px}
  .api-sub{font-size:13px}

  /* Use Cases */
  .uc-section{padding:48px 0}
  .uc-section h2{font-size:clamp(22px,3.2vw,34px)}
  .uc-card{grid-template-columns:1fr;gap:24px;padding:24px 24px}
  .uc-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .uc-tabs::-webkit-scrollbar{display:none}
  .uc-tab{flex-shrink:0;padding:10px 16px;font-size:10px}
  .uc-logo-title{font-size:20px}
  .uc-desc{font-size:14px}
  .uc-bullet{font-size:13px}

  /* Split / Architecture */
  .split{grid-template-columns:1fr;min-height:auto}
  .split-left{padding:40px 0 20px}
  .split-left h2{font-size:clamp(22px,3.2vw,34px)}
  .split-right{margin-left:0;width:100%;min-height:50vh}
  #arch{min-height:50vh}
  .bullets li{font-size:14px}

  /* CTA */
  .cta-wrap{padding:40px 32px}
  .cta-title{font-size:clamp(24px,3.5vw,40px)}
  .cta-sub{font-size:14px}

  /* Footer */
  .site-footer{padding:40px 32px 0}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-nav{grid-template-columns:repeat(3,1fr);gap:24px}
  .footer-tagline{font-size:13px}

  /* Documentation */
  .doc-layout{grid-template-columns:180px 1fr}
  #docContent{padding:24px 32px}
  .doc-table{font-size:12px}
  .doc-table th,.doc-table td{padding:8px 10px}
}

/* ══════════════════════════════════════════════════
   LARGE PHONES  (480–767px)
   ══════════════════════════════════════════════════ */
@media(max-width:767px){
  :root{--margin-x:16px}

  /* Global font scaling */
  .section-stage-label{font-size:9px;letter-spacing:2.5px;margin-bottom:16px}
  .btn,.btn-primary,.btn-outline{font-size:11px;padding:9px 18px}

  /* Nav — hide Sign In + Get in Touch, show hamburger only */
  .nav-btn-signin{display:none}
  .nav-btn-demo{display:none}
  .nav-right{gap:6px}

  /* Hero */
  .hero{padding:24px 12px 40px}
  .hero h1{font-size:clamp(18px,5vw,28px)}
  .hero p{font-size:13px;margin-bottom:20px}
  .hero-btns{flex-direction:column;align-items:center;gap:10px}
  .hero-btns .btn,.hero-btns .btn-primary,.hero-btns .btn-outline{width:100%;max-width:280px;justify-content:center}
  .waitlist-form{max-width:100%;padding:0 12px}
  .waitlist-input-wrap{flex-direction:column;padding:6px;gap:6px}
  .waitlist-input-wrap input{text-align:center;padding:8px 12px}
  .waitlist-btn{width:100%;padding:10px 20px}
  .waitlist-social{gap:6px;margin-top:6px}
  .waitlist-avatar{width:20px;height:20px;margin-left:-6px}
  .waitlist-count{font-size:11px}
  .waitlist-toast{top:12px;right:12px;max-width:280px;font-size:12px;padding:10px 16px}
  .hero-viz{margin-bottom:12px}
  .hero-demo-btn{margin-bottom:24px}
  .hv-scene{transform:perspective(800px) rotateX(10deg) scale(.7)}

  /* Logo Bar */
  .logo-bar{margin-top:20px;gap:14px;padding:16px 0}
  .logo-bar-items{gap:12px}
  .logo-bar-item{height:28px}

  /* Threat Section */
  .threat{padding:28px 0 36px}
  .threat-header{padding:0 12px}
  .threat-header h2{font-size:clamp(16px,4.5vw,24px)}
  .threat-header p{font-size:12px}
  .threat-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 8px}
  .threat-tab{width:100%;justify-content:center;padding:8px 8px;font-size:10px;gap:4px;white-space:nowrap}
  .threat-tab svg{width:12px;height:12px}
  .threat-monitor{border-radius:10px;max-height:360px}
  .scene-label{padding:12px 14px}
  .scene-label h3{font-size:13px}
  .scene-label p{font-size:10px;max-width:100%}
  .danger-badge{font-size:9px;padding:5px 10px}
  .sc1-call{grid-template-columns:1fr 1fr}
  .sc1-controls{gap:6px;bottom:8px}
  .sc1-ctrl{width:28px;height:28px}
  .sc1-ctrl svg{width:12px;height:12px}
  .sc1-rec-bar{top:36px;padding:4px 10px;gap:5px}
  .sc1-ai-panel{display:none}
  .sc1-insights{display:none}
  .sc2-sidebar{width:140px;padding:30px 8px 12px}
  .sc2-main{padding:22px 12px 12px}
  .sc2-qnum{font-size:9px}
  .sc2-qtext{font-size:11px;line-height:1.4;margin-bottom:10px}
  .sc2-opt{padding:7px 8px;font-size:9.5px;margin-bottom:5px}
  .opt-l{width:18px;height:18px;font-size:8px}
  .sc2-autofill{width:145px;padding:7px;top:34px;right:6px}
  .af-header h4{font-size:8px}
  .af-value{font-size:9px}
  .sc3-drm{width:150px;max-height:150px;padding:7px;bottom:68px}
  .drm-header h4{font-size:10px}
  .drm-ver{font-size:8px}
  .drm-row{font-size:8px;padding:2px 0}
  .drm-status{font-size:8px;margin-top:5px}
  .sc3-downloader{width:200px}

  /* Solution / Session Security */
  .sol-title{font-size:clamp(18px,4.5vw,28px)}
  .sol-sub{font-size:13px}
  .sol-header{padding:32px 0 20px}
  .sol-tag{font-size:9px;letter-spacing:3px;margin-bottom:16px}
  .sol-visual{padding:10px 0 30px}
  .laptop-screen{width:100%;max-width:420px;height:auto;aspect-ratio:16/10}
  .laptop-hinge{width:100%;max-width:420px}
  .laptop-base{width:100%;max-width:460px}
  .laptop-shadow{width:100%;max-width:380px}
  .screen-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .conf-panel{display:none}

  /* How It Works — full-width text with visible background visual */
  .how-wrap{height:250vh}
  .how-sticky{height:85vh}
  .how-left{width:100%;max-width:none;padding:16px 0 12px 0}
  .how-right{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;padding:0;opacity:.38;z-index:1;pointer-events:none}
  .how-title{font-size:22px;margin-bottom:12px;max-width:none}
  .how-footer{flex-direction:column;gap:8px}
  .how-footer a{padding:8px 14px;font-size:10px}
  .step{padding:14px 0}
  .step-text h3{font-size:12px}
  .step-text p{font-size:10px}
  .step-text{width:100%;max-width:none}
  .scene{width:100%;max-width:420px;height:300px;opacity:.95}

  /* API Section */
  .api-section{padding:40px 16px}
  .api-cards{grid-template-columns:1fr;gap:12px}
  .api-code-tab{padding:10px 14px;font-size:11px}
  .api-code-ref{display:none}
  .api-editor{font-size:10px;padding:14px 16px}

  /* Use Cases */
  .uc-section{padding:40px 0}
  .uc-card{padding:20px 16px;min-height:auto}
  .uc-logo-title{font-size:18px}
  .uc-desc{font-size:14px}
  .uc-laptop{max-width:100%;transform:none;filter:none;margin-bottom:0}
  .uc-laptop:hover{transform:none}
  .uc-visual-video{width:100%}
  .uc-video-wrap{max-width:100%}

  /* Split / Architecture */
  .split-left h2{font-size:clamp(20px,5vw,30px);margin-bottom:24px}
  .bullets li{font-size:15px;gap:10px}

  /* CTA */
  .cta-wrap{padding:32px 16px}
  .cta-title{font-size:clamp(22px,5vw,36px)}
  .cta-sub{font-size:13px}
  .cta-btns{flex-direction:column;gap:10px}
  .cta-btn-primary,.cta-btn-secondary{font-size:12px;padding:10px 18px}

  /* Footer */
  .site-footer{padding:32px 16px 0}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:20px}
  .footer-tagline{max-width:100%;font-size:11px}
  .footer-link{font-size:12px}
  .footer-col-title{font-size:8px}

  /* Documentation */
  .doc-layout{grid-template-columns:1fr}
  #docNav{display:none}
  #docContent{padding:20px 16px;max-width:100%}
  .doc-h2{font-size:20px}
  .doc-p{font-size:13px}
  .doc-table{font-size:11px;display:block;overflow-x:auto}
  .doc-table th,.doc-table td{padding:8px;white-space:nowrap}
  .doc-code pre{font-size:11px;padding:12px}
}

/* ══════════════════════════════════════════════════
   SMALL PHONES  (0–479px)
   ══════════════════════════════════════════════════ */
@media(max-width:479px){
  :root{--margin-x:12px}

  /* Nav */
  .nav-btn-demo{display:none}
  .nav-hamburger{display:flex}
  .logo img{height:22px}

  /* Hero */
  .hero{padding:20px 8px 32px}
  .hero h1{font-size:clamp(18px,6.5vw,26px)}
  .hero p{font-size:13px}
  .hv-scene{transform:perspective(800px) rotateX(8deg) scale(.55)}

  /* Logo Bar */
  .logo-bar{margin-top:28px;gap:10px;padding:16px 0}
  .logo-bar-label{font-size:10px}
  .logo-bar-items{gap:10px}
  .logo-bar-item{height:22px}

  /* Threat Section */
  .threat-header h2{font-size:clamp(16px,6vw,24px)}
  .threat-header p{font-size:12px}
  .threat-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 12px}
  .threat-tab{width:100%;justify-content:center;font-size:9px;padding:8px 6px;white-space:nowrap}
  .threat-monitor{border-radius:8px;max-height:280px}
  .scene-label{padding:8px 12px!important;flex-direction:column;gap:8px}
  .scene-label h3{font-size:12px!important}
  .scene-label p{font-size:10px!important}
  .danger-badge{font-size:8px!important;padding:4px 8px!important}
  .sc1-call{grid-template-columns:1fr 1fr}
  .sc1-name{font-size:7px;left:6px;bottom:6px}
  .sc1-controls{bottom:6px;gap:4px}
  .sc1-ctrl{width:24px;height:24px}
  .sc1-rec-bar{top:30px;padding:3px 8px;gap:4px}
  .sc2-sidebar{display:none}
  .sc2-main{padding:20px 10px 10px}
  .sc2-qnum{font-size:8px}
  .sc2-qtext{font-size:10px;line-height:1.35;margin-bottom:8px}
  .sc2-opt{font-size:9px;padding:6px 8px;margin-bottom:4px}
  .opt-l{width:16px;height:16px;font-size:7px}
  .sc2-autofill{width:130px;padding:6px;top:30px;right:4px;display:block}
  .af-status{font-size:7px}
  .af-value{font-size:8px}
  .sc3-drm{display:block;width:132px;max-height:130px;padding:6px;bottom:56px;right:6px}
  .drm-header h4{font-size:9px}
  .drm-ver{font-size:7px}
  .drm-row{font-size:7px;padding:2px 0}
  .drm-status{font-size:7px}
  .sc3-downloader{display:none}
  .sc3-recorder{display:block;padding:3px 6px;bottom:14px;right:6px}

  /* Solution / Session Security */
  .sol-sub{font-size:13px}
  .laptop-screen{max-width:100%;border-radius:8px 8px 0 0}
  .laptop-hinge{max-width:100%}
  .laptop-base{max-width:100%}
  .laptop-shadow{max-width:100%}

  /* How It Works — keep sticky, full-width text with brighter background visual */
  .how-wrap{height:200vh}
  .how-sticky{height:75vh}
  .how-left{width:100%;max-width:none}
  .how-right{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;padding:0;opacity:.34;z-index:1;pointer-events:none}
  .how-title{font-size:18px;margin-bottom:10px;max-width:none}
  .step{padding:8px 0;gap:10px}
  .step-dot{width:12px;height:12px}
  .step-text h3{font-size:11px}
  .step-text p{font-size:9.5px}
  .step-text{width:100%;max-width:none}
  .scene{max-width:300px;height:240px;opacity:.95}
  .how-footer a{font-size:9px;padding:6px 10px}

  /* API Section */
  .api-section{padding:32px 12px}
  .api-title{font-size:clamp(20px,6vw,32px)}
  .api-code-tab{padding:8px 10px;font-size:10px}
  .api-editor{font-size:9.5px;line-height:1.7;padding:10px 12px}
  .api-card-title{font-size:14px}
  .api-card-desc{font-size:12px}

  /* Use Cases */
  .uc-card{padding:16px 12px}
  .uc-logo-title{font-size:16px}
  .uc-desc{font-size:13px}
  .uc-bullet{font-size:12px}
  .uc-tab{font-size:9px;padding:10px 12px;letter-spacing:1px}

  /* CTA */
  .cta-title{font-size:clamp(24px,7vw,36px)}
  .cta-sub{font-size:13px}

  /* Footer */
  .footer-nav{grid-template-columns:1fr 1fr;gap:16px}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px}
}

/* ══════════════════════════════════════════════════
   UTILITY: Touch-friendly tap targets
   ══════════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  .threat-tab{min-height:44px}
  .uc-tab{min-height:44px}
  .nav-link{min-height:44px;padding:12px}
  .btn,.btn-primary,.btn-outline{min-height:44px}
  .sc1-ctrl{width:38px;height:38px}
  .nav-hamburger{min-height:44px;min-width:44px;justify-content:center;align-items:center}
}

/* ══════════════════════════════════════════════════
   UTILITY: Reduced motion preference
   ══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}