:root{
  --bg:#080a0c;
  --panel:#0f1215;
  --panel2:#14181c;
  --text:#f4f1ea;
  --muted:#9ca4aa;
  --line:#242a2f;
  --acid:#c8ff4d;
  --shadow:0 24px 80px rgba(0,0,0,.35)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:
    linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:42px 42px
}

a{color:inherit;text-decoration:none}

.wrap{width:min(1180px,calc(100% - 40px));margin:auto}

nav{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:38px;height:38px;border-radius:9px;object-fit:cover}
.brand-word{font-weight:950;letter-spacing:-1.8px;font-size:24px}
.brand-word b{color:var(--acid)}

.navlinks{display:flex;gap:28px;align-items:center;color:#c2c7ca;font-size:14px}
.navlinks a:hover{color:#fff}
.pill{border:1px solid #394047;border-radius:999px;padding:11px 16px;color:#fff!important}

.hero{min-height:730px;display:grid;align-items:center;position:relative;padding:80px 0}

.kicker{
  display:inline-flex;
  gap:9px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:#c3c8cb;
  text-transform:uppercase;
  letter-spacing:.13em
}

.dot{width:7px;height:7px;background:var(--acid);border-radius:50%;box-shadow:0 0 20px var(--acid)}

h1{font-size:clamp(62px,9vw,132px);line-height:.84;letter-spacing:-.075em;margin:28px 0 30px;max-width:1050px}
h1 .ghost{color:#4d555b}
h1 .accent{color:var(--acid)}

.sub{font-size:clamp(18px,2vw,24px);line-height:1.55;color:#b1b8bc;max-width:700px}
.sub strong{color:#fff}

.actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:999px;
  padding:16px 22px;
  font-weight:800;
  font-size:14px;
  border:1px solid var(--line);
  transition:.2s
}

.btn.primary{background:var(--acid);color:#0a0c0e;border-color:var(--acid)}
.btn:hover{transform:translateY(-2px)}

.mini{margin-top:20px;color:#6f777d;font-size:12px}
.mini b{color:#aab0b4}

.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  color:#717a80;
  padding:17px 0;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase
}

.marquee div{display:inline-block;animation:move 26s linear infinite}

@keyframes move{to{transform:translateX(-50%)}}

section{padding:110px 0;border-bottom:1px solid var(--line)}

.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acid);
  font-weight:800
}

h2{font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.055em;margin:18px 0 50px;max-width:900px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.card{
  min-height:350px;
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  display:flex;
  flex-direction:column;
  transition:.25s;
  position:relative;
  overflow:hidden
}

.card:hover{transform:translateY(-5px);border-color:#3b444b}
.card .num{color:#596168;font-size:12px}
.card h3{font-size:34px;letter-spacing:-.04em;margin:auto 0 10px}
.card p{color:#969ea3;line-height:1.6;margin:0 0 22px}
.card .go{font-weight:800;color:var(--acid)}

.problem{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.problem-copy p{color:#9da5aa;font-size:18px;line-height:1.7}

.intake{
  background:#f2f0e9;
  color:#111417;
  border-radius:26px;
  padding:28px;
  box-shadow:var(--shadow)
}

.intake-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.intake-top b{font-size:18px}
.status{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#687077}

label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  color:#697177;
  display:block;
  margin:18px 0 8px
}

/* FIX: make typed form text readable on light fields */
textarea,
input,
select{
  width:100%;
  font:inherit;
  background:#fff;
  color:#111417;
  caret-color:#111417;
  border:1px solid #d8d7d1;
  border-radius:13px;
  padding:14px;
  outline:none
}

/* FIX: consistent placeholder contrast */
textarea::placeholder,
input::placeholder{
  color:#7a7d80;
  opacity:1
}

textarea{min-height:110px;resize:vertical}

textarea:focus,
input:focus,
select:focus{border-color:#9da868}

.upload{
  border:1.5px dashed #b9b9b3;
  border-radius:14px;
  padding:24px;
  text-align:center;
  background:#e9e7e0;
  cursor:pointer;
  transition:.2s
}

.upload:hover{background:#e3e7d6;border-color:#98a55d}
.upload strong{display:block;margin-bottom:5px}
.upload small{color:#72787b}
.file-name{display:block;font-size:12px;margin-top:8px;color:#57601e}

.human-check{
  margin-top:18px;
  padding:16px;
  border:1px solid #d8d7d1;
  border-radius:14px;
  background:#fff
}

.human-check label{margin:0 0 10px}
.human-note{font-size:11px;color:#737a7e;line-height:1.45;margin-top:8px}
.turnstile-box{min-height:18px;font-size:12px;color:#6f777d}

.submit{
  width:100%;
  margin-top:20px;
  border:0;
  border-radius:13px;
  background:#111417;
  color:#fff;
  padding:16px;
  font-weight:900;
  font-size:14px;
  cursor:pointer
}

.submit:disabled{opacity:.55;cursor:not-allowed}
.submit:hover:not(:disabled){background:#20262b}
.form-message{min-height:18px;font-size:12px;margin-top:10px;color:#44511e}

.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:42px}
.quote{border:1px solid var(--line);border-radius:18px;padding:25px;color:#a8afb3}
.quote b{display:block;color:#fff;margin-bottom:8px}

.rule{font-size:clamp(44px,7vw,96px);font-weight:900;letter-spacing:-.065em;line-height:.95}
.rule span{color:var(--acid)}

footer{padding:44px 0;color:#697177}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot b{color:#e9e6df}

.trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.optional{font-weight:400}

@media(max-width:820px){
  .navlinks a:not(.pill){display:none}
  .hero{min-height:650px}
  .grid3,.problem,.examples{grid-template-columns:1fr}
  section{padding:80px 0}
  .problem{gap:30px}
  .card{min-height:270px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee div{animation:none}
  .btn,.card{transition:none}
}

/* ---- Cross-browser + mobile hardening ---- */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:280px;overflow-wrap:anywhere}

button,input,textarea{font-family:inherit}

button,.btn,.pill,.upload{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button,.btn,.pill{min-height:44px}
input,textarea{min-width:0}
img{max-width:100%;height:auto}

.brand{min-width:0}
.brand-icon{flex:0 0 auto}

.brand-wordmark{
  display:block;
  width:170px;
  max-width:42vw;
  height:auto;
  object-fit:contain;
  object-position:left center
}

.wrap{
  padding-left:max(0px,env(safe-area-inset-left));
  padding-right:max(0px,env(safe-area-inset-right))
}

footer{padding-bottom:max(44px,calc(24px + env(safe-area-inset-bottom)))}

@supports (min-height:100svh){
  .hero{min-height:calc(100svh - 78px)}
}

@media(max-width:820px){
  .wrap{width:min(100% - 28px,1180px)}
  nav{height:70px}
  .brand-wordmark{width:145px;max-width:44vw}
  .navlinks{gap:10px}
  .navlinks .pill{padding:10px 13px;white-space:nowrap}
  .hero{min-height:600px;padding:62px 0}
  h1{font-size:clamp(50px,15.2vw,90px);letter-spacing:-.065em;line-height:.88}
  .sub{font-size:18px}
  textarea,input{font-size:16px}
  .intake{padding:24px}
}

@media(max-width:520px){
  .wrap{width:min(100% - 22px,1180px)}
  nav{height:64px}
  .brand{gap:7px}
  .brand-icon{width:33px;height:33px}
  .brand-wordmark{width:118px;max-width:40vw}
  .navlinks .pill{font-size:12px;padding:9px 11px}
  .hero{min-height:540px;padding:48px 0}
  .kicker{font-size:10px;letter-spacing:.09em;max-width:100%;white-space:normal}
  h1{font-size:clamp(44px,15vw,72px);letter-spacing:-.06em}
  .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .btn{justify-content:center;width:100%}
  section{padding:68px 0}
  h2{font-size:clamp(36px,11.5vw,56px);margin-bottom:34px}
  .card{min-height:235px;padding:24px}
  .intake{border-radius:20px;padding:20px}
  .examples{grid-template-columns:1fr}
  .quote{padding:20px}
  .upload{padding:20px 14px}
  .rule{font-size:clamp(39px,12vw,64px)}
}

@media(max-width:360px){
  .brand-wordmark{display:none}
  .navlinks .pill{font-size:11px}
  h1{font-size:clamp(42px,15vw,56px)}
  .sub{font-size:17px}
  .intake{padding:17px}
}

@media(hover:none){
  .card:hover,.btn:hover{transform:none}
}

@media(prefers-contrast:more){
  :root{--muted:#c0c6ca;--line:#4a5359}
}

@media print{
  .marquee,.navlinks,.actions,.human-check{display:none!important}
  body{background:#fff;color:#000}
}

/* SEO / service landing pages */

.seo-local{background:linear-gradient(180deg,#0a0d0f,#080a0c)}

.seo-link-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:36px
}

.seo-link-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  background:var(--panel);
  transition:.2s
}

.seo-link-card:hover{border-color:#4a5359;transform:translateY(-2px)}
.seo-link-card b{font-size:20px;color:#fff}
.seo-link-card span{color:#929ba0;line-height:1.55}

.page-hero{padding:92px 0 72px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(48px,7vw,92px);line-height:.95;margin:18px 0 24px}

.breadcrumbs{font-size:12px;color:#778087;margin-bottom:24px}
.breadcrumbs a{color:#aab1b6}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:54px;
  align-items:start
}

.prose{max-width:780px}
.prose h2{font-size:clamp(32px,4vw,52px);margin-top:0;margin-bottom:22px}
.prose h3{font-size:24px;margin:34px 0 12px}
.prose p,.prose li{color:#a7afb4;font-size:17px;line-height:1.75}
.prose ul{padding-left:20px}

.side-cta{
  position:sticky;
  top:24px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  background:var(--panel)
}

.side-cta h3{margin:0 0 12px;font-size:25px}
.side-cta p{color:#9ca4aa;line-height:1.6}
.side-cta .btn{width:100%;justify-content:center;margin-top:10px}

.faq{border-top:1px solid var(--line);padding:22px 0}
.faq h3{font-size:21px;margin:0 0 8px}
.faq p{margin:0}

@media(max-width:900px){
  .seo-link-grid,.content-grid{grid-template-columns:1fr}
  .side-cta{position:static}
}

@media(max-width:520px){
  .seo-link-grid{grid-template-columns:1fr}
  .page-hero{padding:62px 0 50px}
}


/* ---- Hackdini form text visibility hard-fix ---- */
.intake textarea,
.intake input,
.intake select {
  color: #111417 !important;
  -webkit-text-fill-color: #111417 !important;
  caret-color: #111417 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.intake textarea::placeholder,
.intake input::placeholder {
  color: #7a7d80 !important;
  -webkit-text-fill-color: #7a7d80 !important;
  opacity: 1 !important;
}

.intake textarea:focus,
.intake input:focus,
.intake select:focus {
  color: #111417 !important;
  -webkit-text-fill-color: #111417 !important;
}


/* ---- Hackdini intake stability patch ---- */
.intake {
  color-scheme: light;
}

.intake textarea,
.intake input:not([type="file"]):not([type="hidden"]),
.intake select {
  color-scheme: light;
  color: #111417 !important;
  -webkit-text-fill-color: #111417 !important;
  caret-color: #111417 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  appearance: none;
  -webkit-appearance: none;
}

.intake textarea::placeholder,
.intake input::placeholder {
  color: #7a7d80 !important;
  -webkit-text-fill-color: #7a7d80 !important;
  opacity: 1 !important;
}

.intake textarea:disabled,
.intake input:disabled,
.intake select:disabled {
  color: #6d7377 !important;
  -webkit-text-fill-color: #6d7377 !important;
  background: #f2f2ef !important;
  opacity: 1 !important;
}

.upload,
.human-check,
.submit {
  color-scheme: light;
}