:root {
  --bg: #070a0c;
  --panel: #0b0f12;
  --panel2: #10151a;
  --line: rgba(255,255,255,.13);
  --line2: rgba(255,255,255,.08);
  --text: #f4f6f8;
  --muted: #9ca5ae;
  --lime: #a8ff00;
  --lime2: #7ee900;
  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --radius: 22px;
  --max: 1280px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 22%, rgba(168,255,0,.08), transparent 27rem),
    radial-gradient(circle at 18% 38%, rgba(255,255,255,.025), transparent 22rem),
    linear-gradient(180deg,#080b0e 0%,#06090b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body:before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width:100%; display:block; }
.shell { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.nav {
  height:94px; display:flex; align-items:center; justify-content:space-between; gap:28px;
  border-bottom:1px solid var(--line2);
}
.brand { font-size:23px; font-weight:1000; letter-spacing:-1.2px; white-space:nowrap; }
.brand b { color:var(--lime); }
.navlinks { display:flex; gap:38px; align-items:center; }
.navlinks a { font-size:12px; letter-spacing:.12em; color:#d7dce1; text-transform:uppercase; transition:.2s; }
.navlinks a:hover { color:var(--lime); }
.nav-cta, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 27px;
  border-radius:999px; border:1px solid var(--line); background:rgba(11,15,18,.72); color:#fff;
  text-transform:uppercase; font-size:12px; font-weight:900; letter-spacing:.06em; transition:.22s ease;
}
.nav-cta { min-height:42px; border-color:rgba(168,255,0,.72); padding:0 23px; }
.btn:hover, .nav-cta:hover { transform:translateY(-2px); border-color:var(--lime); box-shadow:0 12px 35px rgba(168,255,0,.10); }
.btn.primary { background:var(--lime); color:#060808; border-color:var(--lime); box-shadow:0 0 35px rgba(168,255,0,.18); }
.btn.primary:hover { background:#b5ff20; box-shadow:0 0 42px rgba(168,255,0,.30); }
.hero {
  display:grid; grid-template-columns:minmax(0, .88fr) minmax(510px, 1.12fr); gap:24px; align-items:center;
  padding:60px 0 44px; min-height:590px;
}
.eyebrow { font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#b9c1ca; margin-bottom:24px; }
.eyebrow i { color:var(--lime); font-style:normal; }
h1 { margin:0; font-size:clamp(64px, 6.4vw, 103px); line-height:.89; letter-spacing:-.065em; font-weight:1000; max-width:690px; }
h1 .accent { color:var(--lime); display:block; }
.hero-copy p { max-width:570px; color:#c3c9cf; font-size:18px; line-height:1.65; margin:28px 0 30px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.visual-wrap { position:relative; min-height:470px; display:flex; align-items:center; justify-content:flex-end; }
.visual-wrap:before { content:""; position:absolute; width:68%; height:48%; right:7%; top:18%; background:rgba(168,255,0,.11); filter:blur(75px); border-radius:50%; }
.hero-visual {
  position:relative; width:min(100%, 760px); border-radius:24px; border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow); transform:perspective(1400px) rotateY(-4deg) rotateX(1deg); transform-origin:center;
}
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:8px 0 42px; }
.stat { min-height:102px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(17,22,27,.8),rgba(8,11,13,.88)); border-radius:18px; padding:22px; display:flex; align-items:center; gap:18px; }
.stat-icon { width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--lime);font-size:27px;border:1px solid rgba(168,255,0,.25);background:rgba(168,255,0,.04); }
.stat strong { display:block; font-size:28px; line-height:1; }
.stat span { display:block; color:var(--muted); font-size:13px; margin-top:8px; }
.process { padding:12px 0 90px; }
.section-title { display:flex; align-items:center; gap:20px; justify-content:center; font-size:25px; font-weight:1000; text-transform:uppercase; margin:15px 0 34px; }
.section-title:before,.section-title:after { content:""; width:150px; height:1px; background:var(--line); }
.section-title b { color:var(--lime); }
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.step { position:relative; text-align:center; }
.step:not(:last-child):after { content:"→"; position:absolute; right:-18px; top:36px; color:#65717b; font-size:26px; }
.step-icon { width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:linear-gradient(180deg,#11171c,#080b0e);font-size:28px;box-shadow:0 18px 40px rgba(0,0,0,.25); }
.step .n { color:var(--lime); font-size:20px; font-weight:1000; margin-bottom:9px; }
.step h3 { font-size:15px; margin:0 0 8px; }
.step p { color:#79838c; font-size:13px; line-height:1.45; margin:0 auto; max-width:180px; }
.page-head { padding:90px 0 48px; max-width:850px; }
.page-head h1 { font-size:clamp(54px,7vw,96px); }
.page-head p { color:var(--muted); font-size:19px; line-height:1.7; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:90px; }
.card { border:1px solid var(--line); background:linear-gradient(180deg,#0e1317,#080b0d); border-radius:20px; overflow:hidden; }
.card-body { padding:22px; }
.card h3 { font-size:21px; margin:0 0 8px; }
.card p { color:var(--muted); line-height:1.6; }
.project-img { aspect-ratio:16/10; object-fit:cover; width:100%; background:#111; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.chip { border:1px solid var(--line); padding:7px 10px; border-radius:999px; font-size:11px; color:#c1c8ce; }
.form-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; padding:70px 0 100px; }
.form-card { border:1px solid var(--line); background:rgba(10,14,17,.9); padding:28px; border-radius:22px; }
.field { display:grid; gap:8px; margin-bottom:16px; }
.field label { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#b4bdc5; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:13px; background:#080b0e; color:#fff; padding:14px 15px; outline:none; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:rgba(168,255,0,.65); box-shadow:0 0 0 3px rgba(168,255,0,.06); }
.field textarea { min-height:130px; resize:vertical; }
.form-msg { margin-top:14px; color:#c8d0d7; min-height:24px; }
.footer { border-top:1px solid var(--line2); padding:32px 0 44px; color:#727c85; font-size:12px; display:flex; justify-content:space-between; gap:20px; }
@media (max-width:1050px) {
  .navlinks { display:none; }
  .hero { grid-template-columns:1fr; padding-top:42px; }
  .visual-wrap { min-height:0; justify-content:center; }
  .hero-visual { transform:none; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step:not(:last-child):after { display:none; }
  .grid { grid-template-columns:repeat(2,1fr); }
  .form-wrap { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .shell { width:min(100% - 28px,var(--max)); }
  .nav { height:74px; }
  .nav-cta { font-size:10px; padding:0 14px; }
  .brand { font-size:19px; }
  .hero { padding-top:40px; }
  h1 { font-size:54px; }
  .hero-copy p { font-size:16px; }
  .actions .btn { width:100%; }
  .stats,.steps,.grid { grid-template-columns:1fr; }
  .section-title:before,.section-title:after { width:45px; }
  .visual-wrap { margin-top:8px; }
  .hero-visual { border-radius:16px; }
  .footer { flex-direction:column; }
}

/* HACKER_WEB_ABOUT_HERO_IMAGE_SIZE_V1 */
img[src*="about-hero-flat.webp"]{
  width:min(100%, 760px) !important;
  max-width:760px !important;
  height:auto !important;
  display:block !important;
}

@media (min-width: 1200px){
  img[src*="about-hero-flat.webp"]{
    width:min(100%, 860px) !important;
    max-width:860px !important;
  }
}
/* /HACKER_WEB_ABOUT_HERO_IMAGE_SIZE_V1 */