/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.3) transparent;
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 3px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #07080a;
    color: #c8d0dc;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* === Background Effects === */
canvas#bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    contain: strict;
}

.cursor-glow {
    position: fixed;
    width: 500px; height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle,
        rgba(99,102,241,.07) 0%,
        rgba(139,92,246,.03) 40%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    will-change: left, top;
    contain: layout style;
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .025;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    contain: strict;
}

/* === Floating Orbs === */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: float 25s ease-in-out infinite;
    contain: layout style;
}

.orb-1 { width: 400px; height: 400px; background: rgba(99,102,241,.05); top: -10%; right: -5%; }
.orb-2 { width: 300px; height: 300px; background: rgba(139,92,246,.04); bottom: -10%; left: -5%; animation-delay: -8s; }
.orb-3 { width: 200px; height: 200px; background: rgba(59,130,246,.03); top: 40%; left: 60%; animation-delay: -16s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -25px) scale(1.04); }
    66% { transform: translate(-15px, 15px) scale(.96); }
}

/* === Layout === */
.wrapper {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 24px 80px;
}

/* === Hero === */
.hero {
    text-align: center;
    margin-bottom: 56px;
    animation: fadeUp .7s ease-out both;
}

.hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
    border: 1px solid rgba(99,102,241,.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(99,102,241,.1), inset 0 1px 0 rgba(255,255,255,.1);
    overflow: hidden;
    contain: content;
}

.hero-icon img {
    width: 48px;
    height: 48px;
    display: block;
}

h1 {
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: #f1f5f9;
    margin-bottom: 16px;
    letter-spacing: -.5px;
}

.hero-sub {
    font-size: clamp(15px, 2.5vw, 18px);
    color: rgba(200,208,220,.7);
    max-width: 520px;
    margin: 0 auto;
}

/* === Article === */
.article {
    animation: fadeUp .7s ease-out .1s both;
}

.article h2 {
    font-size: clamp(20px, 3.5vw, 26px);
    font-weight: 700;
    color: #e2e8f0;
    margin: 48px 0 16px;
    letter-spacing: -.3px;
}

.article h3 {
    font-size: clamp(17px, 3vw, 20px);
    font-weight: 600;
    color: #cbd5e1;
    margin: 36px 0 12px;
}

.article p {
    margin-bottom: 16px;
    font-size: 15.5px;
    color: rgba(200,208,220,.82);
}

.article ul, .article ol {
    margin: 0 0 20px 20px;
    font-size: 15.5px;
    color: rgba(200,208,220,.82);
}

.article li {
    margin-bottom: 8px;
}

.article strong {
    color: #e2e8f0;
    font-weight: 600;
}

/* === Highlight Box === */
.highlight-box {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05));
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 32px 0;
}

.highlight-box p {
    color: rgba(200,208,220,.9);
    margin-bottom: 0;
}

/* === CTA Button === */
.cta-wrap {
    text-align: center;
    margin: 48px 0;
    animation: fadeUp .7s ease-out .2s both;
}

.cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .3px;
    color: #e0e7ff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18));
    border: 1px solid rgba(99,102,241,.25);
    cursor: pointer;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(99,102,241,.15),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 48px rgba(99,102,241,.25),
        0 0 0 1px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.25));
    border-color: rgba(99,102,241,.4);
}

.cta-btn:active {
    transform: translateY(-1px);
}

.cta-btn .icon {
    font-size: 20px;
    line-height: 1;
}

.cta-label {
    font-size: 12px;
    color: rgba(200,208,220,.4);
    text-align: center;
    margin-top: 12px;
}

/* === Footer === */
.footer {
    text-align: center;
    padding: 40px 0 0;
    border-top: 1px solid rgba(255,255,255,.05);
    margin-top: 60px;
    animation: fadeUp .7s ease-out .3s both;
}

.footer p {
    font-size: 13px;
    color: rgba(200,208,220,.25);
    letter-spacing: .5px;
}

/* === Animations === */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
    to { transform: scale(2.5); opacity: 0; }
}

/* === Responsive: Tablet === */
@media (max-width: 768px) {
    .wrapper { padding: 48px 20px 60px; }
    .hero { margin-bottom: 44px; }
    .article h2 { margin-top: 40px; }
}

/* === Responsive: Mobile === */
@media (max-width: 480px) {
    .wrapper { padding: 40px 18px 60px; }
    .hero { margin-bottom: 40px; }
    .hero-icon { width: 56px; height: 56px; border-radius: 16px; }
    .hero-icon img { width: 36px; height: 36px; }
    .cta-btn { padding: 17px 32px; font-size: 15px; width: 100%; justify-content: center; }
    .cursor-glow { display: none; }
    .orb-1 { width: 250px; height: 250px; }
    .orb-2 { width: 180px; height: 180px; }
    .orb-3 { width: 120px; height: 120px; }
    .article h2 { margin-top: 36px; }
    .highlight-box { padding: 20px 22px; }
}