/* TractGo — site de prezentare.
   Lumea din care vin culorile: asfaltul noaptea, vopseaua de marcaj rutier, girofarul
   platformei (chihlimbarul din aplicatie) si portocaliul reflectorizant al triunghiului. */
:root{
  --asfalt:#1C1F24;
  --asfalt-2:#252930;
  --asfalt-3:#15171B;
  --dunga:#353B45;
  --marcaj:#F1EEE4;
  --girofar:#FFB300;
  --reflect:#FF5A1F;
  --beton:#A0A7B2;
  --text:#EEF0F3;
  --gutter:16px;
  --max:1160px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
}
@media (min-width:720px){ :root{ --gutter:32px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--asfalt);color:var(--text);font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--girofar)}
:focus-visible{outline:3px solid var(--girofar);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;line-height:1.08}
h3{font-size:1.18rem;font-weight:700;line-height:1.25}
p{margin:0}
main > section{padding:clamp(56px,9vw,112px) var(--gutter);max-width:var(--max);margin:0 auto}

/* ── butoane ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  border-radius:14px;background:var(--girofar);color:#1b1500;font:700 16.5px/1 var(--display);
  text-decoration:none;border:2px solid var(--girofar);transition:background .15s,color .15s}
.btn:hover{background:#ffc53d;border-color:#ffc53d}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--dunga)}
.btn-ghost:hover{background:var(--asfalt-2);border-color:var(--beton)}
.btn-small{min-height:40px;padding:0 16px;font-size:14.5px;border-radius:11px}

/* ── antet ───────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--max);margin:0 auto;padding:18px var(--gutter)}
.mark{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;
  font:800 23px/1 var(--display);letter-spacing:-.03em}
.mark b{font-weight:800}
.mark span,.foot-brand span{color:var(--girofar)}
.tri{width:24px;height:22px}
.tri path:first-child{fill:var(--reflect)}
.tri path:last-child{fill:var(--asfalt)}
.top-nav{display:flex;align-items:center;gap:20px}
.top-nav > a:not(.btn){color:var(--beton);text-decoration:none;font-weight:500;font-size:15px}
.top-nav > a:not(.btn):hover{color:var(--text)}
@media (max-width:480px){ .top-nav > a:not(.btn){display:none} }

/* ── hero ────────────────────────────────────────────── */
.hero{display:grid;gap:40px;align-items:center;padding-top:clamp(24px,5vw,64px) !important}
@media (min-width:960px){ .hero{grid-template-columns:1.05fr 1fr;gap:56px} }
.hero h1{font-size:clamp(2.5rem,6.4vw,4.7rem);font-weight:800;line-height:1.01;letter-spacing:-.035em;
  max-width:15ch;text-wrap:balance}
.lede{margin-top:22px;font-size:clamp(1.06rem,1.6vw,1.2rem);color:#d5d9df;max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:22px;font-size:14px;color:var(--beton);max-width:36em}

/* ecranele reale din aplicatie, in rame de telefon */
.phone{position:relative;margin:0;width:min(290px,70vw);aspect-ratio:390/844;padding:9px;border-radius:44px;
  background:#0a0b0d;box-shadow:inset 0 0 0 1.5px #3b414b,0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:36px;background:var(--asfalt-2)}
.phone::before{content:"";position:absolute;top:17px;left:50%;width:76px;height:20px;margin-left:-38px;
  border-radius:12px;background:#0a0b0d;z-index:1}

.hero-visual{position:relative;display:grid;place-items:center;min-height:540px}
.hero-visual .phone-front{position:relative;z-index:2;transform:translateX(12%)}
.hero-visual .phone-back{position:absolute;z-index:1;width:min(250px,60vw);
  transform:translate(-42%,6%) rotate(-7deg);opacity:.92}
/* girofarul: lumina chihlimbarie din spatele ecranelor. Clipeste de doua ori la incarcare,
   apoi ramane aprinsa — singura miscare care nu e ceruta de om */
.beacon-glow{position:absolute;inset:-6% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 58% 42%,rgba(255,179,0,.36),rgba(255,140,0,.12) 55%,transparent 75%);
  animation:girofar 1.6s ease-in-out .3s 2 both}
@keyframes girofar{0%{opacity:.25}35%{opacity:1}60%{opacity:.35}100%{opacity:.85}}
@media (prefers-reduced-motion:reduce){ .beacon-glow{animation:none;opacity:.85} }
@media (max-width:640px){
  .hero-visual{min-height:0;padding:10px 0 0}
  .hero-visual .phone-front{transform:none}
  .hero-visual .phone-back{display:none}
}

/* ── pasii: un drum cu trei borne ────────────────────── */
.steps h2{max-width:16ch}
.road-steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:34px;counter-reset:pas;position:relative}
.road-steps li{position:relative;padding-left:68px;counter-increment:pas}
.road-steps li::before{content:counter(pas);position:absolute;left:0;top:-4px;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;background:var(--asfalt);border:2px solid var(--girofar);
  color:var(--girofar);font:800 19px/1 var(--display);z-index:1}
/* linia de marcaj care leaga bornele: verticala pe telefon, orizontala pe ecran mare */
.road-steps::before{content:"";position:absolute;left:22px;top:10px;bottom:10px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--marcaj) 0 12px,transparent 12px 24px);opacity:.35}
.road-steps p{margin-top:8px;color:#cfd3d9;max-width:34em}
@media (min-width:860px){
  .road-steps{grid-template-columns:repeat(3,1fr);gap:40px}
  .road-steps li{padding:70px 0 0}
  .road-steps::before{left:23px;right:23px;top:22px;bottom:auto;width:auto;height:2px;
    background:repeating-linear-gradient(to right,var(--marcaj) 0 12px,transparent 12px 24px)}
  .road-steps li::before{top:0}
}

/* ── preturi: tabelul langa ecranul in care alegi serviciul ── */
.prices{display:grid;gap:48px;align-items:center}
@media (min-width:900px){ .prices{grid-template-columns:1.25fr .75fr;column-gap:72px} }
.prices-lede{margin-top:12px;color:var(--beton);max-width:30em}
.price-board{width:100%;border-collapse:collapse;font-size:17px;margin-top:28px}
.price-board th,.price-board td{padding:16px 0;border-bottom:1px solid var(--dunga);vertical-align:baseline}
.price-board tr:first-child th,.price-board tr:first-child td{border-top:1px solid var(--dunga)}
.price-board th{text-align:left;font:600 17px var(--body);color:var(--text)}
.price-board td{text-align:right;color:var(--beton)}
.price-board td b{font:800 20px var(--display);color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.prices-note{margin-top:20px;font-size:15px;color:var(--beton);max-width:40em}
.prices .phone{justify-self:center}
@media (min-width:900px){ .phone-tilt{transform:rotate(3deg)} }

/* ── familia: linkul de urmarire ─────────────────────── */
.family{display:grid;gap:44px;align-items:center}
@media (min-width:860px){ .family{grid-template-columns:.8fr 1.2fr;column-gap:80px} }
.family .phone{justify-self:center}
.family-copy h2{max-width:14ch}
.family-copy p{margin-top:18px;color:#cfd3d9;max-width:32em;font-size:1.06rem}
@media (max-width:859px){ .family-copy{order:-1} }

/* ── promisiuni ──────────────────────────────────────── */
.promises h2{max-width:15ch}
.promise-list{margin:40px 0 0;display:grid;gap:30px}
@media (min-width:760px){ .promise-list{grid-template-columns:1fr 1fr;column-gap:56px;row-gap:36px} }
.promise-list div{padding-left:20px;border-left:3px solid var(--girofar)}
.promise-list dt{font:700 1.14rem/1.3 var(--display)}
.promise-list dd{margin:7px 0 0;color:#cfd3d9;max-width:32em}

/* ── firme: placa luminoasa, ca un panou rutier ──────── */
main > section.firms{max-width:none;padding:0;background:var(--marcaj);color:var(--asfalt)}
.firms::before{content:"";display:block;height:14px;
  background:repeating-linear-gradient(-45deg,var(--asfalt) 0 14px,var(--girofar) 14px 28px)}
.firms-inner{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,96px) var(--gutter);
  display:grid;gap:56px;align-items:center}
@media (min-width:960px){ .firms-inner{grid-template-columns:1.15fr .85fr;column-gap:64px} }
.firms-visual{position:relative;display:grid;place-items:center;min-height:520px}
.firms-visual .phone{box-shadow:inset 0 0 0 1.5px #3b414b,0 40px 70px -35px rgba(28,31,36,.55)}
.firms-visual .phone-front{position:relative;z-index:2;transform:translateX(16%)}
.firms-visual .phone-back{position:absolute;z-index:1;width:min(250px,60vw);transform:translate(-40%,5%) rotate(-6deg)}
@media (max-width:640px){
  .firms-visual{min-height:0}
  .firms-visual .phone-front{transform:none}
  .firms-visual .phone-back{display:none}
}
.firms h2{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.firms-lede{margin-top:14px;font-size:clamp(1.06rem,1.6vw,1.2rem);max-width:30em;color:#3a3f47}
.firm-facts{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;max-width:46em}
.firm-facts li{position:relative;padding-left:30px;color:#2b2f36}
.firm-facts li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;
  background:var(--reflect);clip-path:polygon(50% 0,100% 100%,0 100%)}
.firm-contact{margin-top:38px;display:grid;gap:16px;max-width:46em}
.firm-contact p{color:#3a3f47}
.firm-actions{display:flex;flex-wrap:wrap;gap:12px}
.firms .btn{background:var(--asfalt);border-color:var(--asfalt);color:var(--marcaj)}
.firms .btn:hover{background:#000;border-color:#000}
.firms .btn-ghost{background:transparent;color:var(--asfalt);border-color:#c9c4b5}
.firms .btn-ghost:hover{background:#e6e2d5;border-color:var(--asfalt)}
.firms a:not(.btn){color:var(--asfalt)}
.firms :focus-visible{outline-color:var(--asfalt)}

/* ── intrebari ───────────────────────────────────────── */
.faq{max-width:820px !important}
.faq h2{margin-bottom:26px}
.faq details{border-bottom:1px solid var(--dunga)}
.faq details:first-of-type{border-top:1px solid var(--dunga)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font:600 1.08rem/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font:400 26px/1 var(--display);color:var(--girofar);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px;color:#cfd3d9;max-width:38em}

/* ── incheierea ──────────────────────────────────────── */
.closing{text-align:left;display:grid;gap:26px;justify-items:start;border-top:1px solid var(--dunga)}
.closing h2{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:18ch}

/* ── subsol ──────────────────────────────────────────── */
.foot{background:var(--asfalt-3);border-top:1px solid var(--dunga);padding:48px var(--gutter) 56px}
.foot > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.foot-brand{font:800 22px/1 var(--display);letter-spacing:-.03em}
.foot-op{margin-top:12px;color:var(--beton);font-size:14px}
.foot-op:empty{display:none}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px}
.foot-nav a{color:var(--text);text-decoration:none;font-size:15px}
.foot-nav a:hover{color:var(--girofar)}
.foot-112{margin-top:26px;font-size:14px;color:var(--beton)}