@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Barlow:wght@300;400;500&family=Share+Tech+Mono&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:         #111f13;
  --bg2:        #172019;
  --bg3:        #1e2b20;
  --border:     rgba(0,229,53,0.2);
  --green:      #00e535;
  --green-hex:  #1a9e30;
  --green-dim:  rgba(0,229,53,0.12);
  --text:       #dff5e3;
  --text-mid:   #8db898;
  --text-dim:   #4d7a57;
  --white:      #f0faf2;
  --font-head:  'Orbitron', sans-serif;
  --font-body:  'Barlow', sans-serif;
  --font-mono:  'Share Tech Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Hex grid */
.hex-bg {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='121'%3E%3Cpath d='M35 2 L68 20 L68 56 L35 74 L2 56 L2 20 Z' fill='none' stroke='rgba(0,229,53,0.07)' stroke-width='1'/%3E%3Cpath d='M35 76 L68 94 L68 130 L35 148 L2 130 L2 94 Z' fill='none' stroke='rgba(0,229,53,0.07)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
  pointer-events: none; z-index: 0;
}

section, nav, footer { position: relative; z-index: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

.cursor { animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes fadeUp { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes spinSlow { to{transform:rotate(360deg);} }

/* ── NAV ── */
nav { position: fixed; top:0; left:0; right:0; z-index:100; border-bottom: 1px solid transparent; transition: all 0.4s ease; }
nav.scrolled { background: rgba(17,31,19,0.96); backdrop-filter: blur(12px); border-bottom-color: var(--border); }
.nav-inner { max-width:1100px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo svg { width:30px; height:30px; }
.nav-logo-text { font-family:var(--font-head); font-weight:900; font-size:17px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); }
.nav-logo-text em { font-style:normal; color:var(--green-hex); }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-mid); text-decoration:none; transition:color 0.2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:var(--green); transform:scaleX(0); transition:transform 0.25s ease; }
.nav-links a:hover { color:var(--green); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta { color:var(--green) !important; border:1px solid rgba(0,229,53,0.3) !important; padding:8px 18px; }
.nav-cta:hover { background:var(--green-dim) !important; border-color:rgba(0,229,53,0.6) !important; }
.nav-cta::after { display:none !important; }

/* ── HERO ── */
#hero { min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1100px; margin:0 auto; padding:0 32px; }
.hero-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.32em; text-transform:uppercase; color:var(--text-dim); margin-bottom:20px; display:flex; align-items:center; gap:10px; animation:fadeUp 0.7s ease 0.1s both; }
.hero-tag::before { content:''; display:inline-block; width:20px; height:1px; background:var(--green); opacity:0.5; }
.hero-headline { font-family:var(--font-head); font-weight:900; font-size:clamp(44px,5vw,68px); letter-spacing:0.03em; text-transform:uppercase; line-height:1; color:var(--white); margin-bottom:28px; animation:fadeUp 0.7s ease 0.2s both; }
.hero-headline .accent { color:var(--green-hex); }
.hero-headline .outline { -webkit-text-stroke:1px rgba(240,250,242,0.25); color:transparent; }
.hero-body { font-size:19px; font-weight:300; color:var(--text-mid); max-width:440px; line-height:1.8; margin-bottom:40px; animation:fadeUp 0.7s ease 0.35s both; }
.hero-actions { display:flex; align-items:center; gap:20px; animation:fadeUp 0.7s ease 0.5s both; }
.hero-prompt { margin-top:28px; font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em; color:var(--text-dim); animation:fadeUp 0.7s ease 0.65s both; }
.btn-primary { font-family:var(--font-mono); font-size:14px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bg); background:var(--green); border:1px solid var(--green); padding:13px 26px; text-decoration:none; transition:all 0.25s ease; display:inline-block; }
.btn-primary:hover { background:transparent; color:var(--green); }
.btn-ghost { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-mid); border:1px solid var(--border); padding:13px 26px; text-decoration:none; transition:all 0.25s ease; display:inline-block; }
.btn-ghost:hover { color:var(--green); border-color:rgba(0,229,53,0.4); }

.hero-mark { display:flex; align-items:center; justify-content:center; animation:fadeIn 1s ease 0.5s both; }
.hero-mark-frame { position:relative; padding:28px; }
.hero-mark-frame::before,.hero-mark-frame::after { content:''; position:absolute; width:22px; height:22px; border-color:rgba(0,229,53,0.22); border-style:solid; }
.hero-mark-frame::before { top:0; left:0; border-width:2px 0 0 2px; }
.hero-mark-frame::after { bottom:0; right:0; border-width:0 2px 2px 0; }
.frame-corner-tr,.frame-corner-bl { position:absolute; width:22px; height:22px; border-color:rgba(0,229,53,0.22); border-style:solid; }
.frame-corner-tr { top:0; right:0; border-width:2px 2px 0 0; }
.frame-corner-bl { bottom:0; left:0; border-width:0 0 2px 2px; }
.hero-mark-frame svg { width:min(360px,100%); height:auto; display:block; }
.hex-spin-slow { animation:spinSlow 40s linear infinite; transform-origin:200px 200px; }

/* ── SHARED SECTION STYLES ── */
.section-eyebrow { font-family:var(--font-mono); font-size:9px; letter-spacing:0.38em; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.section-eyebrow::before { content:''; width:16px; height:1px; background:var(--green); opacity:0.5; display:inline-block; flex-shrink:0; }
.section-title { font-family:var(--font-head); font-weight:900; font-size:clamp(32px,3.5vw,48px); letter-spacing:0.04em; text-transform:uppercase; color:var(--white); line-height:1.05; margin-bottom:18px; }
.section-title .accent { color:var(--green-hex); }
.section-body { font-size:19px; font-weight:300; color:var(--text-mid); max-width:520px; line-height:1.8; }

/* ── SERVICES ── */
#services { padding:120px 0; border-top:1px solid var(--border); }
.services-header { margin-bottom:56px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.service-card { background:var(--bg2); border:1px solid var(--border); padding:44px 36px; position:relative; overflow:hidden; transition:border-color 0.3s ease,background 0.3s ease; cursor:default; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform 0.35s ease; }
.service-card::after { content:attr(data-num); position:absolute; bottom:-8px; right:14px; font-family:var(--font-head); font-weight:900; font-size:88px; color:rgba(0,229,53,0.05); line-height:1; pointer-events:none; transition:color 0.3s; letter-spacing:0; }
.service-card:hover { border-color:rgba(0,229,53,0.3); background:var(--bg3); }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover::after { color:rgba(0,229,53,0.09); }
.service-icon { width:44px; height:44px; margin-bottom:24px; }
.service-icon svg { width:100%; height:100%; }
.service-name { font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:0.08em; text-transform:uppercase; color:var(--white); margin-bottom:14px; line-height:1.2; }
.service-desc { font-size:18px; font-weight:300; color:var(--text-mid); line-height:1.75; margin-bottom:24px; }
.service-list { list-style:none; display:flex; flex-direction:column; gap:7px; }
.service-list li { font-family:var(--font-mono); font-size:14px; letter-spacing:0.14em; color:#6a9a74; display:flex; align-items:center; gap:8px; transition:color 0.2s; }
.service-list li::before { content:''; width:4px; height:4px; background:var(--green); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); flex-shrink:0; opacity:0.5; }
.service-card:hover .service-list li { color:var(--text-mid); }

/* ── ABOUT ── */
#about { padding:120px 0; border-top:1px solid var(--border); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:44px; }
.stat-box { background:var(--bg2); border:1px solid var(--border); padding:24px 22px; position:relative; }
.stat-box::before { content:''; position:absolute; top:0; left:0; border-style:solid; border-width:8px 8px 0 0; border-color:rgba(0,229,53,0.25) transparent transparent transparent; }
.stat-num { font-family:var(--font-head); font-weight:900; font-size:34px; letter-spacing:0.04em; color:var(--green); line-height:1; margin-bottom:6px; }
.stat-label { font-family:var(--font-mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-dim); }
.about-visual { display:flex; align-items:center; justify-content:center; }
.about-visual svg { width:100%; max-width:360px; height:auto; }
.hex-orbit { animation:spinSlow 50s linear infinite reverse; transform-origin:180px 180px; }

/* ── APPROACH ── */
#approach { padding:120px 0; border-top:1px solid var(--border); background:linear-gradient(180deg,transparent 0%,rgba(0,229,53,0.025) 50%,transparent 100%); }
.approach-header { text-align:center; margin-bottom:72px; }
.approach-header .section-eyebrow { justify-content:center; }
.approach-header .section-eyebrow::before { display:none; }
.approach-header .section-title { margin:0 auto 18px; }
.approach-header .section-body { margin:0 auto; text-align:center; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:0; }
.process-steps::before { content:''; position:absolute; top:27px; left:calc(12.5% + 14px); right:calc(12.5% + 14px); height:1px; background:linear-gradient(to right,rgba(0,229,53,0.35),rgba(0,229,53,0.06)); z-index:0; }
.step { padding:0 20px; position:relative; z-index:1; }
.step-num { width:54px; height:54px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:16px; color:var(--green); margin-bottom:22px; position:relative; transition:all 0.3s ease; }
.step-num::before { content:''; position:absolute; top:0; left:0; border-style:solid; border-width:7px 7px 0 0; border-color:rgba(0,229,53,0.25) transparent transparent transparent; }
.step:hover .step-num { background:var(--green-dim); border-color:rgba(0,229,53,0.4); }
.step-title { font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); margin-bottom:10px; }
.step-desc { font-size:17px; font-weight:300; color:var(--text-mid); line-height:1.7; }

/* ── CONTACT ── */
#contact { padding:120px 0; border-top:1px solid var(--border); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-family:var(--font-mono); font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--text-dim); }
.form-group input,.form-group select,.form-group textarea { background:var(--bg2); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:18px; font-weight:300; padding:11px 14px; outline:none; transition:border-color 0.2s ease; appearance:none; -webkit-appearance:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:rgba(0,229,53,0.4); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-dim); font-family:var(--font-mono); font-size:15px; letter-spacing:0.1em; }
.form-group select option { background:var(--bg2); color:var(--text); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-submit { margin-top:6px; }
.confidentiality { background:var(--bg2); border:1px solid var(--border); border-left:2px solid rgba(0,229,53,0.4); padding:16px 18px; margin-top:6px; }
.confidentiality p { font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; color:var(--text-dim); line-height:1.7; }
.confidentiality p strong { color:rgba(0,229,53,0.65); font-weight:500; }
.contact-info { display:flex; flex-direction:column; gap:0; padding-top:8px; }
.contact-detail { display:flex; flex-direction:column; gap:5px; padding:24px 0; border-bottom:1px solid var(--border); }
.contact-detail:first-child { padding-top:0; }
.contact-detail:last-child { border-bottom:none; }
.contact-detail-label { font-family:var(--font-mono); font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-dim); }
.contact-detail-value { font-family:var(--font-head); font-weight:700; font-size:20px; letter-spacing:0.05em; color:var(--white); }
.contact-detail-sub { font-size:17px; font-weight:300; color:var(--text-mid); line-height:1.65; }

/* ── FOOTER ── */
footer { border-top:1px solid var(--border); padding:36px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-logo { display:flex; align-items:center; gap:10px; }
.footer-logo-text { font-family:var(--font-head); font-weight:900; font-size:14px; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-mid); }
.footer-logo-text em { font-style:normal; color:var(--green-hex); }
.footer-copy { font-family:var(--font-mono); font-size:8px; letter-spacing:0.2em; color:var(--text-dim); text-transform:uppercase; }
.footer-links { display:flex; gap:24px; list-style:none; }
.footer-links a { font-family:var(--font-mono); font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--green); }

/* ── REVEAL ── */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.hidden { opacity:0; transform:translateY(28px); }
.reveal.hidden.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:60px; }
  .hero-mark { display:none; }
  .services-grid { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; gap:60px; }
  .about-visual { display:none; }
  .process-steps { grid-template-columns:1fr 1fr; gap:40px; }
  .process-steps::before { display:none; }
  .contact-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
}