*{box-sizing:border-box} .ishero{background: radial-gradient(1200px 600px at 10% 10%, rgba(120,80,200,0.12), transparent), radial-gradient(900px 400px at 90% 90%, rgba(140,230,200,0.06), transparent), linear-gradient(180deg,#0f1724,#0b1220); color: #e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; padding:12px; display:flex;align-items:center;justify-content:center; min-height:100vh;} .hero{color: #e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; width:100%; max-width:1200px; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 10px 40px rgba(2,6,23,0.6); background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); backdrop-filter: blur(6px) saturate(120%); display:grid; grid-template-columns: 1fr 420px; gap:0; } /* Responsive: stack columns on smaller screens */ @media (max-width:900px){ .hero{grid-template-columns: 1fr; padding-bottom:0} .hero-graphic{order:-1;height:320px} } .hero-content{ padding:48px 56px; display:flex;flex-direction:column;justify-content:center;gap:20px; } h1{ margin:0;font-size:28px;line-height:1.06;font-weight:700;letter-spacing:-0.4px; } .eyebrow{font-size:13px;color:#9aa6b2;text-transform:uppercase;letter-spacing:1.2px} p.lead{margin:0;color:#dfe9f5;opacity:0.95;font-size:16px;max-width:46ch} .cta-row{display:flex;gap:14px;align-items:center;margin-top:6px} .btn{ display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:600;text-decoration:none; background: linear-gradient(90deg,#8be9c8,#a78bfa);color:#02131a;box-shadow:0 6px 18px rgba(137,90,252,0.16),0 1px 0 rgba(255,255,255,0.03) inset;transition:transform .18s ease,box-shadow .18s ease; } .btn:active{transform:translateY(1px)} .btn.ghost{ background:transparent;color:#8be9c8;border:1px solid rgba(139,233,200,0.12);backdrop-filter: blur(3px); } .meta{ display:flex;gap:14px;align-items:center;color:#9aa6b2;font-size:13px;margin-top:10px } /* Right panel — graphic */ .hero-graphic{ position:relative;padding:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); } /* Sigil card */ .sigil-card{ width:320px;height:320px;border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative; background: radial-gradient(circle at 30% 30%, rgba(167,139,250,0.08), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015)); border:1px solid rgba(255,255,255,0.03); box-shadow: 0 12px 40px rgba(12,18,30,0.6); transform: translateY(0); transition: transform .6s cubic-bezier(.2,.9,.3,1); } .sigil-card:hover{transform:translateY(-8px) rotate(-0.6deg)} /* floating sigil (SVG) */ .sigil{ width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(10,12,40,0.6)); animation: float 6s ease-in-out infinite; } @keyframes float{ 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(1.2deg)} 100%{transform:translateY(0) rotate(0deg)} } /* ambient particles */ .particle{ position:absolute;border-radius:50%;opacity:0.12;mix-blend-mode:screen;pointer-events:none;filter:blur(6px); animation: drift 14s linear infinite; } .particle.p1{width:160px;height:160px;left:-40px;top:20px;background:linear-gradient(180deg, rgba(167,139,250,0.28), rgba(139,233,200,0.08));animation-duration:18s} .particle.p2{width:88px;height:88px;right:20px;bottom:20px;background:linear-gradient(180deg, rgba(139,233,200,0.18), rgba(167,139,250,0.06));animation-duration:22s} .particle.p3{width:40px;height:40px;left:10%;bottom:6%;background:linear-gradient(180deg, rgba(200,150,255,0.2), rgba(139,233,200,0.04));animation-duration:12s} @keyframes drift{ 0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-18px) scale(1.03)} 100%{transform:translateY(0) scale(1)} } /* small decorative line under hero heading */ .divider{height:4px;width:60px;border-radius:999px;background:linear-gradient(90deg,#8be9c8,#a78bfa);} /* subtle animated underline for CTA */ .btn .arrow{display:inline-block;transform:translateX(0);transition:transform .18s ease} .btn:hover .arrow{transform:translateX(6px)} /* accessibility focus styles */ .btn:focus{outline:3px solid rgba(167,139,250,0.16);outline-offset:4px} /* small-screen adjustments */ @media (max-width:520px){ .hero-content{padding:28px} h1{font-size:22px} .sigil-card{width:240px;height:240px} .sigil{width:170px;height:170px} }