/* ========================================================================
 * pages/security.css
 *
 * Styles specific to the security page.
 * Shared tokens, nav, footer, buttons, and animation primitives come from
 * static/css/public-shared.css (loaded before this file).
 * ======================================================================== */


html{scroll-behavior:smooth;scroll-padding-top:80px;}


/* HERO */
.hero{position:relative;padding:120px 24px 48px;overflow:hidden;}

.hero::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.08) 0%,rgba(13,148,136,.02) 45%,transparent 70%);pointer-events:none;}

.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(0,0,0,.014) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.014) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,black 0%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,black 0%,transparent 90%);}

[data-theme="dark"] .hero::after{background-image:linear-gradient(to right,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.018) 1px,transparent 1px);}

.hero-in{max-width:1120px;margin:0 auto;position:relative;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;}

.hero-left .breadcrumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t3);margin-bottom:18px;}

.hero-left .breadcrumb a{color:var(--t3);transition:color var(--fast);}

.hero-left .breadcrumb a:hover{color:var(--t1);}

.hero-left .breadcrumb svg{width:10px;height:10px;opacity:.5;}

.hero-left .breadcrumb .cur{color:var(--t1);font-weight:500;}

.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:var(--r-full);border:1px solid var(--bd);background:var(--surface);font-size:12px;font-weight:500;color:var(--t2);margin-bottom:22px;letter-spacing:.01em;}

.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 7px rgba(13,148,136,.5);animation:pdot 2.2s ease-in-out infinite;flex-shrink:0;}

@keyframes pdot{0%,100%{opacity:1;}50%{opacity:.25;}}

.hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.036em;line-height:1.06;margin-bottom:20px;text-wrap:pretty;}

.hero h1 .grad{background:linear-gradient(135deg,#0f766e 0%,var(--teal) 42%,#2dd4bf 72%,#10b981 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

.hero-sub{font-size:16.5px;color:var(--t2);max-width:540px;line-height:1.65;letter-spacing:-.008em;margin-bottom:30px;}

.hero-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

.hero-meta-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--bd);font-size:12px;color:var(--t2);}

.hero-meta-pill svg{width:12px;height:12px;color:var(--teal-text);}

.hero-meta-pill strong{color:var(--t1);font-weight:600;}


/* HERO DIAGRAM (stacked shield) */
.shield-stack{position:relative;width:100%;height:360px;display:flex;align-items:center;justify-content:center;}

.shield-disc{position:absolute;border-radius:50%;border:1px solid var(--bd);}

.shield-disc.d1{width:340px;height:340px;background:radial-gradient(circle at 50% 40%,var(--teal-10) 0%,transparent 60%);}

.shield-disc.d2{width:260px;height:260px;border:1px dashed var(--bd);animation:spin 60s linear infinite;}

.shield-disc.d3{width:180px;height:180px;background:var(--surface);box-shadow:0 12px 40px rgba(13,148,136,.15);}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.shield-core{position:absolute;width:90px;height:100px;display:flex;align-items:center;justify-content:center;color:#fff;}

.shield-core svg{width:90px;height:100px;filter:drop-shadow(0 6px 16px rgba(13,148,136,.4));}

.shield-sat{position:absolute;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--bd);box-shadow:var(--sh-md);display:flex;align-items:center;justify-content:center;color:var(--teal-text);}

.shield-sat svg{width:18px;height:18px;}

.shield-sat.s1{top:30px;left:50%;margin-left:-22px;}

.shield-sat.s2{top:50%;right:30px;margin-top:-22px;}

.shield-sat.s3{bottom:30px;left:50%;margin-left:-22px;}

.shield-sat.s4{top:50%;left:30px;margin-top:-22px;}

.shield-line{position:absolute;background:linear-gradient(90deg,transparent,var(--teal-20),transparent);height:1px;width:100px;opacity:.6;}


/* COMPLIANCE STRIP */
.comp-strip{max-width:1120px;margin:0 auto;padding:0 24px 48px;}

.comp-strip-inner{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-xl);padding:22px 28px;display:grid;grid-template-columns:1fr repeat(4,auto);gap:28px;align-items:center;box-shadow:var(--sh-sm);}

.comp-strip-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;line-height:1.4;}

.comp-strip-label strong{display:block;color:var(--t1);font-size:13px;letter-spacing:.02em;text-transform:none;margin-top:2px;}

.comp-badge{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-md);}

.comp-badge-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.comp-badge-ic svg{width:16px;height:16px;}

.comp-badge-body strong{display:block;font-size:12.5px;color:var(--t1);font-weight:600;letter-spacing:-.005em;}

.comp-badge-body span{font-size:10.5px;color:var(--t3);letter-spacing:.02em;}

.comp-badge.soc .comp-badge-ic{background:rgba(79,70,229,.1);color:var(--indigo);}

.comp-badge.gdpr .comp-badge-ic{background:rgba(5,150,105,.1);color:var(--emerald);}

.comp-badge.tcpa .comp-badge-ic{background:rgba(217,119,6,.1);color:var(--amber);}

.comp-badge.aes .comp-badge-ic{background:var(--teal-10);color:var(--teal-text);}


/* PILLARS */
.pillars-section{max-width:1120px;margin:0 auto;padding:24px 24px 56px;}

.sect-h{margin-bottom:26px;}

.sect-h .kick{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:var(--r-full);background:var(--teal-10);color:var(--teal-text);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;}

.sect-h .kick-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);}

.sect-h h2{font-size:28px;font-weight:700;letter-spacing:-.026em;line-height:1.15;margin-bottom:8px;max-width:640px;}

.sect-h p{font-size:15px;color:var(--t2);max-width:580px;line-height:1.6;}

.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

.pillar{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-xl);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast);}

.pillar:hover{border-color:var(--teal-20);transform:translateY(-2px);box-shadow:var(--sh-md);}

.pillar-ic{width:38px;height:38px;border-radius:var(--r-md);background:var(--teal-10);color:var(--teal-text);display:flex;align-items:center;justify-content:center;}

.pillar-ic svg{width:18px;height:18px;}

.pillar-t{font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-.012em;}

.pillar-d{font-size:13px;color:var(--t2);line-height:1.55;flex:1;}

.pillar-list{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:6px;padding-top:12px;border-top:1px solid var(--bd);}

.pillar-list li{font-size:11.5px;color:var(--t3);display:flex;align-items:center;gap:6px;font-family:var(--mono);letter-spacing:.01em;}

.pillar-list li::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--teal);flex-shrink:0;}


/* ARCHITECTURE LAYER */
.arch-section{background:linear-gradient(180deg,transparent 0%,var(--bg2) 40%,var(--bg2) 60%,transparent 100%);padding:72px 24px;}

.arch-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center;}

.arch-diagram{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-xl);padding:24px;position:relative;box-shadow:var(--sh-md);}

.arch-diagram-label{position:absolute;top:-10px;left:20px;background:var(--bg);padding:0 10px;font-size:10.5px;color:var(--t3);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);}

.layer{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-md);padding:12px;margin-bottom:10px;position:relative;}

.layer:last-child{margin-bottom:0;}

.layer-h{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-family:var(--mono);display:flex;align-items:center;justify-content:space-between;}

.layer-h .enc{display:inline-flex;align-items:center;gap:4px;color:var(--teal-text);font-size:9.5px;}

.layer-h .enc svg{width:9px;height:9px;}

.layer-body{display:grid;gap:6px;}

.layer-node{background:var(--surface);border:1px solid var(--bd);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--t2);display:flex;align-items:center;justify-content:space-between;transition:border-color var(--fast);}

.layer-node strong{color:var(--t1);font-weight:500;font-size:12px;}

.layer-node .pill-sm{font-size:9.5px;padding:2px 6px;border-radius:var(--r-full);background:var(--teal-10);color:var(--teal-text);font-weight:600;letter-spacing:.02em;font-family:var(--mono);}

.layer-2col{grid-template-columns:1fr 1fr;}

.arch-text h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px;line-height:1.2;}

.arch-text p{color:var(--t2);line-height:1.65;margin-bottom:14px;font-size:14.5px;}

.arch-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px;}

.arch-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--t2);line-height:1.55;}

.arch-bullets li svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--teal-text);}

.arch-bullets li strong{color:var(--t1);font-weight:600;}


/* DATA CLASS TABLE */
.data-section{max-width:1120px;margin:0 auto;padding:56px 24px;}

.data-table{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);}

.data-table table{width:100%;border-collapse:collapse;font-size:13.5px;}

.data-table thead tr{background:var(--bg2);}

.data-table th{text-align:left;padding:12px 18px;font-size:10.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--bd);font-family:var(--mono);}

.data-table td{padding:14px 18px;color:var(--t2);border-bottom:1px solid var(--bd);vertical-align:top;line-height:1.55;}

.data-table tr:last-child td{border-bottom:none;}

.class-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-full);letter-spacing:.02em;}

.class-pill.confidential{background:rgba(190,18,60,.1);color:var(--rose);}

.class-pill.private{background:rgba(217,119,6,.1);color:var(--amber);}

.class-pill.internal{background:rgba(79,70,229,.1);color:var(--indigo);}

.class-pill.public{background:rgba(5,150,105,.1);color:var(--emerald);}


/* DISCLOSURE CTA */
.disclosure-section{max-width:1120px;margin:0 auto;padding:0 24px 64px;}

.disclosure{background:linear-gradient(135deg,var(--teal-d) 0%,var(--teal) 100%);color:#fff;border-radius:var(--r-2xl);padding:40px 44px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden;}

.disclosure::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at top right,black,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at top right,black,transparent 70%);}

.disclosure-l{position:relative;}

.disclosure-l .kick-w{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:var(--r-full);background:rgba(255,255,255,.15);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;}

.disclosure-l h3{font-size:26px;font-weight:700;letter-spacing:-.022em;line-height:1.2;margin-bottom:10px;}

.disclosure-l p{font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.6;max-width:540px;}

.disclosure-r{display:flex;flex-direction:column;gap:10px;position:relative;}

.btn-w{background:#fff;color:var(--teal-d);padding:10px 22px;font-size:14px;font-weight:600;border-radius:var(--r-md);border:none;display:inline-flex;align-items:center;gap:8px;transition:transform var(--fast),box-shadow var(--fast);cursor:pointer;}

.btn-w:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.2);}

.btn-w svg{width:13px;height:13px;}

.disclosure-sla{font-size:12px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px;}

.disclosure-sla svg{width:12px;height:12px;}


/* DETAIL SECTION */
.detail-main{max-width:1280px;margin:0 auto;padding:8px 24px 56px;display:grid;grid-template-columns:252px 1fr 210px;gap:32px;align-items:start;}


.sidebar{position:sticky;top:80px;}

.side-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;}

.side-card-h{padding:13px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;}

.side-card-h svg{width:13px;height:13px;color:var(--teal-text);}

.side-card-h-t{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;}

.side-card-b{padding:8px;}

.side-sect{margin-bottom:4px;}

.side-sect-t{display:flex;align-items:center;gap:7px;padding:8px 10px 6px;font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}

.side-sect-t svg{width:11px;height:11px;opacity:.6;}

.side-link{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;margin:1px 0;font-size:13px;font-weight:500;color:var(--t2);border-radius:6px;transition:background var(--fast),color var(--fast);cursor:pointer;}

.side-link:hover{background:var(--surface-h);color:var(--t1);}

.side-link.cur{background:var(--teal-10);color:var(--teal-text);font-weight:600;}

.side-footer{padding:12px 10px 6px;margin-top:4px;border-top:1px solid var(--bd);}

.side-link-sm{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;color:var(--t3);border-radius:6px;transition:color var(--fast),background var(--fast);}

.side-link-sm:hover{color:var(--t1);background:var(--surface-h);}

.side-link-sm svg{width:13px;height:13px;opacity:.7;}


.version-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px;margin-top:12px;}

.version-card .vt{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}

.version-card .vd{font-family:var(--mono);font-size:12.5px;color:var(--t1);margin-bottom:2px;}

.version-card .vm{font-size:11.5px;color:var(--t3);}


/* PROSE (reused) */
.prose{max-width:720px;}

.prose-heading{display:flex;align-items:center;gap:11px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--bd);}

.prose-heading h2{font-size:20px;font-weight:700;letter-spacing:-.02em;}

.prose-heading .ph-num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--teal-text);background:var(--teal-10);padding:3px 9px;border-radius:var(--r-full);letter-spacing:.02em;}

.prose h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:52px 0 14px;padding-top:28px;border-top:1px solid var(--bd);display:flex;align-items:baseline;gap:14px;scroll-margin-top:80px;}

.prose h2:first-of-type{margin-top:0;padding-top:0;border-top:none;}

.prose h2 .num{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--teal-text);letter-spacing:.02em;flex-shrink:0;min-width:36px;}

.prose h3{font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--t1);margin:26px 0 10px;}

.prose p{color:var(--t2);margin-bottom:14px;line-height:1.7;}

.prose strong{color:var(--t1);font-weight:600;}

.prose a{color:var(--teal-text);font-weight:500;}

.prose a:hover{text-decoration:underline;}

.prose ul{list-style:none;padding-left:0;margin:12px 0 16px;color:var(--t2);}

.prose ul li{position:relative;padding-left:22px;margin-bottom:7px;line-height:1.65;font-size:14px;}

.prose ul li::before{content:'';position:absolute;left:6px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--teal);}

.prose code{font-family:var(--mono);font-size:12.5px;background:var(--bg2);color:var(--t1);padding:1px 6px;border-radius:4px;border:1px solid var(--bd);}


/* IR steps */
.ir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0;}

.ir-step{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:6px;}

.ir-num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--teal-text);}

.ir-t{font-size:13px;font-weight:600;color:var(--t1);}

.ir-d{font-size:12px;color:var(--t2);line-height:1.5;}


/* TOC */
.toc{position:sticky;top:80px;}

.toc-h{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;padding:6px 10px 10px;border-bottom:1px solid var(--bd);margin-bottom:10px;}

.toc-list{list-style:none;display:flex;flex-direction:column;gap:1px;}

.toc-list li a{display:block;padding:5px 10px;font-size:12.5px;color:var(--t3);border-left:2px solid transparent;transition:all var(--fast);line-height:1.45;border-radius:0 4px 4px 0;}

.toc-list li a:hover{color:var(--t1);border-left-color:var(--bd-h);}

.toc-list li a.active{color:var(--teal-text);border-left-color:var(--teal-text);font-weight:600;background:var(--teal-10);}


/* RESP */
@media(max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:24px;}
  .shield-stack{height:300px;max-width:400px;margin:0 auto;}
  .arch-in{grid-template-columns:1fr;gap:32px;}
  .detail-main{grid-template-columns:240px 1fr;}
  .toc{display:none;}
  .pillar-grid{grid-template-columns:repeat(2,1fr);}
  .comp-strip-inner{grid-template-columns:1fr 1fr;gap:16px;}
  .comp-strip-label{grid-column:span 2;}
  .disclosure{grid-template-columns:1fr;gap:20px;}
}

@media(max-width:900px){
  .nav-link:not(.cur){display:none;}
  .nav-links .btn-p{padding:6px 12px;font-size:12px;}
  .detail-main{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .ir-grid{grid-template-columns:1fr;}
}

@media(max-width:640px){
  .nav-link{display:none;}.nav-ham{display:inline-flex;}
  .hero{padding:100px 20px 36px;}
  .pillar-grid{grid-template-columns:1fr;}
  .comp-strip-inner{grid-template-columns:1fr;}
  .comp-strip-label{grid-column:span 1;}
  .sect-h h2{font-size:22px;}
  .disclosure{padding:28px 24px;}
  .disclosure-l h3{font-size:20px;}
  .footer-in{justify-content:center;text-align:center;flex-direction:column;}
}