/* ═══════════════════════════════════
   diggolabs — Dark theme, clean layout
   ═══════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{
    font-family:'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    background:#000;color:#fff;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* ── Intro ── */
.intro{
    position:fixed;inset:0;z-index:999;background:#000;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .5s ease,visibility .5s ease;
}
.intro-inner{display:flex;align-items:center;gap:.7rem;animation:intro-in .4s ease both}
.intro-logo{border-radius:8px}
.intro-text{font-size:.82rem;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.85)}
@keyframes intro-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}

/* ── Page reveal ── */
.page{opacity:0;transform:translateY(10px);transition:opacity .9s ease .05s,transform .9s ease .05s}
.page.visible{opacity:1;transform:translateY(0)}

/* ── Nav (floating pill) ── */
.nav-outer{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;justify-content:center;
    pointer-events:none;
}
.nav{
    display:flex;align-items:center;
    width:584px;
    height:60px;padding:0 24px;gap:24px;
    margin-top:24px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-radius:999px;
    pointer-events:auto;
}
.nav-brand{display:flex;flex-grow:1;align-items:center;gap:.5rem}
.nav-logo{border-radius:6px}
.nav-name{font-size:.82rem;font-weight:700;letter-spacing:.1em;color:#fff}
.nav-links{display:flex;align-items:center;gap:0;margin-right:-12px}
.nav-links a{
    font-size:.84rem;font-weight:600;color:#fff;
    white-space:nowrap;
    padding:8px 12px;
    transition:opacity .15s ease;
}
.nav-links a:hover{opacity:.75}
.nav-links a.active{opacity:1}
.nav-cta{
    display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 16px;
    font-size:.84rem;font-weight:600;
    background:rgba(255,255,255,.12);color:#fff;
    border-radius:999px;
    white-space:nowrap;
    transition:background .15s ease;
}
.nav-cta:hover{background:rgba(255,255,255,.2)}

/* ── Hero ── */
.hero{
    text-align:center;
    padding:140px 32px 48px;
    max-width:800px;margin:0 auto;
}
.hero h1{
    font-weight:600;font-size:clamp(2.2rem,5vw,3.6rem);
    line-height:1.15;letter-spacing:-.035em;
    color:#fff;
}
.hero-sub{
    margin-top:20px;font-size:1.05rem;line-height:1.65;font-weight:400;
    color:rgba(255,255,255,.45);max-width:540px;margin-left:auto;margin-right:auto;
}
.hero-actions{
    display:flex;gap:12px;justify-content:center;align-items:center;
    margin-top:32px;
}
.btn-primary{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:12px 28px;
    font-size:.88rem;font-weight:600;
    background:#fff;color:#000;
    border-radius:999px;
    transition:background .15s,transform .1s;
}
.btn-primary:hover{background:rgba(255,255,255,.85);transform:scale(1.02)}
.btn-secondary{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:12px 28px;
    font-size:.88rem;font-weight:500;
    background:transparent;color:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    transition:border-color .15s,color .15s;
}
.btn-secondary:hover{border-color:rgba(255,255,255,.35);color:#fff}

/* ── Pillars (Build / Launch / Scale) ── */
.pillars{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    max-width:960px;margin:0 auto;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.06);
}
.pillar{
    padding:40px 32px;
    background:#000;
}
.pillar h3{
    font-size:.92rem;font-weight:600;color:#fff;
    margin-bottom:10px;
}
.pillar p{
    font-size:.88rem;line-height:1.7;font-weight:400;
    color:rgba(255,255,255,.4);
}

/* ── About teaser ── */
.about-teaser{
    text-align:center;
    max-width:640px;margin:0 auto;
    padding:80px 32px;
    border-top:1px solid rgba(255,255,255,.06);
}
.about-teaser p.lead{
    font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.6;font-weight:400;
    color:rgba(255,255,255,.5);
}
.about-teaser a{
    display:inline-block;margin-top:20px;font-size:.88rem;font-weight:500;
    color:rgba(255,255,255,.35);transition:color .15s;
}
.about-teaser a:hover{color:#fff}

/* ── CTA banner ── */
.cta-banner{
    text-align:center;
    padding:100px 32px;
    background:rgba(255,255,255,.02);
    border-top:1px solid rgba(255,255,255,.06);
}
.cta-banner h2{
    font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;
    letter-spacing:-.03em;color:#fff;
}
.cta-banner p{
    margin-top:14px;font-size:1rem;line-height:1.65;font-weight:400;
    color:rgba(255,255,255,.4);max-width:480px;margin-left:auto;margin-right:auto;
}
.cta-banner .btn-primary{margin-top:28px}

/* ── Footer ── */
.footer{
    border-top:1px solid rgba(255,255,255,.06);
    padding:48px 32px 40px;
    max-width:1080px;margin:0 auto;
}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.footer-logo{border-radius:5px}
.footer-columns{display:flex;gap:64px}
.footer-col h4{
    font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.25);margin-bottom:12px;
}
.footer-col a{
    display:block;font-size:.82rem;font-weight:400;color:rgba(255,255,255,.4);
    padding:3px 0;transition:color .15s;
}
.footer-col a:hover{color:#fff}
.footer-divider{
    height:1px;background:rgba(255,255,255,.06);margin-bottom:24px;
}
.footer-bottom{display:flex;justify-content:space-between;align-items:center}
.footer-bottom span{font-size:.72rem;color:rgba(255,255,255,.25)}
.footer-social{display:flex;gap:16px}
.footer-social a{color:rgba(255,255,255,.2);transition:color .15s}
.footer-social a:hover{color:#fff}

/* ── Page content (subpages) ── */
.page-hero{
    text-align:center;
    padding:140px 32px 48px;
    max-width:680px;margin:0 auto;
}
.page-hero h1{
    font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;
    letter-spacing:-.03em;line-height:1.2;color:#fff;
}
.page-hero p{
    margin-top:14px;font-size:1rem;line-height:1.65;font-weight:400;
    color:rgba(255,255,255,.4);
}

.content{
    max-width:680px;margin:0 auto;
    padding:0 32px 80px;
}
.content h2{
    font-size:1.1rem;font-weight:600;margin:2.4rem 0 .6rem;
    letter-spacing:-.01em;color:#fff;
}
.content h2:first-child{margin-top:0}
.content p{
    font-size:.92rem;line-height:1.75;font-weight:400;
    color:rgba(255,255,255,.5);margin-bottom:1rem;
}
.content ul{
    margin:.5rem 0 1rem 1.2rem;font-size:.92rem;line-height:1.75;
    color:rgba(255,255,255,.5);font-weight:400;
}
.content a{
    color:rgba(255,255,255,.8);text-decoration:underline;
    text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.2);
    transition:text-decoration-color .15s;
}
.content a:hover{text-decoration-color:rgba(255,255,255,.6)}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 900px) {
    .pillars{grid-template-columns:1fr}
}

/* Mobile */
@media (max-width: 680px) {
    .nav-outer{
        padding:0 12px;
        padding-left:max(12px,env(safe-area-inset-left));
        padding-right:max(12px,env(safe-area-inset-right));
    }
    .nav{
        width:100%;max-width:100%;
        padding:0 14px;height:52px;gap:12px;margin-top:12px;
        margin-top:max(12px,env(safe-area-inset-top));
    }
    .nav-brand{min-width:0}
    .nav-name{font-size:.75rem;letter-spacing:.06em}
    .nav-links{flex-shrink:0;gap:0}
    .nav-links a{padding:8px 10px;font-size:.8rem;min-height:44px;display:inline-flex;align-items:center}
    .nav-cta{height:38px;min-height:38px;padding:0 14px;font-size:.8rem}
    .hero{
        padding:100px 20px 32px;
        padding-top:max(100px,calc(70px + env(safe-area-inset-top)));
        padding-left:max(20px,env(safe-area-inset-left));
        padding-right:max(20px,env(safe-area-inset-right));
    }
    .hero h1{font-size:clamp(1.75rem,8vw,2.5rem)}
    .hero-sub{font-size:.95rem;margin-top:16px}
    .hero-actions{
        flex-direction:column;
        width:100%;max-width:280px;margin-left:auto;margin-right:auto;
        margin-top:24px;gap:10px;
    }
    .btn-primary,.btn-secondary{width:100%;justify-content:center;min-height:48px}
    .pillars{margin-left:0;margin-right:0}
    .pillar{padding:28px 20px}
    .pillar h3{font-size:.88rem}
    .pillar p{font-size:.84rem}
    .about-teaser{padding:48px 20px}
    .about-teaser p.lead{font-size:1.05rem}
    .cta-banner{padding:64px 20px}
    .cta-banner h2{font-size:clamp(1.4rem,6vw,2rem)}
    .cta-banner p{font-size:.9rem}
    .footer{padding:32px 20px 28px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
    .footer-top{flex-direction:column;gap:28px;margin-bottom:32px}
    .footer-columns{flex-wrap:wrap;gap:32px 48px}
    .footer-bottom{flex-direction:column;gap:14px;text-align:center}
    .page-hero{padding:100px 20px 32px;padding-top:max(100px,calc(70px + env(safe-area-inset-top)))}
    .page-hero h1{font-size:clamp(1.6rem,6vw,2.2rem)}
    .content{padding:0 20px 48px}
    .content h2{font-size:1rem}
    .content p{font-size:.9rem}
}

/* Small phones */
@media (max-width: 400px) {
    .nav{height:48px;padding:0 12px;gap:8px;margin-top:10px}
    .nav-name{display:none}
    .nav-links a{padding:8px 6px;font-size:.75rem}
    .nav-cta{padding:0 12px;font-size:.75rem}
    .hero{padding-top:90px}
}

@media(prefers-reduced-motion:reduce){
    .intro-inner{animation:none;opacity:1}
    .page{transition:none;opacity:1;transform:none}
    .intro{transition:none}
    html{scroll-behavior:auto}
}