/* ========================================================================== PASS! — Proactive Agentic Security Scan · Demo funnel styles Design tokens mirror the Claude Design source. Keep this file as the single source of truth for colours/typography so any later stack inherits them. ========================================================================== */ :root { /* Colours */ --cs-navy: #002C6B; --cs-navy-dark: #001A40; --cs-navy-light: #003D8F; --cs-cyan: #00CDFF; --cs-amber: #FFBB00; --cs-surface: #F5F7FA; --cs-border: #E5E8EE; --cs-line: #D9DEE7; --cs-body: #1D1D1D; --cs-muted: #6B7280; --cs-success: #7BB73A; --cs-warning: #FF6831; --cs-alert: #D9246A; /* Typography */ --font-sans: 'Poppins', Arial, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Radius */ --radius-sharp: 2px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Shadows */ --shadow-card: 0 12px 32px rgba(0,26,64,.28); --shadow-light: 0 10px 28px rgba(0,26,64,.14); --shadow-xs: 0 1px 2px rgba(0,26,64,.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--cs-body); background: #fff; -webkit-font-smoothing: antialiased; } input, select, button { font-family: var(--font-sans); } input:focus, select:focus { outline: none; border-color: var(--cs-cyan) !important; box-shadow: 0 0 0 3px rgba(0,205,255,.35); } ::placeholder { color: #9aa3b2; } a { color: inherit; } /* View toggling: JS sets [data-view] on ----------------------------- */ .view { display: none; } body[data-view="gate"] #gate-view { display: block; } body[data-view="demo"] #demo-view { display: block; } /* Shared inner container width ------------------------------------------- */ .wrap { max-width: 1180px; margin: 0 auto; } /* Animations -------------------------------------------------------------- */ @keyframes chipBlink { 0%,100% { opacity: .55; } 50% { opacity: 1; } } /* ========================================================================== NAV (shared look) ========================================================================== */ .nav-brand { display: flex; align-items: center; gap: 16px; } .nav-brand img { height: 28px; } .nav-divider { width: 1px; height: 24px; background: var(--cs-border); } .nav-product { font-size: 16px; font-weight: 700; color: var(--cs-navy); letter-spacing: -.02em; } .nav-product span { font-weight: 400; margin-left: 8px; color: var(--cs-muted); } /* ========================================================================== GATE VIEW ========================================================================== */ .gate-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 48px; background: #fff; border-bottom: 1px solid var(--cs-border); } .gate-nav a { font-size: 13px; color: var(--cs-muted); text-decoration: none; font-weight: 500; } .gate-hero { background: linear-gradient(135deg, var(--cs-navy) 0%, var(--cs-navy-dark) 100%); color: #fff; min-height: calc(100vh - 61px); padding: 60px 48px; } .gate-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } .pill-cyan { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(0,205,255,.4); border-radius: var(--radius-pill); padding: 5px 14px; font-size: 22px; color: var(--cs-cyan); font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .pill-cyan .dot { width: 6px; height: 6px; background: var(--cs-cyan); border-radius: 50%; } .pill-cyan.pill-lg { font-size: 25px; } .gate-h1 { font-size: 46px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 24px 0 0; } .gate-lede { margin: 22px 0 0; font-size: 18px; color: rgba(255,255,255,.82); max-width: 540px; line-height: 1.6; } .perks { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; } .perk { display: flex; align-items: flex-start; gap: 14px; } .perk-check { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,205,255,.15); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; } .perk-title { font-size: 15px; font-weight: 600; color: #fff; } .perk-body { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; margin-top: 2px; } .gate-stats { margin-top: 38px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex; gap: 36px; } .gate-stats .num { font-size: 24px; font-weight: 700; color: var(--cs-amber); } .gate-stats .label { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; } /* Form card */ .form-card { background: #fff; border-radius: var(--radius-sharp); box-shadow: var(--shadow-card); padding: 32px 32px 28px; color: var(--cs-body); } .form-title { font-size: 20px; font-weight: 700; color: var(--cs-navy); letter-spacing: -.01em; } .form-sub { font-size: 14px; color: var(--cs-muted); margin-top: 6px; } .form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .form label { display: block; font-size: 13px; font-weight: 600; color: var(--cs-body); margin-bottom: 6px; } .form input, .form select { width: 100%; padding: 12px 14px; border: 1px solid #D1D6DF; border-radius: var(--radius-md); font-size: 15px; color: var(--cs-body); background: #fff; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field-err { font-size: 12px; color: var(--cs-alert); margin-top: 5px; } .btn-submit { margin-top: 6px; width: 100%; background: var(--cs-navy); color: #fff; border: 0; border-radius: var(--radius-md); padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; } .btn-submit:hover { background: var(--cs-navy-light); } .form-disclaimer { font-size: 12px; color: #9aa3b2; text-align: center; line-height: 1.5; } .form-pdpa { margin-top: 10px; font-size: 11px; color: #9aa3b2; text-align: center; line-height: 1.5; } .form-pdpa a { color: var(--cs-muted); text-decoration: underline; } /* Honeypot: off-screen, not shown to humans, skipped by tab/AT. Bots still fill it. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== DEMO VIEW — shared ========================================================================== */ .access-banner { background: var(--cs-navy-dark); color: #fff; padding: 9px 48px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; letter-spacing: .01em; } .access-banner .check { width: 18px; height: 18px; border-radius: 50%; background: var(--cs-success); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .access-banner .msg { color: rgba(255,255,255,.92); } .access-banner .greeting { color: var(--cs-cyan); font-weight: 500; } .demo-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 15px 48px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cs-border); } .preview-pill { font-size: 11px; font-weight: 600; color: var(--cs-navy); background: var(--cs-amber); padding: 2px 8px; border-radius: var(--radius-pill); letter-spacing: .02em; } .btn-book { background: var(--cs-navy); color: #fff; border: 0; border-radius: var(--radius-md); padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; } .btn-book:hover { background: var(--cs-navy-light); } /* Hero */ .demo-hero { background: linear-gradient(180deg, var(--cs-navy) 0%, var(--cs-navy-dark) 100%); color: #fff; padding: 72px 48px 64px; } .demo-h1 { font-size: 52px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 22px 0 0; max-width: 880px; } .demo-h1 .accent { color: var(--cs-cyan); } .demo-lede { margin: 22px 0 0; font-size: 19px; color: rgba(255,255,255,.82); max-width: 680px; line-height: 1.55; } .cta-row { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; } .btn-amber { background: var(--cs-amber); color: var(--cs-body); border: 0; border-radius: var(--radius-md); padding: 13px 24px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; } .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--radius-md); padding: 13px 24px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } /* Section scaffolding */ .section { padding: 80px 48px; } .section-surface { background: var(--cs-surface); border-top: 1px solid var(--cs-border); } .eyebrow { font-size: 12px; color: var(--cs-muted); font-weight: 700; letter-spacing: .12em; } .eyebrow.cyan { color: var(--cs-cyan); } .h2 { font-size: 34px; font-weight: 700; color: var(--cs-navy); letter-spacing: -.02em; margin: 8px 0 28px; max-width: 760px; } .section-lede { font-size: 17px; color: var(--cs-body); line-height: 1.6; max-width: 720px; margin: 0 0 44px; } /* ========================================================================== THREAT section (animated attack scene) ========================================================================== */ .threat { position: relative; background: #fff; padding: 66px 48px 54px; overflow: hidden; border-top: 1px solid var(--cs-border); } .threat-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 52px; align-items: center; } .threat-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(217,36,106,.35); background: rgba(217,36,106,.08); border-radius: 3px; padding: 5px 13px 5px 11px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--cs-alert); margin-bottom: 22px; white-space: nowrap; } .threat-pill .bang { font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: 1; color: var(--cs-alert); } .threat-h2 { font-size: 44px; font-weight: 700; line-height: 1.07; letter-spacing: -.025em; margin: 0; color: var(--cs-navy); } .threat-lede { margin: 20px 0 0; font-size: 18px; color: var(--cs-body); line-height: 1.6; max-width: 500px; } .threat-points { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; } .threat-point { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #4B5563; line-height: 1.5; } .threat-point .pt-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px; } .attack-scene { position: relative; height: 452px; min-width: 0; } .origin-chips { position: absolute; left: 0; top: 0; bottom: 0; width: 158px; z-index: 1; pointer-events: none; display: flex; flex-direction: column; justify-content: space-around; } .chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #fff; border: 1px solid var(--cs-line); border-radius: 6px; padding: 6px 11px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--cs-navy); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,26,64,.08); animation: chipBlink 2.8s ease-in-out infinite; } .chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .target-browser { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 60%; z-index: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 48px rgba(0,26,64,.28); border: 1px solid var(--cs-line); } .tb-chrome { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: #0d1526; border-bottom: 1px solid rgba(255,255,255,.08); } .tb-dots { display: flex; gap: 6px; } .tb-dots span { width: 9px; height: 9px; border-radius: 50%; } .tb-addr { flex: 1; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.07); border-radius: 5px; padding: 5px 10px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.7); } .tb-body { position: relative; background: #fff; padding: 34px 30px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 250px; } .tb-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--cs-navy); display: flex; align-items: center; justify-content: center; } .tb-title { font-size: 16px; font-weight: 600; color: var(--cs-body); } .tb-form { width: 100%; max-width: 250px; display: flex; flex-direction: column; gap: 11px; margin-top: 4px; } .tb-input { height: 38px; border: 1px solid #E1E5EC; border-radius: 7px; background: #F7F9FC; display: flex; align-items: center; padding: 0 12px; } .tb-input span { display: block; height: 7px; border-radius: 4px; background: #D7DCE5; } .tb-btn { height: 38px; border-radius: 7px; background: var(--cs-navy); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; } .tb-forgot { text-align: center; font-size: 11.5px; color: #98A1B0; margin-top: 2px; } #threat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* ========================================================================== COVERAGE GAP (cadence comparison chart) ========================================================================== */ .gap-section { background: var(--cs-surface); padding: 72px 48px; border-bottom: 1px solid var(--cs-border); } .gap-card { background: #fff; border: 1px solid var(--cs-border); border-radius: var(--radius-md); box-shadow: 0 8px 26px rgba(0,26,64,.08); padding: 34px 36px 26px; } .gap-grid { display: grid; grid-template-columns: 236px 1fr; column-gap: 30px; row-gap: 26px; align-items: center; } .gap-label-title { font-size: 15px; font-weight: 600; color: var(--cs-body); } .gap-label-title.accent { color: var(--cs-navy); } .gap-label-sub { font-size: 12px; color: var(--cs-muted); font-family: var(--font-mono); margin-top: 3px; } .gap-label-sub.accent { color: #0d6fa3; } .gap-track { position: relative; height: 34px; display: flex; align-items: center; } .gap-line { position: absolute; left: 0; right: 0; height: 2px; background: #E9ECF2; } .gap-row { position: relative; display: flex; width: 100%; justify-content: space-between; } .gap-tick { width: 0; display: flex; justify-content: center; } .gap-dot-feature { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--cs-navy); } .gap-dot-pen { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: var(--cs-amber); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cs-amber); } .gap-bar-wrap { position: relative; height: 22px; width: calc(100% + 24px); margin: 0 -12px; border-radius: 11px; background: linear-gradient(90deg, var(--cs-navy), var(--cs-navy-light)); } .gap-bar-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; } .gap-bar-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-cyan); box-shadow: 0 0 6px rgba(0,205,255,.8); } .gap-axis { display: flex; width: 100%; justify-content: space-between; margin-top: 2px; } .gap-axis .gap-tick span { font-size: 11px; color: #98A1B0; font-family: var(--font-mono); } /* ========================================================================== STATS band ========================================================================== */ .stats-band { background: var(--cs-navy); color: #fff; padding: 64px 48px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .stat-item { border-left: 2px solid var(--cs-cyan); padding-left: 20px; } .stat-item .n { font-size: 54px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--cs-amber); } .stat-item .t { font-size: 15px; color: rgba(255,255,255,.88); margin-top: 12px; line-height: 1.5; max-width: 300px; } .stat-item .src { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 10px; font-family: var(--font-mono); } /* ========================================================================== WALKTHROUGH ========================================================================== */ .watch { background: var(--cs-surface); padding: 72px 48px; border-bottom: 1px solid var(--cs-border); } .watch-grid { display: grid; grid-template-columns: 1.62fr 1fr; background: #fff; border: 1px solid var(--cs-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 26px rgba(0,26,64,.08); } .player { position: relative; min-width: 0; aspect-ratio: 1778/1080; background: var(--cs-navy-dark); } .player video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: var(--cs-navy-dark); } .steps-panel { border-left: 1px solid var(--cs-border); padding: 30px 24px; display: flex; flex-direction: column; } .steps-panel .head { font-size: 12px; color: var(--cs-muted); font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; } .steps { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .step { display: flex; gap: 12px; align-items: flex-start; } .step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--cs-navy); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .step .t { font-size: 13.5px; font-weight: 600; color: var(--cs-body); line-height: 1.3; } .step .b { font-size: 12px; color: var(--cs-muted); line-height: 1.3; margin-top: 2px; } /* ========================================================================== HOW IT WORKS (dark, blueprint) ========================================================================== */ .how { position: relative; overflow: hidden; padding: 80px 48px; background: radial-gradient(120% 130% at 12% 0%, #01285f 0%, var(--cs-navy-dark) 55%, #000D22 100%); } .how .blueprint { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,205,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,205,255,.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 55%, transparent 92%); mask-image: radial-gradient(circle at 50% 26%, #000 55%, transparent 92%); } .how .wrap { position: relative; } .how .eyebrow { color: var(--cs-cyan); } .how .h2 { color: #fff; } .how .section-lede { color: rgba(255,255,255,.78); } .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; } .flow-step { position: relative; padding: 0 22px 0 0; } .flow-step:last-child { padding: 0; } .flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .flow-num { width: 34px; height: 34px; border-radius: 50%; background: var(--cs-cyan); color: #00203F; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .flow-num.amber { background: var(--cs-amber); color: var(--cs-body); } .flow-line { height: 2px; flex: 1; background: repeating-linear-gradient(90deg, var(--cs-cyan) 0 6px, transparent 6px 12px); } .flow-icon { color: var(--cs-cyan); margin-bottom: 10px; } .flow-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 6px; } .flow-body { font-size: 14px; color: rgba(255,255,255,.62); line-height: 1.55; margin: 0; } .agent-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .agent-tag { font-size: 11px; font-weight: 600; color: var(--cs-navy); background: #fff; border: 1px solid #fff; padding: 4px 9px; border-radius: var(--radius-pill); font-family: var(--font-mono); } /* ========================================================================== SAMPLE REPORT ========================================================================== */ .report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 8px 0 22px; } .report-head .h2 { margin: 0; max-width: 620px; } .report-frame { border: 1px solid #D1D6DF; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-light); } .report-chrome { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--cs-navy-dark); border-bottom: 1px solid var(--cs-navy-dark); } .report-dots { display: flex; gap: 7px; } .report-dots span { width: 11px; height: 11px; border-radius: 50%; } .report-addr { flex: 1; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: var(--radius-md); padding: 6px 12px; font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,.85); } .report-open { font-size: 12px; font-weight: 600; color: var(--cs-cyan); text-decoration: none; white-space: nowrap; } .report-frame iframe { display: block; width: 100%; height: 520px; border: 0; background: #dedede; } .report-note { margin-top: 14px; font-size: 13px; color: var(--cs-muted); } /* ========================================================================== OWASP coverage matrix (square, engineered) ========================================================================== */ .legend { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-dot { width: 9px; height: 9px; flex: 0 0 auto; } /* square */ .legend-label { font-size: 13px; font-weight: 600; color: var(--cs-body); } .owasp-matrix { border: 1px solid var(--cs-line); border-bottom: 0; border-right: 0; display: grid; grid-template-columns: 1fr 1fr; background: #fff; } .owasp-cell { display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); padding: 15px 20px; } .owasp-cell .id { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--cs-muted); flex: 0 0 auto; width: 30px; } .owasp-cell .name { font-size: 15px; font-weight: 600; color: var(--cs-body); flex: 1; line-height: 1.3; } .owasp-cell .status { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .owasp-cell .status .sdot { width: 9px; height: 9px; flex: 0 0 auto; } /* square */ .owasp-cell .status .slabel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; } /* ========================================================================== BOOK a call ========================================================================== */ .book { background: var(--cs-surface); padding: 84px 48px; } .book-inner { max-width: 900px; margin: 0 auto; text-align: center; } .book-pill { display: inline-flex; align-items: center; gap: 8px; background: #FFF6D6; border: 1px solid #FFE49B; color: var(--cs-navy); border-radius: var(--radius-sharp); padding: 6px 14px; font-size: 13px; font-weight: 600; margin-bottom: 20px; } .book-pill .dot { width: 7px; height: 7px; background: var(--cs-amber); } /* square */ .book h2 { font-size: 38px; font-weight: 700; color: var(--cs-navy); letter-spacing: -.02em; margin: 0 0 16px; } .book p { font-size: 18px; color: var(--cs-body); line-height: 1.6; margin: 0 auto 32px; max-width: 620px; } .book-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn-lg-primary { background: var(--cs-navy); color: #fff; border: 0; border-radius: var(--radius-md); padding: 15px 30px; font-size: 16px; font-weight: 600; text-decoration: none; } .btn-lg-primary:hover { background: var(--cs-navy-light); } .btn-lg-outline { background: #fff; color: var(--cs-navy); border: 1.5px solid var(--cs-navy); border-radius: var(--radius-md); padding: 15px 30px; font-size: 16px; font-weight: 600; text-decoration: none; } .btn-lg-outline:hover { background: var(--cs-surface); } /* ========================================================================== FOOTER ========================================================================== */ .footer { padding: 40px 48px; background: var(--cs-navy-dark); color: rgba(255,255,255,.6); font-size: 13px; } .footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer img { height: 26px; } /* ========================================================================== FAINT CORNER RELOCK BUTTON (demo/reviewer only — hidden-ish) ========================================================================== */ .relock-corner { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,26,64,.55); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-md); padding: 5px 9px; font-size: 11px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; opacity: .14; transition: opacity .18s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .relock-corner:hover, .relock-corner:focus-visible { opacity: 1; outline: none; } .relock-corner svg { width: 12px; height: 12px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .gate-grid, .threat-grid { grid-template-columns: 1fr; gap: 36px; } .watch-grid { grid-template-columns: 1fr; } .steps-panel { border-left: 0; border-top: 1px solid var(--cs-border); } .gap-grid { grid-template-columns: 1fr; row-gap: 14px; } .gap-track { margin-bottom: 4px; } .flow { grid-template-columns: 1fr 1fr; gap: 28px 0; } .stats-grid, .owasp-matrix { grid-template-columns: 1fr; } .gate-h1 { font-size: 36px; } .demo-h1 { font-size: 38px; } .threat-h2 { font-size: 32px; } .h2, .book h2 { font-size: 28px; } .attack-scene { height: 400px; } .gate-hero, .demo-hero, .section, .watch, .how, .threat, .stats-band, .book, .gate-nav, .demo-nav, .access-banner, .footer { padding-left: 20px; padding-right: 20px; } } @media (max-width: 560px) { .flow, .form-row { grid-template-columns: 1fr; } .pill-cyan { font-size: 15px; white-space: normal; } .target-browser { width: 72%; } .origin-chips { width: 130px; } }