@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #050505;
  --surface: #0c0c0c;
  --surface-2: #111;
  --line: rgba(255,255,255,.10);
  --muted: #9b9b9b;
  --white: #f5f5f5;
  --green: #27c93f;
  --yellow: #ffc400;
  --blue: #2867e8;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--white); font-family: Inter, sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 48px)); margin: auto; }

.header { position: fixed; z-index: 100; top: 0; width: 100%; border-bottom: 1px solid transparent; transition: .3s; }
.header.scrolled { background: rgba(5,5,5,.88); backdrop-filter: blur(18px); border-color: var(--line); }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: "Space Grotesk", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -2px; }
.brand-cmd { color: #fff; }
.brand-bras { background: linear-gradient(90deg,var(--green) 0 38%,var(--yellow) 38% 67%,var(--blue) 67%); color: transparent; background-clip: text; -webkit-background-clip: text; margin-left: 5px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #c9c9c9; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-cta { border: 1px solid var(--line); padding: 10px 16px; border-radius: 5px; color: #fff !important; }
.menu-toggle { display: none; background: none; border: 0; width: 34px; }
.menu-toggle span { display: block; height: 2px; background: #fff; margin: 6px 0; }

.hero { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero:after { content:""; position:absolute; width:600px; height:600px; right:-250px; top:15%; background: radial-gradient(circle, rgba(40,103,232,.13), transparent 65%); }
.hero-content { position: relative; z-index: 2; padding-top: 60px; }
.eyebrow, .section-label { font-size: 11px; letter-spacing: 3px; font-weight: 700; color: #aaa; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; }
.green { background: var(--green); box-shadow: 0 0 14px rgba(39,201,63,.6); }
.hero h1 { font-family: "Space Grotesk", sans-serif; font-size: clamp(52px, 7vw, 92px); line-height: .98; letter-spacing: -4px; max-width: 900px; margin: 25px 0; }
.hero h1 span, h2 span { color: #8d8d8d; }
.hero-text { color: var(--muted); max-width: 650px; font-size: 17px; }
.hero-actions { display:flex; gap: 12px; margin-top: 34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap: 25px; padding: 14px 19px; border-radius: 4px; font-size: 13px; font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: .25s; }
.btn-primary { background: #fff; color: #050505; }
.btn-primary:hover { transform: translateY(-2px); background: #ddd; }
.btn-secondary { border-color: var(--line); color: #ddd; }
.btn-secondary:hover { border-color: #555; }
.hero-signature { display:flex; align-items:center; gap: 13px; margin-top: 70px; font-size: 10px; letter-spacing: 4px; color:#777; }
.green-text { color:var(--green)!important; } .yellow-text { color:var(--yellow)!important; } .blue-text { color:var(--blue)!important; }
.hero-orbit { position:absolute; border:1px solid rgba(255,255,255,.07); border-radius:50%; }
.orbit-one { width:600px; height:600px; right:-120px; top:10%; }
.orbit-two { width:400px; height:400px; right:-20px; top:22%; border-color:rgba(39,201,63,.12); }

.section { padding: 125px 0; border-top: 1px solid var(--line); }
.section-heading { max-width: 760px; margin-bottom: 60px; }
.section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading h2, .section-top h2, .about-content h2, .contact h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(38px,5vw,62px); line-height:1.03; letter-spacing:-2.5px; margin:17px 0; }
.section-heading p, .section-top > p { color:var(--muted); max-width:620px; }

.pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.pillar-card { background:var(--bg); padding:38px; min-height:410px; position:relative; transition:.3s; }
.pillar-card:hover { background:#0b0b0b; }
.pillar-number { position:absolute; right:28px; top:28px; font-size:11px; letter-spacing:2px; }
.pillar-icon { font-size:40px; font-family:"Space Grotesk"; margin-bottom:70px; }
.pillar-card h3 { font-family:"Space Grotesk"; font-size:29px; margin-bottom:12px; }
.pillar-card p { color:var(--muted); font-size:14px; max-width:320px; }
.pillar-card ul { list-style:none; margin-top:26px; color:#bbb; font-size:12px; }
.pillar-card li { border-top:1px solid var(--line); padding:9px 0; }

.solutions { background:var(--surface); }
.solution-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.solution-item { padding:30px 25px; border-right:1px solid var(--line); min-height:180px; }
.solution-item:last-child { border-right:0; }
.solution-item span { color:#555; font-size:11px; }
.solution-item h3 { font-family:"Space Grotesk"; margin-top:30px; font-size:23px; }
.solution-item p { color:#777; font-size:12px; margin-top:5px; }

.process-list { border-top:1px solid var(--line); }
.process-step { display:grid; grid-template-columns:120px 1fr; padding:34px 0; border-bottom:1px solid var(--line); }
.process-step > span { font-size:12px; color:#666; }
.process-step h3 { font-family:"Space Grotesk"; font-size:23px; }
.process-step p { color:var(--muted); font-size:14px; margin-top:4px; }

.section-top { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:55px; }
.section-top > p { max-width:360px; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.project-card { border:1px solid var(--line); background:var(--surface); }
.project-visual { height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.project-visual:before { content:""; position:absolute; width:230px; height:230px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.project-green { background:radial-gradient(circle,rgba(39,201,63,.18),transparent 62%); }
.project-blue { background:radial-gradient(circle,rgba(40,103,232,.18),transparent 62%); }
.project-yellow { background:radial-gradient(circle,rgba(255,196,0,.13),transparent 62%); }
.project-visual span { font-family:"Space Grotesk"; font-size:45px; font-weight:800; z-index:1; }
.project-visual small { color:#777; letter-spacing:2px; font-size:8px; z-index:1; }
.project-info { padding:24px; }
.project-info > span { font-size:9px; color:#777; letter-spacing:2px; }
.project-info h3 { font-family:"Space Grotesk"; margin:9px 0 5px; }
.project-info p { color:#888; font-size:12px; }

.about { background:#090909; }
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:100px; align-items:center; }
.about-mark { border:1px solid var(--line); aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; }
.about-mark:before { content:""; position:absolute; inset:12%; border:1px solid rgba(39,201,63,.3); border-radius:50%; border-right-color:var(--yellow); border-bottom-color:var(--blue); }
.about-mark span { font-family:"Space Grotesk"; font-weight:800; font-size:70px; z-index:1; }
.about-mark b { font-family:"Space Grotesk"; font-size:38px; background:linear-gradient(90deg,var(--green),var(--yellow),var(--blue)); color:transparent; background-clip:text; z-index:1; }
.about-mark small { margin-top:25px; color:#777; font-size:7px; letter-spacing:2px; z-index:1; }
.about-content p { color:var(--muted); margin:15px 0; max-width:600px; }
.about-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.about-points span { border:1px solid var(--line); padding:8px 12px; font-size:10px; color:#aaa; }

.contact-box { display:grid; grid-template-columns:1fr 1fr; gap:90px; border:1px solid var(--line); padding:70px; background:linear-gradient(120deg,#0b0b0b,#070707); }
.contact h2 { font-size:clamp(40px,5vw,65px); }
.contact-form { display:grid; gap:15px; }
.contact-form label { font-size:10px; letter-spacing:1px; color:#888; }
.contact-form input, .contact-form textarea { display:block; width:100%; margin-top:7px; border:1px solid var(--line); background:#050505; color:#fff; padding:13px; border-radius:3px; outline:none; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#555; }
.contact-form .btn { width:100%; }

.footer { border-top:1px solid var(--line); padding:50px 0 25px; background:#030303; }
.footer-main { display:flex; justify-content:space-between; gap:30px; }
.footer-main p { color:#666; font-size:10px; margin-top:10px; }
.footer-links { display:flex; gap:24px; color:#888; font-size:11px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:45px; padding-top:20px; color:#555; font-size:9px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media(max-width:850px) {
  .container { width:min(var(--max),calc(100% - 32px)); }
  .menu-toggle { display:block; }
  .nav-links { position:absolute; top:78px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; background:#090909; border:1px solid var(--line); padding:15px; gap:0; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:13px; }
  .hero h1 { font-size:52px; letter-spacing:-3px; }
  .hero-orbit { opacity:.4; right:-300px; }
  .pillar-grid,.project-grid { grid-template-columns:1fr; }
  .solution-grid { grid-template-columns:1fr 1fr; }
  .solution-item:nth-child(2) { border-right:0; }
  .solution-item:nth-child(3), .solution-item:nth-child(4) { border-top:1px solid var(--line); }
  .section-top,.footer-main { flex-direction:column; align-items:flex-start; }
  .about-grid,.contact-box { grid-template-columns:1fr; gap:45px; }
  .contact-box { padding:35px 25px; }
  .about-mark { max-width:430px; margin:auto; width:100%; }
}
@media(max-width:520px) {
  .hero h1 { font-size:43px; }
  .hero-text { font-size:15px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-signature { gap:7px; letter-spacing:2px; font-size:7px; }
  .section { padding:90px 0; }
  .solution-grid { grid-template-columns:1fr; }
  .solution-item { border-right:0; border-bottom:1px solid var(--line); }
  .solution-item:nth-child(3) { border-top:0; }
  .process-step { grid-template-columns:55px 1fr; }
  .footer-links { flex-wrap:wrap; }
  .footer-bottom { flex-direction:column; gap:8px; }
}