:root{
      --bg:#050b14;
      --bg-2:#07111f;
      --ink:#f4f8ff;
      --muted:#aab8c8;
      --soft:#dceaff;
      --line:rgba(255,255,255,0.13);
      --blue:#0a84ff;
      --cyan:#3de7ff;
      --violet:#7b3cff;
      --mint:#55f0c4;
      --radius:24px;
      --max:1180px;
      --font:Montserrat,Arial,Helvetica,sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
    img{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

    .skip-link{position:absolute;left:-999px;top:1rem;padding:.8rem 1rem;background:#fff;color:#06111f;border-radius:999px;z-index:99;font-weight:800}
    .skip-link:focus{left:1rem}
    .wrap{width:min(calc(100% - 32px),var(--max));margin:0 auto}

    .site-header{position:fixed;inset:0 0 auto;z-index:1000;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(2,8,16,.94),rgba(2,8,16,.72));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
    .nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
    .brand{display:flex;align-items:center;gap:.75rem;font-weight:900;letter-spacing:-.035em;text-transform:uppercase}
    .brand-mark{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
    .brand-mark img{width:32px;height:32px;display:block;filter:drop-shadow(0 0 16px rgba(61,231,255,.35))}
    .nav-links{display:flex;align-items:center;gap:clamp(1rem,3vw,2.35rem);font-size:.8rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
    .nav-links a{color:rgba(255,255,255,.82);padding:.55rem 0;position:relative}
    .nav-links a:hover{color:#fff}
    .nav-cta{min-width:150px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(61,231,255,.65);border-radius:8px;color:#fff;font-weight:900;text-transform:uppercase;font-size:.82rem;background:rgba(0,0,0,.20);box-shadow:0 0 28px rgba(10,132,255,.12)}
    .mobile-menu-icon{display:none;border:0;background:transparent;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
    .mobile-panel{display:none;position:absolute;left:16px;right:16px;top:78px;padding:1rem;border:1px solid rgba(61,231,255,.24);border-radius:18px;background:rgba(5,11,20,.94);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
    .mobile-panel a{display:block;padding:.9rem .75rem;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
    .mobile-panel a:last-child{border-bottom:0}
    .mobile-panel.is-open{display:block}

    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:54px;padding:.95rem 1.45rem;border-radius:7px;border:1px solid transparent;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:linear-gradient(135deg,#12c8ff,#1d69ff 54%,#7b3cff);color:white;box-shadow:0 16px 42px rgba(10,132,255,.38)}
    .btn-secondary{border-color:rgba(255,255,255,.35);background:rgba(2,8,16,.40);color:var(--ink)}

    .eyebrow{margin:0 0 1rem;color:var(--cyan);font-size:.8rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
    h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.055em}
    h1{font-size:clamp(2.85rem,5.4vw,5.25rem)}
    h2{font-size:clamp(2.1rem,4.4vw,3.9rem)}
    h3{font-size:1.22rem;letter-spacing:-.035em}
    .gradient-text{background:linear-gradient(90deg,var(--cyan),var(--blue) 48%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}

    .tools-hero{padding:150px 0 82px;background:radial-gradient(circle at 18% 14%,rgba(61,231,255,.14),transparent 32rem),radial-gradient(circle at 82% 28%,rgba(123,60,255,.14),transparent 30rem),linear-gradient(180deg,#07111f,#06111f 70%,#050b14)}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
    .tools-hero p:not(.eyebrow){max-width:760px;margin:1.25rem 0 0;color:rgba(244,248,255,.82);font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.72}
    .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

    .stack-visual{position:relative;overflow:hidden;min-height:420px;border:1px solid rgba(61,231,255,.22);border-radius:var(--radius);background:radial-gradient(circle at 50% 28%,rgba(61,231,255,.15),transparent 16rem),linear-gradient(180deg,rgba(12,28,50,.82),rgba(4,12,23,.74));box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 46px rgba(61,231,255,.10)}
    .stack-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(61,231,255,.12),transparent 30%,rgba(123,60,255,.14));opacity:.8}
    .orbit{position:absolute;inset:42px;border:1px solid rgba(61,231,255,.18);border-radius:50%;box-shadow:inset 0 0 40px rgba(61,231,255,.05)}
    .orbit:nth-child(2){inset:82px;border-color:rgba(123,60,255,.22)}
    .tool-node{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:94px;min-height:42px;padding:.55rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.065);color:#fff;font-size:.78rem;font-weight:950;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 18px 50px rgba(0,0,0,.24)}
    .node-center{left:50%;top:50%;transform:translate(-50%,-50%);min-width:132px;min-height:132px;border-radius:50%;background:radial-gradient(circle,rgba(61,231,255,.28),rgba(10,132,255,.14) 55%,rgba(123,60,255,.10));border-color:rgba(61,231,255,.34);font-size:.92rem;text-align:center}
    .n1{left:8%;top:16%}.n2{right:8%;top:18%}.n3{left:9%;bottom:18%}.n4{right:9%;bottom:20%}.n5{left:38%;top:8%}.n6{left:38%;bottom:8%}

    .section{padding:78px 0;background:#050b14}
    .section.alt{background:linear-gradient(180deg,#050b14,#06111f)}
    .section-title{text-align:center;max-width:850px;margin:0 auto 2.4rem}
    .section-title p:not(.eyebrow){margin:1rem auto 0;color:rgba(244,248,255,.76);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.65}

    .tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
    .tool-card{position:relative;min-height:230px;padding:1.45rem;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);background:radial-gradient(circle at 86% 12%,rgba(61,231,255,.10),transparent 12rem),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026));box-shadow:0 20px 60px rgba(0,0,0,.18);backdrop-filter:blur(16px);transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
    .tool-card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));box-shadow:0 0 22px rgba(61,231,255,.32);opacity:.8}
    .tool-card:hover{transform:translateY(-5px);border-color:rgba(61,231,255,.42);box-shadow:0 28px 90px rgba(0,0,0,.32),0 0 42px rgba(61,231,255,.10)}
    .tool-kicker{color:var(--cyan);font-size:.72rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
    .tool-card h3{margin-top:.75rem;font-size:1.45rem;line-height:1.1}
    .tool-card p{margin:.8rem 0 0;color:rgba(220,234,255,.78);font-size:.93rem;line-height:1.62}
    .tool-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
    .tag{padding:.35rem .55rem;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:var(--muted);font-size:.72rem;font-weight:900}

    .philosophy{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
    .philosophy-copy{color:rgba(220,234,255,.82);font-size:1rem;line-height:1.78}
    .philosophy-copy p{margin:0 0 1.1rem}
    .principles{display:grid;gap:1rem;margin-top:1.3rem}
    .principle{padding:1.25rem;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026))}
    .principle strong{display:block;color:#fff;font-size:1rem}
    .principle p{margin:.45rem 0 0;color:rgba(220,234,255,.72);font-size:.9rem;line-height:1.58}

    .tools-cta{padding:80px 0;background:radial-gradient(circle at 50% 30%,rgba(123,60,255,.18),transparent 30rem),linear-gradient(180deg,#06111f,#050b14);text-align:center}
    .cta-card{max-width:850px;margin:0 auto;padding:2.2rem;border:1px solid rgba(61,231,255,.28);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));box-shadow:0 24px 80px rgba(0,0,0,.28)}
    .cta-card p{max-width:650px;margin:1rem auto 1.6rem;color:rgba(220,234,255,.78)}

    .site-footer{padding:44px 0 28px;border-top:1px solid rgba(255,255,255,.10);background:#050b14;color:var(--muted)}
    .footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,.8fr);gap:2rem;margin-bottom:2rem}
    .footer-brand p{max-width:280px;font-size:.9rem}
    .footer-col h3{color:var(--cyan);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.8rem}
    .footer-col a,.footer-col span{display:block;margin:.35rem 0;color:var(--muted);font-size:.9rem}
    .footer-col a:hover{color:#fff}
    .copyright{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:1.2rem;font-size:.86rem}

    @media(max-width:1080px){
      .hero-grid{grid-template-columns:1fr}
      .tool-grid{grid-template-columns:repeat(2,1fr)}
      .philosophy{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }

    @media(max-width:760px){
      .nav{min-height:82px}
      .nav-links,.nav-cta{display:none}
      .mobile-menu-icon{display:block}
      .tools-hero{padding-top:118px}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .stack-visual{min-height:340px}
      .tool-node{min-width:78px;min-height:38px;font-size:.66rem;padding:.45rem .6rem}
      .node-center{min-width:112px;min-height:112px}
      .tool-grid,.footer-grid{grid-template-columns:1fr}
      .section{padding:58px 0}
    }
