:root{
  /* Surfaces (light dark-blue, GCP-style flatness with blue tone) */
  --bg-base:#192642;--bg-surface:#1f2d4d;--bg-surface-2:#243557;--bg-elevated:#2d3f64;--bg-input:#15203a;
  /* Borders (cool blue-tinted) */
  --border-subtle:rgba(150,180,230,.08);--border-default:rgba(150,180,230,.16);--border-strong:rgba(150,180,230,.28);
  /* Text */
  --text-primary:#e8eef9;--text-secondary:#c2cce0;--text-tertiary:#9aa6c2;--text-muted:#7c89a8;
  /* Accents (Google-blue family, slightly cooler to harmonize with navy) */
  --accent:#8ab4f8;--accent-hover:#aecbfa;--accent-strong:#4285f4;--accent-press:#1a73e8;
  --accent-bg:rgba(138,180,248,.14);--accent-bg-strong:rgba(138,180,248,.24);
  /* Semantic */
  --success:#81c995;--success-bg:rgba(129,201,149,.14);--success-strong:#1e8e3e;
  --warning:#fdd663;--warning-bg:rgba(253,214,99,.14);
  --error:#f28b82;--error-bg:rgba(242,139,130,.14);
  --violet:#c58af9;
  /* Backwards-compat aliases (used by existing markup) */
  --bg-primary:var(--bg-base);--bg-secondary:var(--bg-surface);--bg-tertiary:var(--bg-surface-2);--bg-card:var(--bg-surface);
  --accent-cyan:var(--accent);--accent-blue:var(--accent-strong);--accent-violet:var(--violet);
  --accent-emerald:var(--success);--accent-amber:var(--warning);--accent-rose:var(--error);
  --gradient-primary:var(--accent-strong);--gradient-success:var(--success-strong);--gradient-bg:var(--bg-base);
  --shadow-glow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.18);
  --font-sans:'Roboto','Helvetica Neue',Arial,system-ui,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-sm:4px;--radius-md:8px;--radius-lg:8px;--radius-xl:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;text-rendering:optimizeLegibility}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden;font-weight:400;letter-spacing:0;font-size:14px}
/* === BG EFFECTS (disabled, kept for markup compatibility) === */
.bg-effects,.bg-grid,.bg-glow{display:none!important}
.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 24px}
/* === HEADER (Google Cloud Console-style top bar) === */
.header{height:56px;border-bottom:1px solid var(--border-subtle);background:var(--bg-base);position:sticky;top:0;z-index:100;display:flex;align-items:center}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;object-fit:contain}
.logo-text{font-size:20px;font-weight:400;letter-spacing:-.2px;color:var(--text-primary);font-family:var(--font-sans)}
.logo-by{font-size:13px;font-weight:400;color:var(--text-tertiary);margin-left:6px;padding-left:10px;border-left:1px solid var(--border-default)}
.logo-by-link{color:var(--accent);text-decoration:none;font-weight:500;transition:color .15s}
.logo-by-link:hover{color:var(--accent-hover);text-decoration:underline}
.header-nav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:16px}
.nav-link{font-size:13px;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:background .15s,color .15s;letter-spacing:.1px;padding:6px 12px;border-radius:4px}
.nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,.06)}
.nav-link::after{display:none}
.header-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--success-bg);border:1px solid rgba(129,201,149,.3);border-radius:4px;font-size:12px;font-weight:500;color:var(--success);text-transform:none;letter-spacing:.1px}
.status-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
/* === SUBHEADER / METADATA STRIP === */
.trust-bar{padding:10px 0;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
.trust-inner{display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap}
.trust-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-tertiary);font-weight:400;letter-spacing:.1px}
.trust-icon{width:14px;height:14px;flex-shrink:0;opacity:.65;stroke:var(--text-tertiary)}
.trust-item strong{color:var(--text-primary);font-weight:500}
/* === MAIN === */
.main{flex:1;padding:24px 0 48px}
.main-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
/* === CARDS === */
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--border-default)}
.card-header{padding:14px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:var(--bg-surface)}
.card-title{font-size:16px;font-weight:500;letter-spacing:0;color:var(--text-primary)}
.card-badge{font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-bg-strong);padding:2px 8px;border-radius:4px;text-transform:none;letter-spacing:.1px}
.card-body{padding:20px}
.upload-card{position:relative}
.upload-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-strong)}
/* === DROPZONE === */
.dropzone{border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:48px 32px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:transparent;position:relative;overflow:hidden}
.dropzone::before{content:'';position:absolute;inset:0;background:var(--accent-bg);pointer-events:none;transition:opacity .15s;opacity:0}
.dropzone:hover{border-color:var(--accent);background:rgba(138,180,248,.04)}
.dropzone:hover::before{opacity:0}
.dropzone.drag-active{border-color:var(--accent);border-style:solid;background:var(--accent-bg)}
.dropzone-icon{width:48px;height:48px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-bg);transition:background .15s}
.dropzone-icon img{width:32px;height:32px;border-radius:50%;opacity:.95}
.dropzone:hover .dropzone-icon{background:var(--accent-bg-strong)}
.dropzone-title{font-size:16px;font-weight:500;margin-bottom:8px;letter-spacing:0;color:var(--text-primary)}
.dropzone-text{font-size:13px;color:var(--text-tertiary);margin-bottom:20px;line-height:1.7}
.dropzone-limit{color:var(--accent);font-weight:500}
.dropzone-expiry{color:var(--text-muted);font-size:12px}
/* === BUTTONS (Material Design / GCP) === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px;font-family:var(--font-sans);font-size:14px;font-weight:500;border:none;border-radius:4px;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s,border-color .15s;text-decoration:none;-webkit-user-select:none;user-select:none;letter-spacing:.25px;line-height:1.4;min-height:36px}
.btn-primary{background:var(--accent-strong);color:#fff}
.btn-primary:hover{background:var(--accent-press);box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}
.btn-primary:active{background:#1858bd}
.btn-secondary{background:transparent;color:var(--accent);border:1px solid var(--border-default)}
.btn-secondary:hover{background:rgba(138,180,248,.08);border-color:var(--accent)}
.btn-success{background:var(--success-strong);color:#fff}
.btn-success:hover{background:#197d36;box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}
.btn-sm{padding:6px 14px;font-size:13px;min-height:32px}
/* === FORM CONTROLS === */
.options-panel{margin-top:20px;padding:16px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.option-label{display:block;font-size:12px;font-weight:500;text-transform:none;letter-spacing:.1px;color:var(--text-secondary);margin-bottom:6px}
.option-input{width:100%;padding:8px 36px 8px 12px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:400;color:var(--text-primary);transition:border-color .15s,box-shadow .15s;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;line-height:1.4}
.option-input:hover{border-color:var(--border-strong)}
.option-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.option-input option{background:var(--bg-surface-2);color:var(--text-primary)}
.option-hint{font-size:12px;color:var(--text-tertiary);margin-top:6px;line-height:1.5}
/* === KPI CARDS === */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.stat-box{padding:14px 16px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left;transition:border-color .15s}
.stat-box:hover{border-color:var(--border-default)}
.stat-value{font-size:22px;font-weight:400;color:var(--text-primary);margin-bottom:2px;letter-spacing:-.5px;font-family:var(--font-sans)}
.stat-label{font-size:11px;font-weight:500;text-transform:none;letter-spacing:.1px;color:var(--text-tertiary)}
/* === FILE LIST (resource rows) === */
.file-list{margin-top:20px;display:flex;flex-direction:column;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}
.file-list:empty{display:none}
.file-item{background:var(--bg-surface);padding:14px 16px;transition:background .15s}
.file-item:hover{background:var(--bg-surface-2)}
.file-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.file-info{flex:1;min-width:0}
.file-name{font-size:14px;font-weight:500;margin-bottom:2px;word-break:break-word;color:var(--text-primary)}
.file-size{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}
.file-status{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;text-transform:none;letter-spacing:.1px;border:1px solid transparent;display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.file-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.file-status.queued{background:var(--warning-bg);color:var(--warning);border-color:rgba(253,214,99,.25)}
.file-status.hashing{background:rgba(197,138,249,.12);color:var(--violet);border-color:rgba(197,138,249,.25)}
.file-status.uploading{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-bg-strong)}
.file-status.completed{background:var(--success-bg);color:var(--success);border-color:rgba(129,201,149,.3)}
.file-status.instant{background:var(--success-bg);color:var(--success);border-color:rgba(129,201,149,.4)}
.file-status.error{background:var(--error-bg);color:var(--error);border-color:rgba(242,139,130,.3)}
/* === PROGRESS === */
.progress-section{margin-bottom:6px}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.progress-percent{font-size:13px;font-weight:500;font-family:var(--font-mono);color:var(--text-primary)}
.progress-speed{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}
.progress-bar{height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent-strong);border-radius:2px;width:0%;transition:width .3s;position:relative}
.progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-details{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.progress-chunks{display:flex;justify-content:space-between;margin-top:3px;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
/* === DOWNLOAD CARD === */
.download-card{background:var(--success-bg);border:1px solid rgba(129,201,149,.25);border-radius:var(--radius-sm);padding:14px}
.download-label{font-size:12px;font-weight:500;text-transform:none;letter-spacing:.1px;color:var(--success);margin-bottom:8px}
.download-input-group{display:flex;gap:6px;margin-bottom:10px}
.download-input{flex:1;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;color:var(--text-primary);min-width:0}
.download-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.download-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.download-expiry{font-size:11px;color:var(--text-muted);margin-top:5px}
/* === SIDEBAR === */
.sidebar{display:flex;flex-direction:column;gap:16px}
.sidebar-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 18px;transition:border-color .15s}
.sidebar-card:hover{border-color:var(--border-default)}
.sidebar-title{font-size:13px;font-weight:500;margin-bottom:14px;letter-spacing:.1px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.sidebar-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sidebar-stat{padding:10px 12px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);text-align:left}
.sidebar-stat-value{font-size:18px;font-weight:400;color:var(--text-primary);margin-bottom:1px;letter-spacing:-.3px;font-family:var(--font-sans)}
.sidebar-stat-label{font-size:11px;font-weight:400;text-transform:none;letter-spacing:.1px;color:var(--text-tertiary)}
.info-list{list-style:none}
.info-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text-secondary)}
.info-item:last-child{border-bottom:none}
.info-number{width:24px;height:24px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--accent);flex-shrink:0;font-family:var(--font-mono)}
/* === SECTIONS === */
.features-section{padding:64px 0;border-top:1px solid var(--border-subtle)}
.section-header{text-align:left;margin-bottom:32px;max-width:720px}
.section-eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:8px;display:block}
.section-title{font-size:28px;font-weight:400;letter-spacing:-.5px;margin-bottom:8px;color:var(--text-primary)}
.section-title span{color:var(--accent)}
.section-desc{font-size:14px;color:var(--text-secondary);max-width:600px;margin:0;line-height:1.6}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:24px;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-strong);opacity:0;transition:opacity .15s}
.feature-card:hover{border-color:var(--border-default);box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)}
.feature-card:hover::before{opacity:1}
.feature-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--accent-bg);border:1px solid var(--accent-bg-strong)}
.feature-icon svg{width:20px;height:20px;stroke:var(--accent)}
.feature-card h3{font-size:15px;font-weight:500;margin-bottom:6px;letter-spacing:0;color:var(--text-primary)}
.feature-card p{font-size:13px;color:var(--text-secondary);line-height:1.6}
/* === DATA TABLE (GCP Cloud Console style) === */
.comparison-section{padding:64px 0;border-top:1px solid var(--border-subtle)}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-size:13px}
.comparison-table thead{background:var(--bg-surface-2)}
.comparison-table th{padding:12px 16px;text-align:left;font-weight:500;font-size:12px;text-transform:none;letter-spacing:.1px;color:var(--text-tertiary);border-bottom:1px solid var(--border-subtle)}
.comparison-table th:first-child{color:var(--text-primary)}
.comparison-table th.highlight{color:var(--accent);background:var(--accent-bg)}
.comparison-table td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-size:13px}
.comparison-table td:first-child{font-weight:400;color:var(--text-primary)}
.comparison-table td.highlight{background:rgba(138,180,248,.04);color:var(--text-primary);font-weight:400}
.comparison-table tr:hover td{background:var(--bg-surface-2)}
.comparison-table tr:hover td.highlight{background:rgba(138,180,248,.06)}
.comparison-table tr:last-child td{border-bottom:none}
.check-yes{color:var(--success);font-weight:500}
.check-no{color:var(--text-muted)}
/* === DOCUMENTATION BLOCKS === */
.seo-section{padding:64px 0;border-top:1px solid var(--border-subtle)}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.seo-block{padding:20px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color .15s}
.seo-block:hover{border-color:var(--border-default)}
.seo-block h3{font-size:14px;font-weight:500;margin-bottom:8px;letter-spacing:0;color:var(--text-primary)}
.seo-block p{font-size:13px;color:var(--text-secondary);line-height:1.6}
.seo-extended{max-width:880px;margin:0 auto;padding:0 24px 48px}
.seo-extended h2{font-size:24px;font-weight:400;margin-bottom:16px;letter-spacing:-.3px;color:var(--text-primary)}
.seo-extended h3{font-size:16px;font-weight:500;margin:32px 0 10px;color:var(--text-primary);letter-spacing:-.1px}
.seo-extended p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:14px}
.seo-extended ul{list-style:none;margin:12px 0 20px;padding:0}
.seo-extended ul li{font-size:14px;color:var(--text-secondary);line-height:1.7;padding:3px 0 3px 18px;position:relative}
.seo-extended ul li::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--accent);border-radius:50%}
/* === FAQ ACCORDION === */
.faq-section{padding:64px 0;border-top:1px solid var(--border-subtle)}
.faq-grid{max-width:820px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.faq-item{background:transparent;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;overflow:hidden;transition:background .15s}
.faq-item:last-child{border-bottom:0}
.faq-item:hover{background:var(--bg-surface-2)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;cursor:pointer;font-size:14px;font-weight:400;color:var(--text-primary);transition:color .15s;-webkit-user-select:none;user-select:none}
.faq-q:hover{color:var(--accent)}
.faq-q svg{width:18px;height:18px;flex-shrink:0;stroke:var(--text-tertiary);transition:transform .25s}
.faq-item.open{background:var(--bg-surface-2)}
.faq-item.open .faq-q{color:var(--accent)}
.faq-item.open .faq-q svg{transform:rotate(180deg);stroke:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease-out}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 20px 16px;font-size:13px;color:var(--text-secondary);line-height:1.7}
/* === FOOTER === */
.footer{padding:32px 0;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:24px}
.footer-brand p{font-size:13px;color:var(--text-tertiary);line-height:1.6;margin-top:10px;max-width:320px}
.footer-col h4{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:10px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:6px}
.footer-col a{font-size:13px;color:var(--text-secondary);text-decoration:none;transition:color .15s}
.footer-col a:hover{color:var(--accent);text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.footer-text{font-size:12px;color:var(--text-tertiary)}
.footer-links{display:flex;gap:18px}
.footer-link{font-size:12px;color:var(--text-tertiary);text-decoration:none;transition:color .15s}
.footer-link:hover{color:var(--accent);text-decoration:underline}
/* === LOADER OVERLAY (animations preserved) === */
.loader-overlay{position:fixed;inset:0;background:rgba(25,38,66,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.loader-overlay.active{display:flex;opacity:1;pointer-events:all}
.loader-content{text-align:center;max-width:400px;width:100%;padding:20px}
.particle-container{width:260px;height:260px;margin:0 auto 32px;position:relative}
.particle{position:absolute;border-radius:50%;top:50%;left:50%;animation-play-state:paused}
.loader-overlay.active .particle,.loader-overlay.active .particle-center,.loader-overlay.active .particle-center::before,.loader-overlay.active .particle-center::after,.loader-overlay.active .particle-center .aura-ring{animation-play-state:running}
/* Inner orbit - fast, small, bright */
.particle:nth-child(1){width:8px;height:8px;background:#00ffee;box-shadow:0 0 20px 6px #00ffee,0 0 40px 12px rgba(0,255,238,.3);animation:oi1 1.8s linear infinite}
.particle:nth-child(2){width:6px;height:6px;background:#00d4ff;box-shadow:0 0 18px 5px #00d4ff,0 0 36px 10px rgba(0,212,255,.3);animation:oi2 2s linear infinite}
.particle:nth-child(3){width:7px;height:7px;background:#33eeff;box-shadow:0 0 20px 6px #33eeff,0 0 40px 12px rgba(51,238,255,.25);animation:oi3 1.6s linear infinite}
.particle:nth-child(4){width:5px;height:5px;background:#66ffff;box-shadow:0 0 16px 4px #66ffff,0 0 32px 8px rgba(102,255,255,.25);animation:oi4 2.2s linear infinite}
.particle:nth-child(5){width:6px;height:6px;background:#00ffaa;box-shadow:0 0 18px 5px #00ffaa,0 0 36px 10px rgba(0,255,170,.25);animation:oi5 1.9s linear infinite}
/* Mid orbit - medium, vivid */
.particle:nth-child(6){width:10px;height:10px;background:#8b5cf6;box-shadow:0 0 24px 8px #8b5cf6,0 0 48px 16px rgba(139,92,246,.3);animation:om1 2.8s linear infinite}
.particle:nth-child(7){width:8px;height:8px;background:#a855f7;box-shadow:0 0 22px 7px #a855f7,0 0 44px 14px rgba(168,85,247,.25);animation:om2 3.1s linear infinite}
.particle:nth-child(8){width:11px;height:11px;background:#3b82f6;box-shadow:0 0 26px 9px #3b82f6,0 0 52px 18px rgba(59,130,246,.3);animation:om3 2.6s linear infinite}
.particle:nth-child(9){width:7px;height:7px;background:#60a5fa;box-shadow:0 0 20px 6px #60a5fa,0 0 40px 12px rgba(96,165,250,.25);animation:om4 3.3s linear infinite}
.particle:nth-child(10){width:9px;height:9px;background:#c084fc;box-shadow:0 0 22px 7px #c084fc,0 0 44px 14px rgba(192,132,252,.25);animation:om5 2.9s linear infinite}
/* Outer orbit - large, slow, dramatic auras */
.particle:nth-child(11){width:14px;height:14px;background:#10b981;box-shadow:0 0 30px 10px #10b981,0 0 60px 20px rgba(16,185,129,.35),0 0 90px 30px rgba(16,185,129,.15);animation:oo1 3.8s linear infinite}
.particle:nth-child(12){width:12px;height:12px;background:#f43f5e;box-shadow:0 0 28px 9px #f43f5e,0 0 56px 18px rgba(244,63,94,.3),0 0 84px 27px rgba(244,63,94,.12);animation:oo2 4.2s linear infinite}
.particle:nth-child(13){width:13px;height:13px;background:#f59e0b;box-shadow:0 0 30px 10px #f59e0b,0 0 60px 20px rgba(245,158,11,.3),0 0 90px 30px rgba(245,158,11,.12);animation:oo3 3.5s linear infinite}
.particle:nth-child(14){width:10px;height:10px;background:#f472b6;box-shadow:0 0 24px 8px #f472b6,0 0 48px 16px rgba(244,114,182,.25),0 0 72px 24px rgba(244,114,182,.1);animation:oo4 4.5s linear infinite}
.particle:nth-child(15){width:11px;height:11px;background:#22d3ee;box-shadow:0 0 26px 9px #22d3ee,0 0 52px 18px rgba(34,211,238,.3),0 0 78px 26px rgba(34,211,238,.12);animation:oo5 3.9s linear infinite}
.particle:nth-child(16){width:9px;height:9px;background:#fb923c;box-shadow:0 0 22px 7px #fb923c,0 0 44px 14px rgba(251,146,60,.25);animation:oo6 4.8s linear infinite}
/* Center logo with pulsing aura rings */
.particle-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:url('/assets/logo.png') center/contain no-repeat;border-radius:50%;box-shadow:0 0 30px rgba(0,212,255,.5),0 0 60px rgba(0,212,255,.25),0 0 100px rgba(139,92,246,.15);animation:cpulse 1.5s ease-in-out infinite;animation-play-state:paused}
.particle-center::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:95px;height:95px;border:2px solid rgba(0,212,255,.25);border-radius:50%;animation:rp 2s ease-out infinite;animation-play-state:paused}
.particle-center::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border:1.5px solid rgba(139,92,246,.18);border-radius:50%;animation:rp 2.5s ease-out infinite .6s;animation-play-state:paused}
.aura-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;animation-play-state:paused}
.aura-ring-1{width:170px;height:170px;border:1px solid rgba(16,185,129,.12);animation:rp 3s ease-out infinite 1s}
.aura-ring-2{width:210px;height:210px;border:1px solid rgba(244,63,94,.08);animation:rp 3.5s ease-out infinite 1.5s}
@keyframes oi1{from{transform:translate(-50%,-50%) rotate(0deg) translateX(30px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(30px) rotate(-360deg)}}
@keyframes oi2{from{transform:translate(-50%,-50%) rotate(90deg) translateX(34px) rotate(-90deg)}to{transform:translate(-50%,-50%) rotate(450deg) translateX(34px) rotate(-450deg)}}
@keyframes oi3{from{transform:translate(-50%,-50%) rotate(180deg) translateX(32px) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(540deg) translateX(32px) rotate(-540deg)}}
@keyframes oi4{from{transform:translate(-50%,-50%) rotate(270deg) translateX(28px) rotate(-270deg)}to{transform:translate(-50%,-50%) rotate(630deg) translateX(28px) rotate(-630deg)}}
@keyframes om1{from{transform:translate(-50%,-50%) rotate(0deg) translateX(50px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(50px) rotate(-360deg)}}
@keyframes om2{from{transform:translate(-50%,-50%) rotate(90deg) translateX(54px) rotate(-90deg)}to{transform:translate(-50%,-50%) rotate(450deg) translateX(54px) rotate(-450deg)}}
@keyframes om3{from{transform:translate(-50%,-50%) rotate(180deg) translateX(48px) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(540deg) translateX(48px) rotate(-540deg)}}
@keyframes om4{from{transform:translate(-50%,-50%) rotate(270deg) translateX(52px) rotate(-270deg)}to{transform:translate(-50%,-50%) rotate(630deg) translateX(52px) rotate(-630deg)}}
@keyframes oo1{from{transform:translate(-50%,-50%) rotate(0deg) translateX(74px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(74px) rotate(-360deg)}}
@keyframes oo2{from{transform:translate(-50%,-50%) rotate(72deg) translateX(78px) rotate(-72deg)}to{transform:translate(-50%,-50%) rotate(432deg) translateX(78px) rotate(-432deg)}}
@keyframes oo3{from{transform:translate(-50%,-50%) rotate(144deg) translateX(72px) rotate(-144deg)}to{transform:translate(-50%,-50%) rotate(504deg) translateX(72px) rotate(-504deg)}}
@keyframes oo4{from{transform:translate(-50%,-50%) rotate(216deg) translateX(80px) rotate(-216deg)}to{transform:translate(-50%,-50%) rotate(576deg) translateX(80px) rotate(-576deg)}}
@keyframes oi5{from{transform:translate(-50%,-50%) rotate(144deg) translateX(26px) rotate(-144deg)}to{transform:translate(-50%,-50%) rotate(504deg) translateX(26px) rotate(-504deg)}}
@keyframes om5{from{transform:translate(-50%,-50%) rotate(144deg) translateX(56px) rotate(-144deg)}to{transform:translate(-50%,-50%) rotate(504deg) translateX(56px) rotate(-504deg)}}
@keyframes oo5{from{transform:translate(-50%,-50%) rotate(288deg) translateX(76px) rotate(-288deg)}to{transform:translate(-50%,-50%) rotate(648deg) translateX(76px) rotate(-648deg)}}
@keyframes oo6{from{transform:translate(-50%,-50%) rotate(36deg) translateX(82px) rotate(-36deg)}to{transform:translate(-50%,-50%) rotate(396deg) translateX(82px) rotate(-396deg)}}
@keyframes cpulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 20px rgba(0,212,255,.4),0 0 40px rgba(0,212,255,.2)}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 30px rgba(0,212,255,.5),0 0 60px rgba(0,212,255,.3)}}
@keyframes rp{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
/* === ZIP COMPRESS LOADER === */
.zip-loader{width:260px;height:260px;margin:0 auto 32px;position:relative;display:none}
.loader-overlay.zip-mode .zip-loader{display:block}
.loader-overlay.zip-mode .particle-container{display:none}
.zip-archive{position:absolute;top:50%;left:50%;width:130px;height:104px;margin-left:-65px;margin-top:-52px;background:linear-gradient(180deg,var(--bg-surface-2) 0%,var(--bg-base) 100%);border:2px solid var(--accent);border-radius:8px;box-shadow:0 0 30px rgba(138,180,248,.35),0 0 60px rgba(138,180,248,.18),inset 0 0 20px rgba(66,133,244,.08);overflow:hidden;animation:zip-pulse 2s ease-in-out infinite;animation-play-state:paused;z-index:1}
.zip-archive::before{content:'';position:absolute;top:6px;bottom:6px;left:50%;width:0;border-left:2px dashed var(--accent);transform:translateX(-50%);opacity:.65}
.zip-archive::after{content:'';position:absolute;top:8px;left:50%;width:12px;height:16px;background:var(--accent-strong);border:1px solid var(--accent-hover);border-radius:2px;transform:translateX(-50%);box-shadow:0 0 10px rgba(66,133,244,.55);animation:zip-tab 2.4s ease-in-out infinite;animation-play-state:paused;z-index:2}
.zip-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,rgba(66,133,244,.22),rgba(66,133,244,.05));animation:zip-fill 2.8s ease-out infinite;animation-play-state:paused}
@keyframes zip-pulse{0%,100%{box-shadow:0 0 30px rgba(138,180,248,.35),0 0 60px rgba(138,180,248,.18),inset 0 0 20px rgba(66,133,244,.08)}50%{box-shadow:0 0 40px rgba(138,180,248,.5),0 0 80px rgba(138,180,248,.25),inset 0 0 30px rgba(66,133,244,.14)}}
@keyframes zip-tab{0%,100%{top:8px}50%{top:78px}}
@keyframes zip-fill{0%{height:0}88%,100%{height:100%}}
.zip-file{position:absolute;top:50%;left:50%;width:36px;height:46px;margin-left:-18px;margin-top:-23px;background:linear-gradient(135deg,#e8eef9,#c2cce0);border-radius:3px;box-shadow:0 4px 10px rgba(0,0,0,.4);opacity:0;animation:zip-fall 2.8s ease-in infinite;animation-play-state:paused;z-index:0}
.zip-file::before{content:'';position:absolute;top:0;right:0;width:10px;height:10px;background:var(--bg-surface);border-bottom-left-radius:2px;box-shadow:-1px 1px 0 var(--accent)}
.zip-file::after{content:'';position:absolute;top:14px;left:6px;right:6px;height:2px;background:#9aa6c2;border-radius:1px;box-shadow:0 6px 0 0 #9aa6c2,0 12px 0 0 #9aa6c2}
.zip-file-1{--sx:-110px;--sy:-100px;--sr:-14deg;animation-delay:0s}
.zip-file-2{--sx:110px;--sy:-100px;--sr:14deg;animation-delay:.30s}
.zip-file-3{--sx:-110px;--sy:96px;--sr:-8deg;animation-delay:.60s}
.zip-file-4{--sx:110px;--sy:96px;--sr:8deg;animation-delay:.90s}
.zip-file-5{--sx:0;--sy:-130px;--sr:0deg;animation-delay:1.20s}
.zip-file-6{--sx:0;--sy:118px;--sr:0deg;animation-delay:1.50s;background:linear-gradient(135deg,#bcd5ff,#5b9dff)}
.zip-file-3,.zip-file-4{background:linear-gradient(135deg,#e8eef9,#a8b8d8)}
.zip-counter{position:absolute;left:0;right:0;bottom:-36px;text-align:center;font-family:var(--font-mono);font-size:13px;color:var(--accent-strong);letter-spacing:.5px;font-weight:500;text-shadow:0 0 12px rgba(91,160,255,.4)}
.zip-loader.progress-mode .zip-fill{animation:none;height:var(--zip-progress,0%);transition:height .25s ease;background:linear-gradient(180deg,rgba(91,160,255,.45),rgba(66,133,244,.18))}
.zip-loader.progress-mode .zip-archive::after{animation:none;top:8px}
@keyframes zip-fall{0%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1);opacity:0}10%{opacity:1}65%{transform:translate(0,0) rotate(0deg) scale(.7);opacity:1}80%{transform:translate(0,0) rotate(0deg) scale(.25);opacity:0}100%{transform:translate(0,0) rotate(0deg) scale(.25);opacity:0}}
.loader-overlay.zip-mode.active .zip-archive,.loader-overlay.zip-mode.active .zip-archive::after,.loader-overlay.zip-mode.active .zip-fill,.loader-overlay.zip-mode.active .zip-file{animation-play-state:running}
.loader-title{font-size:18px;font-weight:500;margin-bottom:4px;letter-spacing:-.2px;color:var(--text-primary)}
.loader-subtitle{font-size:13px;color:var(--text-tertiary);margin-bottom:24px}
.loader-progress{background:var(--bg-elevated);border-radius:2px;height:4px;overflow:hidden;margin-bottom:12px;position:relative}
.loader-progress-fill{height:100%;background:var(--accent-strong);width:0%;transition:width .3s;border-radius:2px;position:relative}
.loader-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:loader-shimmer 1.5s ease-in-out infinite;border-radius:2px}
@keyframes loader-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.loader-stats{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}
.loader-link{margin-top:14px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--accent-bg-strong);border-radius:var(--radius-sm);text-align:left}
.loader-link-label{font-size:11px;color:var(--accent);margin-bottom:6px;display:block;letter-spacing:.1px}
.loader-link-row{display:flex;align-items:center;gap:8px}
.loader-link-url{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;color:var(--text-primary);word-break:break-all;line-height:1.4;user-select:all}
.loader-link-copy{flex-shrink:0;background:var(--accent-bg);border:1px solid var(--accent-bg-strong);color:var(--accent);padding:5px 12px;border-radius:4px;cursor:pointer;font-size:11px;font-weight:500;font-family:var(--font-sans);transition:background .15s,color .15s,border-color .15s}
.loader-link-copy:hover{background:var(--accent-bg-strong);color:var(--accent-hover);border-color:var(--accent)}
.loader-link-copy:active{transform:translateY(1px)}
/* === DROP OVERLAY === */
.page-dropzone-active::before{content:'';position:fixed;inset:8px;background:rgba(138,180,248,.06);border:2px dashed var(--accent);border-radius:8px;z-index:999;pointer-events:none}
.page-dropzone-active::after{content:'Drop files anywhere';position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:500;color:var(--accent);z-index:999;pointer-events:none;letter-spacing:-.2px}
/* === MODAL === */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1001;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:24px;max-width:480px;width:100%;transform:scale(.95) translateY(8px);transition:transform .25s;box-shadow:0 8px 16px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3)}
.modal-overlay.active .modal{transform:scale(1) translateY(0)}
.modal-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.modal-icon{width:40px;height:40px;background:var(--success-bg);border:1px solid rgba(129,201,149,.3);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-icon svg{width:20px;height:20px;stroke:var(--success)}
.modal-title-group{flex:1;min-width:0}
.modal-title{font-size:18px;font-weight:500;margin-bottom:2px;letter-spacing:-.2px;color:var(--text-primary)}
.modal-subtitle{font-size:13px;color:var(--text-tertiary)}
.modal-close{width:32px;height:32px;background:transparent;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:background .15s,color .15s;flex-shrink:0}
.modal-close:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.modal-file-info{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:16px}
.modal-file-icon{width:36px;height:36px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-file-icon svg{width:18px;height:18px;stroke:var(--text-tertiary)}
.modal-file-name{font-weight:500;font-size:14px;margin-bottom:2px;word-break:break-all;color:var(--text-primary)}
.modal-file-size{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}
.modal-link-section{background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:14px;margin-bottom:16px}
.modal-link-label{font-size:12px;font-weight:500;text-transform:none;letter-spacing:.1px;color:var(--text-secondary);margin-bottom:8px;display:block}
.modal-link-input{width:100%;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;color:var(--text-primary);margin-bottom:10px}
.modal-link-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.modal-link-actions{display:flex;gap:8px;margin-bottom:12px}
.modal-link-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);padding-top:10px;border-top:1px solid var(--border-subtle);flex-wrap:wrap;gap:4px}
.modal-expiry-warning{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:500;color:#ff6b6b;background:rgba(234,67,53,.10);border:1px solid rgba(234,67,53,.32);border-radius:6px;padding:8px 10px}
.modal-expiry-warning svg{flex-shrink:0;stroke:#ff6b6b}
.modal-footer{display:flex;gap:8px;justify-content:flex-end}
.modal-footer .btn{min-width:88px}
.global-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--bg-elevated);z-index:1002;opacity:0;transition:opacity .2s}
.global-progress.active{opacity:1}
.global-progress-fill{height:100%;background:var(--accent-strong);width:0%;transition:width .3s}
/* === RESPONSIVE === */
@media(max-width:1024px){.main-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}.features-grid,.seo-grid{grid-template-columns:1fr 1fr;gap:12px}.comparison-section .container{overflow-x:auto}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:768px){.header-nav{display:none}.sidebar{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(3,1fr)}.features-grid,.seo-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:20px}.footer-bottom{flex-direction:column;text-align:center}.modal-link-actions,.modal-footer,.download-input-group{flex-direction:column}.trust-inner{gap:12px}.comparison-table{font-size:12px}.comparison-table th,.comparison-table td{padding:10px 12px}.section-title{font-size:24px}}
@media(max-width:480px){.stats-row{grid-template-columns:1fr}.sidebar-stats{grid-template-columns:1fr}.trust-inner{flex-direction:column;align-items:flex-start;gap:8px}.container{padding:0 16px}.card-body{padding:16px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-bg-strong);color:var(--text-primary)}
@property --lo-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.lockout-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow:hidden;background:radial-gradient(1200px 900px at 18% 28%,#13325a 0%,transparent 55%),radial-gradient(1000px 800px at 82% 72%,#2a1056 0%,transparent 58%),radial-gradient(900px 700px at 50% 100%,#093a5a 0%,transparent 62%),#050a18}
.lockout-overlay.active{display:flex}
.lockout-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 60%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:0}
.lockout-orb{position:absolute;filter:blur(48px);opacity:.62;pointer-events:none;mix-blend-mode:screen;will-change:transform}
.lockout-orb.o1{width:540px;height:540px;border-radius:54% 46% 62% 38% / 48% 60% 40% 52%;background:radial-gradient(circle at 28% 32%,#84bdff 0%,#5ba0ff 35%,transparent 72%);top:-140px;left:-110px;animation:lo-drift1 22s ease-in-out infinite,lo-spin1 18s linear infinite}
.lockout-orb.o2{width:480px;height:480px;border-radius:48% 52% 38% 62% / 58% 42% 58% 42%;background:radial-gradient(circle at 70% 35%,#c79bff 0%,#a06dff 35%,transparent 72%);bottom:-160px;right:-90px;animation:lo-drift2 26s ease-in-out infinite,lo-spin2 22s linear infinite}
.lockout-orb.o3{width:380px;height:380px;border-radius:42% 58% 56% 44% / 60% 40% 60% 40%;background:radial-gradient(circle at 35% 65%,#7ff4eb 0%,#3cdcd0 35%,transparent 74%);top:38%;right:8%;animation:lo-drift3 30s ease-in-out infinite,lo-spin3 26s linear infinite reverse}
.lockout-orb.o4{width:320px;height:320px;border-radius:60% 40% 50% 50% / 45% 55% 45% 55%;background:radial-gradient(circle at 65% 30%,#ff9dd2 0%,#ff6bb8 35%,transparent 74%);bottom:14%;left:14%;animation:lo-drift4 24s ease-in-out infinite,lo-spin4 20s linear infinite}
.lockout-orb.o5{width:240px;height:240px;border-radius:50% 50% 40% 60% / 55% 45% 55% 45%;background:radial-gradient(circle at 30% 70%,#ffe7a8 0%,#ffd479 35%,transparent 74%);top:8%;right:18%;animation:lo-drift5 28s ease-in-out infinite,lo-spin5 16s linear infinite reverse}
@keyframes lo-drift1{0%,100%{translate:0 0;scale:1}50%{translate:140px 90px;scale:1.18}}
@keyframes lo-drift2{0%,100%{translate:0 0;scale:1}50%{translate:-110px -70px;scale:1.12}}
@keyframes lo-drift3{0%,100%{translate:0 0;scale:1}50%{translate:-160px 110px;scale:1.22}}
@keyframes lo-drift4{0%,100%{translate:0 0;scale:1}50%{translate:90px -90px;scale:1.14}}
@keyframes lo-drift5{0%,100%{translate:0 0;scale:1}50%{translate:-60px 80px;scale:1.1}}
@keyframes lo-spin1{to{rotate:360deg}}
@keyframes lo-spin2{to{rotate:360deg}}
@keyframes lo-spin3{to{rotate:360deg}}
@keyframes lo-spin4{to{rotate:360deg}}
@keyframes lo-spin5{to{rotate:360deg}}
.lockout-card-outer{position:relative;z-index:2;max-width:620px;width:100%;border-radius:28px;padding:2px;background:conic-gradient(from var(--lo-angle),#5ba0ff,#a06dff,#3cdcd0,#ff6bb8,#ffd479,#5ba0ff);animation:lo-spin 7s linear infinite;box-shadow:0 30px 110px rgba(0,0,0,.6),0 0 80px rgba(91,160,255,.18)}
@keyframes lo-spin{to{--lo-angle:360deg}}
.lockout-card{position:relative;background:linear-gradient(180deg,rgba(15,24,48,.94) 0%,rgba(8,14,30,.96) 100%);border-radius:26px;padding:52px 44px 44px;text-align:center;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);overflow:hidden}
.lockout-card::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 200px at 50% 0%,rgba(91,160,255,.12) 0%,transparent 70%);pointer-events:none}
.lockout-icon{position:relative;width:92px;height:92px;margin:0 auto 30px;border-radius:50%;background:conic-gradient(from var(--lo-angle),#ffd479,#ff8945,#e74545,#ff6bb8,#a06dff,#5ba0ff,#ffd479);display:flex;align-items:center;justify-content:center;color:#fff;animation:lo-spin 5s linear infinite;box-shadow:0 0 80px rgba(255,140,80,.55),0 0 30px rgba(160,109,255,.4)}
.lockout-icon::after{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#ffd479 25%,#ff8945 60%,#c4361b 100%);box-shadow:inset 0 -10px 25px rgba(0,0,0,.35)}
.lockout-icon svg{position:relative;z-index:1;width:44px;height:44px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));animation:lo-icon-pulse 2.6s ease-in-out infinite}
@keyframes lo-icon-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.lockout-title{position:relative;font-size:32px;font-weight:700;letter-spacing:-.6px;margin:0 0 20px;background:linear-gradient(120deg,#fff 0%,#bcd5ff 25%,#a8baff 45%,#cdb8ff 65%,#bcd5ff 80%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:lo-shimmer 5s ease-in-out infinite}
@keyframes lo-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.lockout-message{position:relative;font-size:15.5px;line-height:1.7;color:#cdd6e8;white-space:pre-line;margin:0;text-align:left;background:rgba(255,255,255,.025);padding:20px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.lockout-message:empty{display:none}
.lockout-footer{position:relative;margin-top:26px;font-size:11px;color:#8a96b3;letter-spacing:2.4px;text-transform:uppercase;font-weight:500}
.lockout-footer::before,.lockout-footer::after{content:'';display:inline-block;width:24px;height:1px;background:linear-gradient(90deg,transparent,#5ba0ff,transparent);vertical-align:middle;margin:0 12px}
@media(max-width:520px){.lockout-card{padding:38px 24px 32px}.lockout-title{font-size:24px}.lockout-message{font-size:14px;padding:16px 18px}.lockout-icon{width:78px;height:78px}.lockout-icon svg{width:38px;height:38px}.lockout-orb{filter:blur(50px)}}
@media(prefers-reduced-motion:reduce){.lockout-orb,.lockout-card-outer,.lockout-icon,.lockout-icon svg,.lockout-title{animation:none}}
/* Dropzone responsive — keep the box readable on phones */
.dropzone{box-sizing:border-box;width:100%;max-width:100%}
.dropzone-text{word-wrap:break-word;overflow-wrap:anywhere}
@media(max-width:600px){
  .dropzone{padding:36px 18px}
  .dropzone-icon{width:44px;height:44px;margin-bottom:12px}
  .dropzone-icon img{width:28px;height:28px}
  .dropzone-title{font-size:15px;margin-bottom:6px}
  .dropzone-text{font-size:12.5px;line-height:1.6;margin-bottom:16px}
  .dropzone-expiry{font-size:11.5px}
}
@media(max-width:400px){
  .dropzone{padding:28px 14px}
  .dropzone-title{font-size:14px}
  .dropzone-text br:nth-of-type(2){display:none}
  .dropzone-text span{display:inline-block}
}
/* Download limit dropdown sitting in the upload card header */
.header-option{display:inline-flex;align-items:center;gap:10px}
.header-option .option-label{margin:0;font-size:12px;color:var(--text-tertiary);font-weight:500;letter-spacing:.2px;text-transform:uppercase}
.header-option .option-input{margin:0;background:linear-gradient(180deg,#27365d 0%,#1f2d4d 100%);color:var(--text-primary);border:1px solid rgba(138,180,248,.22);border-radius:6px;padding:6px 28px 6px 12px;font-size:13px;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ab4f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
.header-option .option-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.header-option .option-input:hover{border-color:var(--accent)}
@media(max-width:520px){.header-option{width:100%;justify-content:space-between}.header-option .option-label{font-size:11px}}
/* ─── Subtle blue-gradient polish ──────────────────────────────────── */
body{
  background:
    radial-gradient(circle, rgba(180,210,255,.22) 1px, transparent 1.6px),
    radial-gradient(1100px 620px at 16% -6%, rgba(120,150,220,.32) 0%, transparent 55%),
    radial-gradient(900px 520px at 92% 6%, rgba(150,115,210,.22) 0%, transparent 55%),
    radial-gradient(1200px 720px at 50% 112%, rgba(90,150,225,.22) 0%, transparent 60%),
    linear-gradient(180deg, #2c3d68 0%, #26365d 35%, #213152 65%, #1d2c4c 100%);
  background-size: 22px 22px, auto, auto, auto, auto;
  background-attachment: fixed;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(620px 340px at 78% 28%, rgba(138,180,248,.12), transparent 65%),
    radial-gradient(520px 300px at 22% 68%, rgba(170,125,255,.10), transparent 65%);
  mix-blend-mode:screen;
}
.header,main,.trust-bar,.footer,.modal,.card,.sidebar-card,.dropzone,.features-section,.seo-section,.comparison-section,.faq-section{position:relative;z-index:1}
.header{background:linear-gradient(180deg,rgba(40,55,93,.78) 0%,rgba(32,45,78,.68) 100%);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom-color:rgba(138,180,248,.14)}
.header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(138,180,248,.5),transparent);pointer-events:none}
.trust-bar{background:linear-gradient(180deg,rgba(50,68,112,.55) 0%,rgba(36,53,87,.0) 100%);border-bottom-color:rgba(138,180,248,.10)}
.card{background:linear-gradient(180deg,#324572 0%,#28396a 50%,#22335f 100%);border-color:rgba(138,180,248,.18);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 22px 50px -28px rgba(10,20,45,.6)}
.card:hover{border-color:rgba(138,180,248,.22)}
.card-header{background:linear-gradient(180deg,rgba(138,180,248,.06) 0%,transparent 100%);border-bottom-color:rgba(138,180,248,.10)}
.upload-card::before{height:2px;background:linear-gradient(90deg,#1a73e8 0%,#4285f4 35%,#8ab4f8 50%,#4285f4 65%,#1a73e8 100%);background-size:200% 100%;animation:upload-stripe 8s linear infinite}
@keyframes upload-stripe{0%{background-position:0 0}100%{background-position:200% 0}}
.dropzone{background:linear-gradient(180deg,rgba(138,180,248,.04) 0%,rgba(138,180,248,.01) 100%);border-color:rgba(138,180,248,.22)}
.dropzone:hover{background:linear-gradient(180deg,rgba(138,180,248,.10) 0%,rgba(138,180,248,.04) 100%);border-color:var(--accent)}
.dropzone.drag-active{background:linear-gradient(180deg,rgba(66,133,244,.18) 0%,rgba(66,133,244,.08) 100%);border-color:var(--accent-strong)}
.dropzone-icon{background:linear-gradient(135deg,rgba(138,180,248,.22) 0%,rgba(66,133,244,.12) 100%);box-shadow:inset 0 0 0 1px rgba(138,180,248,.18),0 4px 16px rgba(66,133,244,.18)}
.btn-primary{background:linear-gradient(180deg,#5b9dff 0%,#4285f4 60%,#1a73e8 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(8,18,40,.4)}
.btn-primary:hover{background:linear-gradient(180deg,#7ab2ff 0%,#5b9dff 60%,#2e7df1 100%);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 4px 16px rgba(66,133,244,.45)}
.btn-secondary{background:linear-gradient(180deg,rgba(36,53,87,.85) 0%,rgba(25,38,66,.75) 100%);border:1px solid rgba(138,180,248,.22)}
.btn-secondary:hover{background:linear-gradient(180deg,rgba(45,63,100,.9) 0%,rgba(36,53,87,.8) 100%);border-color:rgba(138,180,248,.36)}
.stats-row .stat-box,.stat-box{background:linear-gradient(180deg,rgba(60,82,135,.55) 0%,rgba(48,65,108,.35) 100%);border:1px solid rgba(138,180,248,.12)}
.sidebar-card{background:linear-gradient(180deg,#324572 0%,#28396a 100%);border:1px solid rgba(138,180,248,.16);box-shadow:0 16px 32px -22px rgba(10,20,45,.55)}
.sidebar-stat{background:linear-gradient(180deg,rgba(50,69,114,.5) 0%,rgba(36,52,90,.28) 100%);border:1px solid rgba(138,180,248,.10)}
.info-number{background:linear-gradient(135deg,rgba(138,180,248,.28) 0%,rgba(66,133,244,.16) 100%);border:1px solid rgba(138,180,248,.18);color:#bcd5ff}
.file-item{background:linear-gradient(180deg,rgba(50,69,114,.32) 0%,rgba(40,57,100,.14) 100%)}
.file-item:hover{background:linear-gradient(180deg,rgba(64,86,140,.48) 0%,rgba(50,69,114,.22) 100%)}
.progress-fill{background:linear-gradient(90deg,#4285f4 0%,#5b9dff 50%,#8ab4f8 100%);box-shadow:0 0 10px rgba(91,160,255,.45)}
.global-progress-fill{background:linear-gradient(90deg,#4285f4 0%,#5b9dff 50%,#8ab4f8 100%)}
.loader-progress-fill{background:linear-gradient(90deg,#4285f4 0%,#5b9dff 50%,#8ab4f8 100%);box-shadow:0 0 12px rgba(91,160,255,.5)}
.download-card{background:linear-gradient(180deg,rgba(60,82,135,.4) 0%,rgba(45,63,108,.2) 100%);border-color:rgba(138,180,248,.16)}
.download-card.early-link{background:linear-gradient(180deg,rgba(245,158,11,.10) 0%,rgba(245,158,11,.04) 100%) !important}
.modal{background:linear-gradient(180deg,#324572 0%,#28396a 60%,#22335f 100%);border:1px solid rgba(138,180,248,.22);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 80px rgba(66,133,244,.14)}
.modal-header{background:linear-gradient(180deg,rgba(138,180,248,.06) 0%,transparent 100%)}
.modal-icon{background:linear-gradient(135deg,rgba(95,187,122,.30) 0%,rgba(52,168,83,.18) 100%);border:1px solid rgba(95,187,122,.32);box-shadow:0 4px 14px rgba(52,168,83,.18)}
.features-section,.seo-section{background:linear-gradient(180deg,rgba(50,69,114,.0) 0%,rgba(60,82,135,.22) 50%,rgba(50,69,114,.0) 100%)}
.comparison-section{background:linear-gradient(180deg,rgba(36,53,93,.0) 0%,rgba(60,82,135,.28) 100%)}
.footer{background:linear-gradient(180deg,rgba(36,53,93,.85) 0%,rgba(20,30,55,.95) 100%);border-top-color:rgba(138,180,248,.14)}