@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#101820;--muted:#64717d;--line:#e5e9ed;--paper:#fff;--soft:#f5f7f8;--yellow:#ffc928;--yellow2:#ffe27a;--dark:#11181f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}a{color:inherit}h1,h2,h3,b,strong,.brand{font-family:"Space Grotesk",sans-serif}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #e9edf0}
.nav{max-width:1360px;margin:auto;padding:12px 28px;min-height:82px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}.brand img{width:168px;height:auto;display:block}
.navlinks{display:flex;align-items:center;justify-content:flex-end;gap:26px;flex:1;min-width:0}.navlinks a{text-decoration:none;font-size:.9rem;font-weight:600;color:#4b5863;white-space:nowrap;transition:color .2s}.navlinks a:hover{color:#111}.nav-cta{background:var(--ink)!important;color:#fff!important;padding:12px 17px;border-radius:9px}
.menu{display:none;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--ink)}
.hero{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfcfc 100%);border-bottom:1px solid var(--line)}
.hero-inner{max-width:1360px;margin:auto;padding:76px 28px 72px;display:grid;grid-template-columns:1.08fr .92fr;gap:55px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #e0e5e8;border-radius:30px;padding:7px 12px;font-size:.76rem;font-weight:700;color:#56636e;background:#fff}.pill span{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.hero h1{font-size:clamp(3.2rem,6vw,5.8rem);line-height:.96;letter-spacing:-.065em;margin:22px 0}.hero h1 em,.project-copy em{font-style:normal;color:#a87900}.hero-copy>p:not(.pill){max-width:630px;color:var(--muted);font-size:1.13rem}
.hero-actions{display:flex;gap:20px;align-items:center;margin:30px 0 42px}.primary{display:inline-flex;gap:24px;align-items:center;text-decoration:none;background:var(--ink);color:#fff;padding:13px 17px 13px 20px;border-radius:9px;font-weight:700}.primary b{font-size:1.1rem}.secondary{font-weight:700;text-decoration:none}
.stats{display:flex;gap:0}.stats div{padding:0 28px;border-left:1px solid var(--line)}.stats div:first-child{padding-left:0;border:0}.stats strong{display:block;font-size:.98rem}.stats small{color:#84909a;font-size:.72rem}
.hero-visual{height:410px;position:relative;display:grid;place-items:center}.orb{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff8cf 0,#ffe58a 25%,#ffd13b 60%,#ffc21a 100%);filter:blur(.2px);box-shadow:0 35px 80px #e4b32935}.board{position:relative;width:260px;height:315px;border:2px solid #1b252c;border-radius:24px;background:#1c262d;box-shadow:18px 22px 45px #1c262d45;transform:rotate(-7deg);padding:28px}.chip{width:78px;height:78px;border:2px solid #c9d0d5;background:#11181d;color:#ffd22f;border-radius:12px;display:grid;place-items:center;font-size:2rem;font-weight:800;margin:40px auto 30px}.board i{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd12e;right:25px}.board i:nth-of-type(1){top:25px}.board i:nth-of-type(2){top:48px}.board i:nth-of-type(3){bottom:30px}.board i:nth-of-type(4){bottom:53px}.board label{display:block;text-align:center;color:#d9dfe2;letter-spacing:.18em;font-weight:700;font-size:.75rem}.board label small{color:#ffce2d;font-size:.55rem}.circuit{position:absolute;z-index:2;background:#fff;border:1px solid #e1e6e9;border-radius:10px;padding:10px 13px;font-family:monospace;font-size:.72rem;box-shadow:0 12px 28px #19232d12}.circuit span{font-family:"DM Sans";font-size:.62rem;color:#84909a}.c1{top:55px;right:5px}.c2{bottom:58px;left:5px}
.section{max-width:1360px;margin:auto;padding:92px 28px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-top>p{max-width:440px;color:var(--muted);margin:0}.kicker{font-size:.7rem;letter-spacing:.16em;font-weight:800;color:#89949e}.section h2{font-size:clamp(2.1rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.045em;margin:9px 0 0}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.topic{position:relative;min-height:235px;padding:26px;border-radius:15px;text-decoration:none;overflow:hidden;border:1px solid var(--line);background:#fff;transition:.25s}.topic:hover{transform:translateY(-5px);box-shadow:0 20px 40px #17202a12}.topic b{font-size:.72rem;color:#8b959e}.topic h3{font-size:1.55rem;margin:55px 0 8px}.topic p{font-size:.88rem;color:var(--muted);max-width:210px}.topic span{position:absolute;bottom:25px;font-weight:700;font-size:.8rem}.t1{background:linear-gradient(145deg,#fff,#fff8d9)}.t2{background:linear-gradient(145deg,#fff,#edf7ff)}.t3{background:linear-gradient(145deg,#fff,#f0f4f1)}.t4{background:linear-gradient(145deg,#fff,#f4efff)}
.guides{max-width:none;background:var(--soft);padding-left:max(28px,calc((100% - 1304px)/2));padding-right:max(28px,calc((100% - 1304px)/2))}.viewall{font-weight:700;text-decoration:none;font-size:.88rem}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.guide{background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;text-decoration:none;min-height:310px;display:flex;flex-direction:column;transition:.25s}.guide:hover{transform:translateY(-4px);box-shadow:0 18px 40px #18242d10}.guide-icon{width:48px;height:48px;border-radius:12px;background:#fff1af;display:grid;place-items:center;font-size:1.4rem;margin-bottom:45px}.guide>span{font-size:.67rem;letter-spacing:.12em;font-weight:800;color:#8a949d}.guide h3{font-size:1.35rem;margin:7px 0}.guide p{color:var(--muted);font-size:.9rem;margin:0}.guide strong{margin-top:auto;font-size:.82rem}
.project-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.project-copy p{color:var(--muted);max-width:470px;margin:25px 0 28px}.project-list{border-top:1px solid var(--line)}.project-list a{display:grid;grid-template-columns:45px 1fr 20px;align-items:center;gap:14px;padding:22px 5px;border-bottom:1px solid var(--line);text-decoration:none}.project-list a:hover{background:#fafbfb}.project-list> a>span{color:#9ba4ac;font-size:.7rem}.project-list b{display:block}.project-list small{display:block;color:#8a949d;margin-top:3px;font-size:.74rem}
.cta{max-width:1360px;margin:0 auto 55px;border-radius:18px;background:var(--dark);color:#fff;padding:55px 60px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.045em;margin:8px 0}.cta p{color:#aeb8bf;max-width:650px;margin:0}.cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.cta-link{color:#fff;text-decoration:none;font-weight:700}.primary.light{background:var(--yellow);color:#111820;white-space:nowrap}
footer{max-width:1360px;margin:auto;border-top:1px solid var(--line);padding:38px 28px 48px;display:grid;grid-template-columns:1.35fr 1fr 1.15fr 1fr;gap:55px;color:#75818b;font-size:.85rem}footer>div:not(.footer-brand){display:flex;flex-direction:column;gap:8px}footer b{color:var(--ink)}footer a{text-decoration:none}.footer-brand img{width:168px;height:auto;display:block;margin-bottom:10px}.footer-brand p{margin:8px 0;color:#89949d}.footer-social{display:flex;flex-direction:column;gap:8px}.footer-social b{margin-bottom:4px}.footer-social a{display:flex;align-items:center;gap:11px;width:max-content;line-height:1.35;text-decoration:none;color:#75818b}.footer-social a:hover{color:var(--ink)}.footer-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.footer-bottom{max-width:1360px;margin:auto;border-top:1px solid var(--line);padding:16px 28px 22px;display:flex;justify-content:space-between;gap:20px;color:#929ba3;font-size:.72rem}.footer-bottom span:last-child{font-weight:600}
@media(max-width:1150px){.nav{gap:22px}.navlinks{gap:18px}.navlinks a{font-size:.82rem}.brand img{width:150px}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.hero-visual{height:340px}.topic-grid{grid-template-columns:repeat(2,1fr)}.project-section{grid-template-columns:1fr;gap:50px}.cta{margin-left:24px;margin-right:24px}.navlinks{gap:15px}}
@media(max-width:700px){footer{grid-template-columns:1fr 1fr;gap:40px}.footer-brand{grid-column:1/-1}.navlinks{display:none}.menu{display:block}.hero-inner{padding-top:58px}.hero h1{font-size:3.4rem}.hero-visual{height:300px}.board{width:210px;height:260px}.orb{width:260px;height:260px}.chip{width:60px;height:60px;margin-top:20px}.c1{right:0}.c2{left:0}.section{padding:75px 24px}.section-top{display:block}.section-top>p{margin-top:20px}.guide-grid{grid-template-columns:1fr}.cta{display:block;padding:40px 30px}.cta .primary{margin-top:28px}footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:480px){footer{grid-template-columns:1fr;gap:28px}.footer-brand{grid-column:auto}.topic-grid{grid-template-columns:1fr}.hero h1{font-size:2.9rem}.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stats div{padding:0 0 0 15px}.hero-visual{height:270px}.board{width:175px;height:220px}.circuit{font-size:.6rem}.c2{bottom:20px}.c1{top:10px}.footer-bottom{display:block}.footer-bottom span{display:block}.footer-bottom span+span{margin-top:5px}}

.navlinks a:focus-visible,.primary:focus-visible,.secondary:focus-visible,.viewall:focus-visible,.cta-link:focus-visible,.brand:focus-visible,.menu:focus-visible{outline:3px solid #ffc928;outline-offset:4px;border-radius:6px}
@media(max-width:700px){.nav{min-height:72px;padding:10px 20px}.brand img{width:145px}.navlinks.mobile-open{display:flex;position:absolute;top:72px;left:0;right:0;padding:18px 20px 22px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 18px 35px #18242d12;flex-direction:column;align-items:stretch;gap:0}.navlinks.mobile-open a{padding:12px 4px;border-bottom:1px solid #eef1f3;white-space:normal}.navlinks.mobile-open .nav-cta{margin-top:10px;text-align:center;border-bottom:0}}


/* Responsive shared header: keep branding visible and make the menu control unmistakable. */
.header{display:block!important;visibility:visible!important;min-height:83px}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:18px}
.brand{display:flex!important;visibility:visible!important;flex:0 0 auto}
.brand img{display:block!important;width:168px;max-width:42vw;height:auto}
.menu{display:none;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;min-height:44px;padding:7px 12px;border:1px solid #dce2e7;border-radius:8px;background:#fff;color:#101820;font-size:1.35rem;line-height:1;position:relative;z-index:32}
@media(max-width:1300px){
  .nav{padding-left:24px;padding-right:24px;gap:16px}
  .navlinks{display:none!important}
  .menu{display:flex!important}
  .navlinks.mobile-open{display:flex!important;position:absolute;top:100%;left:0;right:0;z-index:31;padding:14px 24px 20px;background:#fff;border:1px solid #e5e9ed;border-top:0;box-shadow:0 18px 35px #18242d12;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100vh - 90px);overflow-y:auto}
  .navlinks.mobile-open a{display:block;padding:10px 4px;border-bottom:1px solid #eef1f3;white-space:normal}
  .navlinks.mobile-open .nav-cta{margin-top:10px;text-align:center;border-bottom:0}
}
@media(min-width:1301px){
  .nav{max-width:1720px;gap:18px;padding-left:28px;padding-right:28px}
  .brand img{width:168px;max-width:none}
  .navlinks{display:flex!important;gap:clamp(10px,1.05vw,18px);flex:1;min-width:0}
  .navlinks a{font-size:clamp(.74rem,.82vw,.9rem)}
  .menu{display:none!important}
}
@media(max-width:480px){
  .nav{min-height:72px;padding:10px 16px}
  .brand img{width:145px}
  .navlinks.mobile-open{padding-left:18px;padding-right:18px}
}