/* ============================================================ CRUCiBLE SECURiTY.com — single-file marketing homepage Metallurgy-themed security platform. Live CSS-animated demos only. ============================================================ */ :root{ --bg-0:#05070f; --bg-1:#060310; --bg-2:#0a0d1c; --panel:#0d1125; --edge:#1a1f3a; --cyan:#00d4ff; --cyan-soft:#6df2ff; --amber:#ffb347; --gold:#ffe28a; --red:#ff4d4d; --purple:#7b3dff; --purple-soft:#c4a7ff; --green:#00d66f; --ink:#e8ecff; --dim:#8890b5; --faint:#4a5080; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{background:var(--bg-0);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";font-size:16px;line-height:1.55} body{ /* Default cursor is the green crucible security-eye — see html.eye-* overrides below */ cursor:url('cursors/eye-green.svg') 16 16, auto; min-height:100vh; overflow-x:hidden; background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(123,61,255,0.18), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 40%, rgba(0,212,255,0.10), transparent 60%), radial-gradient(ellipse 70% 50% at 0% 80%, rgba(255,179,71,0.08), transparent 60%), var(--bg-0); } /* Eye-color overrides (applied at the level so early-paint is right) */ html.eye-green body{cursor:url('cursors/eye-green.svg') 16 16, auto} html.eye-cyan body{cursor:url('cursors/eye-cyan.svg') 16 16, auto} html.eye-purple body{cursor:url('cursors/eye-purple.svg') 16 16, auto} html.eye-amber body{cursor:url('cursors/eye-amber.svg') 16 16, auto} html.eye-red body{cursor:url('cursors/eye-red.svg') 16 16, auto} html.cursor-off body{cursor:auto !important} a{color:var(--cyan-soft);text-decoration:none} a:hover{color:var(--gold)} button{font:inherit;color:inherit;background:none;border:none;cursor:inherit} /* -- Scanline overlay -- */ body::before{ content:""; position:fixed;inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px); pointer-events:none;z-index:100;mix-blend-mode:overlay; } /* ========= NAV ========= */ nav{ position:sticky;top:0;z-index:50; backdrop-filter:blur(18px) saturate(140%); background:rgba(5,7,15,0.72); border-bottom:1px solid var(--edge); } .nav-inner{ max-width:1180px;margin:0 auto; display:flex;align-items:center;gap:1.5rem; padding:12px 28px; } .brand{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.2px;font-size:2rem;white-space:nowrap} .brand img{width:96px;height:96px;filter:drop-shadow(0 0 14px rgba(0,214,111,0.6))} .brand .tld{color:var(--cyan);font-weight:400} .nav-links{display:flex;gap:1.4rem;margin-left:auto;align-items:center} .nav-links a{color:var(--dim);font-size:.9rem;font-weight:500;transition:color .2s} .nav-links a:hover{color:var(--ink)} @media(max-width:760px){ .nav-inner{padding:10px 18px;gap:1rem;flex-wrap:wrap} .nav-links{gap:.9rem;font-size:.82rem} .nav-links a{font-size:.82rem} .brand{font-size:1.4rem} .brand img{width:64px;height:64px} } .nav-cta{ padding:9px 18px;border-radius:999px; background:linear-gradient(135deg, var(--cyan) 0%, var(--green) 100%); color:#001014 !important;font-weight:700;font-size:.9rem; box-shadow:0 6px 22px -6px var(--cyan); transition:transform .15s, box-shadow .2s; } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px -6px var(--cyan);color:#001014 !important} /* Active-page indicator on nav links — set aria-current="page" on the link for the page you're on */ .nav-links a[aria-current="page"]{color:var(--cyan);position:relative} .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:2px} .cursor-btn{ font-size:.8rem;color:var(--faint);padding:4px 10px;border-radius:999px; border:1px solid var(--edge);transition:border-color .2s,color .2s; cursor:pointer; } .cursor-btn:hover{color:var(--cyan);border-color:var(--cyan)} /* Cursor preference dropdown (crucible security-eye picker) */ .cursor-wrap{position:relative;display:inline-block} .cursor-menu{ position:absolute;top:calc(100% + 8px);right:0; min-width:180px;background:rgba(8,10,20,0.96); border:1px solid var(--edge);border-radius:12px; padding:8px;z-index:200; display:none; box-shadow:0 20px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,214,111,0.08); backdrop-filter:blur(14px); } .cursor-menu.open{display:block} .cursor-menu-title{ font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; color:var(--faint);padding:4px 8px 6px; } .cursor-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px 6px 8px} .cursor-swatch{ width:28px;height:28px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#fff 0 10%,var(--swatch,#00d66f) 35%,#000 70%,#000 100%); border:2px solid transparent;cursor:pointer; transition:transform .15s,border-color .2s;position:relative; } .cursor-swatch::after{ content:'';position:absolute;inset:35%;border-radius:50%; background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,0.25) inset; } .cursor-swatch:hover{transform:scale(1.12)} .cursor-swatch.sel{border-color:#fff;transform:scale(1.05)} .cursor-off-row{ display:flex;align-items:center;gap:10px; padding:8px 10px;margin-top:4px;border-top:1px solid var(--edge); border-radius:0 0 8px 8px;cursor:pointer;font-size:.78rem;color:var(--dim); transition:background .2s,color .2s; } .cursor-off-row:hover{background:rgba(255,255,255,0.03);color:var(--ink)} .cursor-off-row.sel{color:var(--ink);background:rgba(255,77,77,0.06)} .cursor-off-row input{accent-color:var(--cyan);margin:0} /* ========= HERO ========= */ .hero{ position:relative; max-width:1180px;margin:0 auto;padding:56px 28px 88px; display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center; } @media(max-width:880px){ .hero{grid-template-columns:1fr;gap:30px;padding:40px 22px 64px} .hero-art{max-width:380px} } .hero-tag{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;letter-spacing:.15em;text-transform:uppercase; color:var(--cyan); padding:6px 14px;border:1px solid rgba(0,212,255,0.35); border-radius:999px;background:rgba(0,212,255,0.05); margin-bottom:22px; } .hero-tag .dot{ width:7px;height:7px;border-radius:50%; background:var(--cyan);box-shadow:0 0 10px var(--cyan); animation:blink 2s infinite; } @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem);line-height:1.02;font-weight:900; letter-spacing:-1.6px;margin-bottom:24px; background:linear-gradient(135deg, #ffffff 10%, var(--cyan-soft) 50%, var(--purple-soft) 90%); -webkit-background-clip:text;background-clip:text;color:transparent; } h1 .accent{ background:linear-gradient(135deg, var(--amber), var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .sub{ font-size:1.08rem;line-height:1.62;color:var(--dim);max-width:560px; margin-bottom:30px; } .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .btn-primary,.btn-ghost{ padding:13px 26px;border-radius:12px;font-weight:700;font-size:.95rem; transition:transform .15s, box-shadow .2s, border-color .2s; } .btn-primary{ background:linear-gradient(135deg, var(--cyan), var(--green)); color:#001014;box-shadow:0 10px 30px -8px var(--cyan); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px var(--cyan);color:#001014} .btn-ghost{ border:1px solid var(--edge);color:var(--ink); } .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)} .hero-stats{ margin-top:36px;display:flex;gap:36px;flex-wrap:wrap; } .stat .num{font-size:1.7rem;font-weight:800;color:var(--cyan-soft);letter-spacing:-.5px;line-height:1} .stat .lab{font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.14em;margin-top:4px} /* ---- Hero right: crucible + vault ---- */ .hero-art{ position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto;width:100%; } .vault{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; } .vault-ring{ position:absolute;border-radius:50%;border:1px solid; animation:vault-rot 40s linear infinite; } .vault-ring.r1{inset:0;border-color:rgba(255,179,71,0.22);border-style:dashed} .vault-ring.r2{inset:8%;border-color:rgba(0,212,255,0.28);animation-duration:60s;animation-direction:reverse} .vault-ring.r3{inset:16%;border-color:rgba(123,61,255,0.3);animation-duration:80s} .vault-door{ position:absolute;inset:22%;border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,226,138,0.18), transparent 55%), radial-gradient(circle at 50% 50%, #0a1028 0%, #020410 70%, #000 100%); border:2px solid rgba(255,179,71,0.35); box-shadow: inset 0 0 60px rgba(0,0,0,0.9), inset 0 0 120px rgba(0,214,111,0.08), 0 0 80px rgba(0,212,255,0.22); } .vault-bolts{position:absolute;inset:22%;pointer-events:none} .vault-bolts span{ position:absolute;left:50%;top:4%; width:10px;height:10px;border-radius:50%; background:radial-gradient(circle at 30% 30%, #ffe28a, #7a5c1c); transform-origin:50% 720%; box-shadow:0 0 6px rgba(255,226,138,0.6); } .vault-bolts span:nth-child(1){transform:translateX(-50%) rotate(0deg)} .vault-bolts span:nth-child(2){transform:translateX(-50%) rotate(45deg)} .vault-bolts span:nth-child(3){transform:translateX(-50%) rotate(90deg)} .vault-bolts span:nth-child(4){transform:translateX(-50%) rotate(135deg)} .vault-bolts span:nth-child(5){transform:translateX(-50%) rotate(180deg)} .vault-bolts span:nth-child(6){transform:translateX(-50%) rotate(225deg)} .vault-bolts span:nth-child(7){transform:translateX(-50%) rotate(270deg)} .vault-bolts span:nth-child(8){transform:translateX(-50%) rotate(315deg)} .vault-spokes{ position:absolute;inset:26%;border-radius:50%;pointer-events:none; background: conic-gradient(from 0deg, transparent 0 12%, rgba(255,179,71,0.25) 12% 13%, transparent 13% 37%, rgba(255,179,71,0.25) 37% 38%, transparent 38% 62%, rgba(255,179,71,0.25) 62% 63%, transparent 63% 87%, rgba(255,179,71,0.25) 87% 88%, transparent 88% 100%); animation:vault-rot 120s linear infinite reverse; } .vault-handle{ position:absolute;left:50%;top:50%; width:68%;height:10px;margin-top:-5px;margin-left:-34%; background:linear-gradient(90deg, transparent, rgba(255,226,138,0.35) 20%, rgba(255,226,138,0.6) 50%, rgba(255,226,138,0.35) 80%, transparent); border-radius:3px; animation:handle-rot 16s ease-in-out infinite; filter:blur(.3px); pointer-events:none; } @keyframes handle-rot{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} } @keyframes vault-rot{to{transform:rotate(360deg)}} .crucible-orb{ position:relative;width:50%;aspect-ratio:1;border-radius:50%; background: radial-gradient(circle at 38% 32%, #e6fff4 0%, #6df2ff 18%, #00d66f 40%, #067a3c 70%, #02240f 100%); box-shadow: 0 0 50px rgba(0,214,111,0.55), 0 0 120px rgba(0,212,255,0.35), inset -10px -20px 40px rgba(0,0,0,0.6); animation:orb-pulse 4s ease-in-out infinite; z-index:2; } .crucible-orb::before{ content:"";position:absolute;left:30%;top:22%;width:28%;height:22%; border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,0.9), transparent 65%); filter:blur(2px); } .crucible-orb::after{ content:"";position:absolute;inset:-25%;border-radius:50%; background:conic-gradient(from 0deg, transparent 0%, rgba(0,214,111,0.3) 20%, transparent 40%, transparent 100%); animation:vault-rot 8s linear infinite;z-index:-1; filter:blur(10px); } @keyframes orb-pulse{ 0%,100%{box-shadow:0 0 50px rgba(0,214,111,0.55),0 0 120px rgba(0,212,255,0.35),inset -10px -20px 40px rgba(0,0,0,0.6)} 50%{box-shadow:0 0 70px rgba(0,214,111,0.75),0 0 160px rgba(0,212,255,0.5),inset -10px -20px 40px rgba(0,0,0,0.6)} } .rune{ position:absolute;font-size:.7rem;letter-spacing:.2em;color:var(--amber);opacity:.55; font-family:'Courier New',monospace;text-transform:uppercase; } .rune.r-top{top:4%;left:50%;transform:translateX(-50%)} .rune.r-bot{bottom:4%;left:50%;transform:translateX(-50%)} .rune.r-lt{left:4%;top:50%;transform:translateY(-50%) rotate(-90deg)} .rune.r-rt{right:4%;top:50%;transform:translateY(-50%) rotate(90deg)} /* ========= PAGE HERO (compact, for sub-pages — Pricing, About, Download) ========= */ .page-hero{ position:relative;max-width:1180px;margin:0 auto; padding:72px 28px 32px;text-align:center; } .page-hero .eyebrow{margin-bottom:22px} .page-hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem);line-height:1.04;font-weight:900; letter-spacing:-1.1px;margin-bottom:20px; background:linear-gradient(135deg, #ffffff 10%, var(--cyan-soft) 50%, var(--purple-soft) 90%); -webkit-background-clip:text;background-clip:text;color:transparent; } .page-hero p{ font-size:1.06rem;line-height:1.65;color:var(--dim);max-width:660px; margin:0 auto; } @media(max-width:680px){ .page-hero{padding:56px 22px 24px} } /* ========= SECTIONS COMMON ========= */ section{padding:76px 28px;position:relative} @media(max-width:680px){ section{padding:54px 22px} } .container{max-width:1180px;margin:0 auto} .eyebrow{ display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--cyan);margin-bottom:18px;font-weight:700; padding:6px 14px;border:1px solid rgba(0,212,255,0.35);border-radius:999px; background:rgba(0,212,255,0.06); } h2{ font-size:clamp(2rem, 3.8vw, 3rem);line-height:1.08;font-weight:900; margin-bottom:18px;letter-spacing:-.7px; } h2 .accent{ background:linear-gradient(135deg, var(--cyan), var(--purple-soft)); -webkit-background-clip:text;background-clip:text;color:transparent; } .section-sub{color:var(--dim);font-size:1rem;max-width:640px;line-height:1.65;margin-bottom:42px} /* ========= AUDIT SPLIT (side-by-side bullets instead of paragraph) ========= */ .audit-split{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;max-width:1040px;margin:34px auto 26px; } @media (max-width:900px){ .audit-split{grid-template-columns:1fr 1fr} } @media (max-width:580px){ .audit-split{grid-template-columns:1fr} } .audit-col{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid var(--edge);border-radius:16px;padding:22px 24px; position:relative;overflow:hidden;text-align:left; } .audit-col::before{ content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:4px 0 0 4px; } .audit-col--sec::before{background:linear-gradient(180deg,var(--cyan),#0077ff)} .audit-col--mkt::before{background:linear-gradient(180deg,#00d66f,#007a3f)} .audit-col--code::before{background:linear-gradient(180deg,#ffb347,#ff7a00)} .audit-col-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--edge)} .audit-col-badge{font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:.2px} .audit-col--sec .audit-col-badge{color:var(--cyan)} .audit-col--mkt .audit-col-badge{color:#00d66f} .audit-col--code .audit-col-badge{color:#ffb347} .audit-col-count{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)} .audit-list{list-style:none;padding:0;margin:0;display:grid;gap:8px} .audit-list li{ position:relative;padding:8px 10px 8px 28px;border-radius:8px; font-size:.92rem;color:var(--ink);line-height:1.35; background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.03); } .audit-list li::before{ content:"✓";position:absolute;left:10px;top:8px; font-weight:900;font-size:.85rem; } .audit-col--sec .audit-list li::before{color:var(--cyan)} .audit-col--mkt .audit-list li::before{color:#00d66f} .audit-col--code .audit-list li::before{color:#ffb347} /* ========= WHAT-YOU-GET STRIP ========= */ .audit-outcomes{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; max-width:1040px;margin:20px auto 46px; } @media (max-width:700px){ .audit-outcomes{grid-template-columns:1fr} } .audit-outcome{ display:flex;align-items:center;gap:14px; background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.18); border-radius:14px;padding:16px 18px; } .audit-outcome-num{ font-size:2.1rem;font-weight:900;color:var(--cyan-soft);min-width:44px; background:linear-gradient(135deg,var(--cyan),var(--green)); -webkit-background-clip:text;background-clip:text;color:transparent; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; } .audit-outcome-lab{font-size:.85rem;color:var(--ink);line-height:1.35;text-align:left} .audit-outcome-lab em{font-style:normal;color:var(--dim);font-size:.78rem;display:block;margin-top:2px} /* ========= SEVEN STONES ========= */ .agents-section{ background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(123,61,255,0.12), transparent 70%), var(--bg-0); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); } .stones-grid{ display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; } .agent-card{ position:relative; background:linear-gradient(155deg, rgba(13,17,37,0.95), rgba(10,13,28,0.7)); border:1px solid var(--edge); border-radius:18px;padding:28px 24px; overflow:hidden; transition:transform .3s, border-color .3s, box-shadow .3s; } .agent-card.master{ grid-column:1 / -1; border:1px solid rgba(109,242,255,0.45); background: radial-gradient(circle at 20% 0%, rgba(109,242,255,0.10), transparent 55%), radial-gradient(circle at 80% 100%, rgba(0,212,255,0.08), transparent 55%), linear-gradient(155deg, rgba(13,17,37,0.95), rgba(10,13,28,0.7)); box-shadow:0 0 0 1px rgba(109,242,255,0.12), 0 12px 40px -10px rgba(0,212,255,0.18); padding:32px 30px; } .agent-card.master::before{opacity:.25} .agent-card.master .agent-demo{height:170px} .agent-card.master .master-badge{ display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#0a141a;background:linear-gradient(135deg,#6df2ff,#00d4ff); padding:5px 12px;border-radius:999px;margin-bottom:14px; } .agent-card.master .agent-title{font-size:1.4rem} @media(max-width:760px){ .agent-card.master{padding:24px 20px} .agent-card.master .agent-demo{height:140px} } .agent-card::before{ content:"";position:absolute;inset:-1px;border-radius:inherit; background:linear-gradient(135deg, var(--card-color, var(--cyan)), transparent 60%); opacity:0;transition:opacity .35s;z-index:-1; filter:blur(16px); } .agent-card:hover{transform:translateY(-4px);border-color:var(--card-color, var(--cyan))} .agent-card:hover::before{opacity:.4} .agent-demo{ height:140px;margin-bottom:20px;border-radius:12px; background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0.6), var(--bg-1)); border:1px solid var(--edge); position:relative;overflow:hidden; } .agent-title{font-size:1.2rem;font-weight:700;margin-bottom:4px;color:var(--ink)} .agent-role{font-size:.78rem;color:var(--card-color,var(--cyan));letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-weight:600} .agent-desc{font-size:.92rem;color:var(--dim);line-height:1.55} /* --- Agent 1: Agent Crucible (SOC / real-time sun) --- */ .demo-crucible{ background:radial-gradient(circle at 50% 55%, rgba(255,179,71,0.18), var(--bg-1) 70%); } .demo-crucible .sun{ position:absolute;left:50%;top:50%; width:44px;height:44px;border-radius:50%; background:radial-gradient(circle at 40% 40%, var(--gold), var(--amber) 60%, #6a3000 100%); margin:-22px 0 0 -22px; box-shadow:0 0 30px var(--amber), 0 0 60px rgba(255,179,71,0.5); animation:sun-pulse 2.4s ease-in-out infinite; } @keyframes sun-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .demo-crucible .ray{ position:absolute;left:50%;top:50%;width:1px;height:60px; background:linear-gradient(to top, transparent, var(--amber)); transform-origin:50% 0%; opacity:.7; } .demo-crucible .ray:nth-child(2){transform:rotate(0deg) translateY(-20px)} .demo-crucible .ray:nth-child(3){transform:rotate(45deg) translateY(-20px)} .demo-crucible .ray:nth-child(4){transform:rotate(90deg) translateY(-20px)} .demo-crucible .ray:nth-child(5){transform:rotate(135deg) translateY(-20px)} .demo-crucible .ray:nth-child(6){transform:rotate(180deg) translateY(-20px)} .demo-crucible .ray:nth-child(7){transform:rotate(225deg) translateY(-20px)} .demo-crucible .ray:nth-child(8){transform:rotate(270deg) translateY(-20px)} .demo-crucible .ray:nth-child(9){transform:rotate(315deg) translateY(-20px)} .demo-crucible .blip{ position:absolute;font-family:'Courier New',monospace;font-size:.62rem;color:var(--amber); opacity:0;animation:crucible-blip 4s infinite; } .demo-crucible .blip:nth-child(10){top:15%;left:10%;animation-delay:0s} .demo-crucible .blip:nth-child(11){top:75%;left:78%;animation-delay:1.3s} .demo-crucible .blip:nth-child(12){top:30%;right:15%;animation-delay:2.6s} @keyframes crucible-blip{ 0%,90%,100%{opacity:0} 5%,25%{opacity:1} } /* --- Agent 2: Agent Shadow (moon / dark web) --- */ .demo-shadow{ background:radial-gradient(circle at 30% 60%, rgba(100,120,200,0.12), #020410 70%); } .demo-shadow .moon{ position:absolute;left:50%;top:50%; width:44px;height:44px;border-radius:50%; background:radial-gradient(circle at 35% 35%, #e8f0ff, #8a9fc8 55%, #1a2040 100%); margin:-22px 0 0 -22px; box-shadow:0 0 24px rgba(180,200,255,0.5), inset -6px -8px 14px rgba(0,0,0,0.8); } .demo-shadow .packet{ position:absolute;width:4px;height:4px;border-radius:50%; background:var(--purple-soft); box-shadow:0 0 8px var(--purple-soft); animation:shadow-traverse 3s linear infinite; } .demo-shadow .packet:nth-child(2){top:20%;animation-delay:0s} .demo-shadow .packet:nth-child(3){top:50%;animation-delay:1s} .demo-shadow .packet:nth-child(4){top:80%;animation-delay:2s} @keyframes shadow-traverse{from{left:-5%}to{left:105%}} /* --- Agent 3: Agent Purge (threat hunting / ML radar sweep) --- */ .demo-purge{ background:radial-gradient(circle at 50% 50%, rgba(123,61,255,0.1), var(--bg-1) 70%); } .demo-purge .ring{ position:absolute;left:50%;top:50%;border-radius:50%; border:1px solid rgba(123,61,255,0.3); transform:translate(-50%,-50%); } .demo-purge .ring.r1{width:40px;height:40px} .demo-purge .ring.r2{width:70px;height:70px} .demo-purge .ring.r3{width:100px;height:100px} .demo-purge .ring.r4{width:130px;height:130px} .demo-purge .sweep{ position:absolute;left:50%;top:50%;width:70px;height:70px; margin:-35px 0 0 -35px;border-radius:50%; background:conic-gradient(from 0deg, var(--purple) 0deg, transparent 60deg); animation:vault-rot 3s linear infinite;opacity:.8; filter:blur(2px); } .demo-purge .target{ position:absolute;width:5px;height:5px;border-radius:50%; background:var(--red);box-shadow:0 0 8px var(--red); animation:orth-blip 3s infinite; } .demo-purge .target.t1{top:30%;left:30%;animation-delay:.6s} .demo-purge .target.t2{top:65%;right:32%;animation-delay:1.4s} .demo-purge .target.t3{bottom:28%;left:55%;animation-delay:2.2s} @keyframes orth-blip{ 0%,85%,100%{opacity:0;transform:scale(.6)} 10%,30%{opacity:1;transform:scale(1.4)} 50%{opacity:.5;transform:scale(1)} } /* --- Agent 4: Agent Anvil (network / tower bars) --- */ .demo-amon{ background:radial-gradient(ellipse at 50% 100%, rgba(0,212,255,0.1), var(--bg-1) 70%); } .demo-amon .bars{ position:absolute;left:10%;right:10%;bottom:20%;height:80px; display:flex;align-items:flex-end;justify-content:space-between;gap:2px; } .demo-amon .bars span{ display:block;width:8px;background:linear-gradient(to top, var(--cyan), rgba(0,212,255,0.2)); border-radius:2px 2px 0 0;animation:amon-bar 1.8s ease-in-out infinite; } .demo-amon .bars span:nth-child(1){height:30%;animation-delay:0s} .demo-amon .bars span:nth-child(2){height:60%;animation-delay:.1s} .demo-amon .bars span:nth-child(3){height:45%;animation-delay:.2s} .demo-amon .bars span:nth-child(4){height:85%;animation-delay:.3s} .demo-amon .bars span:nth-child(5){height:40%;animation-delay:.4s} .demo-amon .bars span:nth-child(6){height:70%;animation-delay:.5s} .demo-amon .bars span:nth-child(7){height:55%;animation-delay:.6s} .demo-amon .bars span:nth-child(8){height:90%;animation-delay:.7s} .demo-amon .bars span:nth-child(9){height:38%;animation-delay:.8s} .demo-amon .bars span:nth-child(10){height:62%;animation-delay:.9s} .demo-amon .bars span:nth-child(11){height:50%;animation-delay:1s} .demo-amon .bars span:nth-child(12){height:75%;animation-delay:1.1s} .demo-amon .bars span:nth-child(13){height:33%;animation-delay:1.2s} .demo-amon .bars span:nth-child(14){height:80%;animation-delay:1.3s} .demo-amon .bars span:nth-child(15){height:48%;animation-delay:1.4s} @keyframes amon-bar{ 0%,100%{transform:scaleY(.6);opacity:.5} 50%{transform:scaleY(1.1);opacity:1} } .demo-amon .label{ position:absolute;top:10px;left:14px;font-size:.6rem;color:var(--cyan); letter-spacing:.15em;font-family:'Courier New',monospace; } /* --- Agent 5: Agent Atlas (orchestration / central hub) --- */ .demo-atlas{ background:radial-gradient(circle at 50% 50%, rgba(0,212,255,0.08), var(--bg-1) 70%); } .demo-atlas .hub{ position:absolute;left:50%;top:50%;width:24px;height:24px; margin:-12px 0 0 -12px;border-radius:50%; background:radial-gradient(circle, var(--cyan), #005a6f); box-shadow:0 0 16px var(--cyan); animation:osgil-pulse 1.8s ease-in-out infinite; } @keyframes osgil-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}} .demo-atlas .node{ position:absolute;width:10px;height:10px;border-radius:50%; background:var(--cyan-soft);box-shadow:0 0 6px var(--cyan-soft); } .demo-atlas .n1{top:15%;left:20%} .demo-atlas .n2{top:15%;right:20%} .demo-atlas .n3{bottom:15%;left:20%} .demo-atlas .n4{bottom:15%;right:20%} .demo-atlas .n5{top:50%;left:8%;transform:translateY(-50%)} .demo-atlas .n6{top:50%;right:8%;transform:translateY(-50%)} .demo-atlas .link{ position:absolute;left:50%;top:50%;height:1px; background:linear-gradient(90deg, var(--cyan), transparent); transform-origin:0 0;animation:osgil-flow 3s linear infinite; } .demo-atlas .link.l1{width:60px;transform:rotate(-45deg)} .demo-atlas .link.l2{width:60px;transform:rotate(-135deg)} .demo-atlas .link.l3{width:60px;transform:rotate(45deg)} .demo-atlas .link.l4{width:60px;transform:rotate(135deg)} .demo-atlas .link.l5{width:75px;transform:rotate(180deg)} .demo-atlas .link.l6{width:75px;transform:rotate(0deg)} @keyframes osgil-flow{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}} /* --- Agent 6: Agent Temper (forensics / immutable ledger) --- */ .demo-elos{ background:linear-gradient(180deg, var(--bg-1), #020410); } .demo-elos .row{ position:absolute;left:15%;right:15%;height:14px; display:flex;align-items:center;gap:6px; font-family:'Courier New',monospace;font-size:.55rem;color:var(--green); opacity:0;animation:elos-row 8s linear infinite; } .demo-elos .row::before{content:"▸";color:var(--amber)} .demo-elos .row.a{top:15%;animation-delay:0s} .demo-elos .row.b{top:32%;animation-delay:1s} .demo-elos .row.c{top:49%;animation-delay:2s} .demo-elos .row.d{top:66%;animation-delay:3s} .demo-elos .row.e{top:83%;animation-delay:4s} @keyframes elos-row{ 0%{opacity:0;transform:translateX(-10px)} 8%{opacity:1;transform:translateX(0)} 75%{opacity:1} 100%{opacity:0} } .demo-elos .hash{ letter-spacing:.08em; } /* --- Agent 7: Agent Alloy (governance / scales) --- */ .demo-annum{ background:radial-gradient(circle at 50% 40%, rgba(255,226,138,0.08), var(--bg-1) 70%); } .demo-annum .pole{ position:absolute;left:50%;top:20%;width:2px;height:55%;margin-left:-1px; background:linear-gradient(to bottom, var(--gold), rgba(255,226,138,0.3)); box-shadow:0 0 6px rgba(255,226,138,0.4); } .demo-annum .beam{ position:absolute;left:50%;top:30%;width:88px;height:2px;margin-left:-44px; background:linear-gradient(90deg, var(--gold), var(--amber), var(--gold)); transform-origin:50% 50%; animation:annum-tilt 5s ease-in-out infinite; box-shadow:0 0 6px rgba(255,226,138,0.5); } @keyframes annum-tilt{ 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} } .demo-annum .pan{ position:absolute;width:36px;height:10px;border-radius:0 0 18px 18px; background:linear-gradient(180deg, var(--amber) 0%, #6a3000 100%); box-shadow:0 3px 8px rgba(0,0,0,0.6); } .demo-annum .pan.left{left:50%;top:calc(30% + 4px);margin-left:-60px;animation:annum-panL 5s ease-in-out infinite} .demo-annum .pan.right{left:50%;top:calc(30% + 4px);margin-left:24px;animation:annum-panR 5s ease-in-out infinite} @keyframes annum-panL{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}} @keyframes annum-panR{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}} .demo-annum .chain{ position:absolute;width:1px;background:rgba(255,226,138,0.5); top:calc(30% + 2px); } .demo-annum .chain.cl{left:calc(50% - 42px);height:10px} .demo-annum .chain.cr{left:calc(50% + 42px);height:10px} /* ========= THREAT DASHBOARD ========= */ .dash-section{ background:linear-gradient(180deg, var(--bg-0) 0%, #060314 100%); } .dash-grid{ display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center; } .dash-mock{ background:rgba(13,17,37,0.85); border:1px solid var(--edge); border-radius:18px;overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,0.8); } .dash-top{ display:flex;align-items:center;gap:10px;padding:12px 16px; border-bottom:1px solid var(--edge);background:rgba(6,9,22,0.8); font-size:.75rem;color:var(--dim);font-family:'Courier New',monospace; } .dash-dot{width:10px;height:10px;border-radius:50%} .dash-dot.red{background:#ff5f57} .dash-dot.yel{background:#ffbd2e} .dash-dot.grn{background:#28c840} .dash-title{margin-left:auto;color:var(--faint);letter-spacing:.12em} .dash-body{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px} .dash-tile{ background:rgba(5,7,15,0.7);border:1px solid var(--edge); border-radius:10px;padding:14px;position:relative;overflow:hidden; } .dash-tile .lab{font-size:.68rem;color:var(--faint);letter-spacing:.12em;text-transform:uppercase} .dash-tile .val{font-size:1.6rem;font-weight:800;margin-top:4px} .dash-tile .val.cy{color:var(--cyan)} .dash-tile .val.gr{color:var(--green)} .dash-tile .val.am{color:var(--amber)} .dash-tile .val.rd{color:var(--red)} .dash-tile .meter{ margin-top:10px;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden; } .dash-tile .meter > i{display:block;height:100%;border-radius:2px;animation:meter-pulse 3s ease-in-out infinite} .m-cy{background:linear-gradient(90deg, var(--cyan), transparent);width:70%} .m-gr{background:linear-gradient(90deg, var(--green), transparent);width:88%} .m-am{background:linear-gradient(90deg, var(--amber), transparent);width:42%} .m-rd{background:linear-gradient(90deg, var(--red), transparent);width:28%} @keyframes meter-pulse{0%,100%{opacity:.7}50%{opacity:1}} .dash-feed{ grid-column:1/-1;background:rgba(5,7,15,0.7); border:1px solid var(--edge);border-radius:10px;padding:12px 14px; font-family:'Courier New',monospace;font-size:.72rem;max-height:140px;overflow:hidden;position:relative; } .dash-feed .line{ padding:3px 0;color:var(--dim);border-bottom:1px dashed rgba(255,255,255,0.04); animation:feed-scroll 12s linear infinite; } .dash-feed .line .t{color:var(--faint);margin-right:8px} .dash-feed .line .s{color:var(--cyan)} .dash-feed .line.warn .s{color:var(--amber)} .dash-feed .line.crit .s{color:var(--red)} @keyframes feed-scroll{from{transform:translateY(0)}to{transform:translateY(-100%)}} /* ========= WHY / FEATURES GRID ========= */ .features-section{background:var(--bg-0);border-top:1px solid var(--edge)} .feat-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:22px} .feat{ padding:26px 22px;border-radius:14px; background:linear-gradient(155deg, rgba(13,17,37,0.9), rgba(6,9,22,0.5)); border:1px solid var(--edge); transition:border-color .3s, transform .3s; } .feat:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,212,255,0.35)} .feat .ico{ width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:1.25rem;margin-bottom:14px; background:linear-gradient(135deg, rgba(0,212,255,0.15), rgba(123,61,255,0.15)); border:1px solid var(--edge); } .feat h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;letter-spacing:-.2px} .feat p{color:var(--dim);font-size:.9rem;line-height:1.6} /* ========= CTA / WAITLIST ========= */ .cta-section{ text-align:center;padding:88px 28px; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,214,111,0.12), transparent 60%), var(--bg-1); border-top:1px solid var(--edge); } @media(max-width:680px){ .cta-section{padding:64px 22px} } .cta-section h2{max-width:720px;margin:0 auto 14px} .cta-section p{color:var(--dim);max-width:560px;margin:0 auto 28px;font-size:1rem;line-height:1.6} .waitlist-form{ display:flex;gap:10px;max-width:500px;margin:0 auto;flex-wrap:wrap;justify-content:center; } .waitlist-form input{ flex:1;min-width:240px;padding:14px 18px;border-radius:12px; background:rgba(5,7,15,0.85);border:1px solid var(--edge);color:var(--ink); font-size:1rem;font-family:inherit; transition:border-color .2s; } .waitlist-form input:focus{outline:none;border-color:var(--cyan)} .waitlist-form button{ padding:14px 26px;border-radius:12px;font-weight:700;font-size:.95rem; background:linear-gradient(135deg, var(--cyan), var(--green)); color:#001014; box-shadow:0 10px 30px -8px var(--cyan); transition:transform .15s; } .waitlist-form button:hover{transform:translateY(-2px)} .waitlist-note{margin-top:18px;font-size:.82rem;color:var(--faint)} .waitlist-ok{ display:none;margin-top:20px;padding:14px 20px;border-radius:12px; background:rgba(0,214,111,0.1);border:1px solid rgba(0,214,111,0.4); color:var(--green);font-weight:600;max-width:500px;margin-left:auto;margin-right:auto; } /* ========= FOOTER ========= */ footer{ padding:48px 28px 32px;text-align:center; border-top:1px solid var(--edge);background:var(--bg-1); } .foot-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px} .foot-brand img{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(0,214,111,0.5))} .foot-brand span{font-weight:700;letter-spacing:.4px;font-size:.95rem} .foot-links{display:flex;gap:22px;justify-content:center;margin-bottom:22px;flex-wrap:wrap} .foot-links a{color:var(--dim);font-size:.86rem;transition:color .2s} .foot-links a:hover{color:var(--cyan)} .foot-fine{font-size:.74rem;color:var(--faint);max-width:720px;margin:0 auto;line-height:1.65} .foot-fine strong{color:var(--dim)} /* ========= SMAUG — Dragon Guard ========= */ .smaug-section{ border-top:1px solid rgba(255,77,77,0.2); border-bottom:1px solid rgba(255,77,77,0.2); background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(110,15,0,0.2), transparent 65%), radial-gradient(ellipse 40% 40% at 15% 85%, rgba(255,100,0,0.07), transparent 60%), radial-gradient(ellipse 40% 40% at 85% 15%, rgba(255,77,77,0.07), transparent 60%), var(--bg-0); } .smaug-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:52px} @media(max-width:900px){.smaug-intro{grid-template-columns:1fr}} .demo-smaug-wrap{ position:relative;height:220px;border-radius:14px;overflow:hidden; background:rgba(4,1,0,0.8);border:1px solid rgba(255,77,77,0.18); display:flex;align-items:center;justify-content:center; } .smaug-vault-core{ width:38px;height:38px;border-radius:8px; background:rgba(255,100,0,0.18);border:2px solid rgba(255,120,0,0.65); position:relative;z-index:2; display:flex;align-items:center;justify-content:center; font-size:1.1rem;line-height:1; animation:smaug-core-pulse 2.4s ease-in-out infinite; } @keyframes smaug-core-pulse{ 0%,100%{box-shadow:0 0 14px rgba(255,100,0,0.4),inset 0 0 8px rgba(255,160,0,0.2)} 50%{box-shadow:0 0 36px rgba(255,100,0,0.75),inset 0 0 22px rgba(255,160,0,0.45)}} .smaug-fring{ position:absolute;top:50%;left:50%;border-radius:50%; border:1px solid rgba(255,100,0,0.55); transform:translate(-50%,-50%); animation:smaug-fring-exp 3s ease-out infinite; } .smaug-fring.fr1{animation-delay:0s} .smaug-fring.fr2{animation-delay:1s} .smaug-fring.fr3{animation-delay:2s} @keyframes smaug-fring-exp{ 0%{width:42px;height:42px;opacity:.9;border-color:rgba(255,120,0,0.7)} 100%{width:210px;height:210px;opacity:0;border-color:rgba(255,77,77,0)}} .smaug-hp{ position:absolute;width:13px;height:13px;border-radius:3px; border:1px solid rgba(255,77,77,0.3);background:rgba(255,77,77,0.07); animation:smaug-hp-idle 4.5s ease-in-out infinite; } .smaug-hp.hp1{top:18%;left:11%;animation-delay:0s} .smaug-hp.hp3{bottom:22%;left:15%;animation-delay:1.8s} .smaug-hp.hp4{bottom:18%;right:11%;animation-delay:2.7s} .smaug-hp.hp5{top:52%;left:7%;animation-delay:3.5s} @keyframes smaug-hp-idle{ 0%,100%{border-color:rgba(255,77,77,0.3);background:rgba(255,77,77,0.07)} 50%{border-color:rgba(255,77,77,0.5);background:rgba(255,77,77,0.12)}} .smaug-hp-trigger{ position:absolute;top:14%;right:13%; width:13px;height:13px;border-radius:3px; animation:smaug-hp-fire 5.5s ease-in-out infinite; } @keyframes smaug-hp-fire{ 0%,33%,100%{border:1px solid rgba(255,77,77,0.3);background:rgba(255,77,77,0.07);box-shadow:none} 46%,56%{border:1px solid #ff4d4d;background:rgba(255,77,77,0.85);box-shadow:0 0 20px #ff4d4d,0 0 40px rgba(255,77,77,0.4)} 72%{border:1px solid rgba(255,77,77,0.5);background:rgba(255,77,77,0.22);box-shadow:0 0 8px rgba(255,77,77,0.35)}} .smaug-alert-txt{ position:absolute;bottom:11px;left:50%;transform:translateX(-50%); font-size:.57rem;font-weight:700;letter-spacing:.09em; color:#ff4d4d;white-space:nowrap;font-family:monospace; animation:smaug-alert-show 5.5s ease-in-out infinite; } @keyframes smaug-alert-show{ 0%,33%,100%{opacity:0} 50%,76%{opacity:1} 88%{opacity:0}} .smaug-blocked-badge{ position:absolute;top:11px;left:13px; font-size:.58rem;font-weight:700;letter-spacing:.06em; color:var(--amber);font-family:monospace;opacity:.8; } .smaug-caps{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px; } .smaug-cap{ padding:20px;border-radius:12px; background:rgba(18,4,0,0.7);border:1px solid rgba(255,77,77,0.14); transition:border-color .2s,transform .2s; } .smaug-cap:hover{border-color:rgba(255,120,0,0.4);transform:translateY(-2px)} .smaug-cap-ico{font-size:1.35rem;margin-bottom:10px;display:block} .smaug-cap h4{font-size:.88rem;font-weight:700;color:var(--amber);margin-bottom:6px} .smaug-cap p{font-size:.8rem;color:var(--dim);line-height:1.55} .smaug-tier-badge{ display:inline-flex;align-items:center;gap:5px; font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:2px 9px;border-radius:999px;margin-top:10px; } .stb-watch{background:rgba(0,212,255,0.07);color:var(--cyan);border:1px solid rgba(0,212,255,0.22)} .stb-ent{background:rgba(255,100,0,0.08);color:var(--amber);border:1px solid rgba(255,100,0,0.28)} /* ========= RESPONSIVE ========= */ @media (max-width: 900px){ .hero{grid-template-columns:1fr;text-align:center;padding:40px 20px 70px} .hero-stats{justify-content:center} .sub{margin-left:auto;margin-right:auto} .dash-grid{grid-template-columns:1fr;gap:30px} section{padding:70px 20px} .nav-links a:not(.nav-cta){display:none} .hero-art{max-width:380px} } @media (max-width: 520px){ .waitlist-form{flex-direction:column} .waitlist-form input,.waitlist-form button{width:100%} }