/* Dazoni Computers — style.css
   Izvedeno iz Dazoni dizajn sistema (tokeni, komponente). Boje, razmaci i zaobljenja su na :root. */
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-padding-top:104px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brand);color:var(--on-brand);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
:root{
  --surface-000:#ffffff;--surface-100:#f4f5f7;--surface-200:#e8eaee;--navy:#0a0f1a;
  --ink:#0f1a2b;--ink-muted:#525b6b;--on-navy:#ffffff;--on-navy-muted:#a3adbd;
  --brand:#2659a6;--brand-strong:#1c4583;--brand-tint:#e6eef9;--on-brand:#ffffff;--brand-on-navy:#7ea6e6;
  --silver:#bdbfc1;--signal:#f5b301;--on-signal:#0f1a2b;
  --glass:rgba(255,255,255,.72);--brand-glow:rgba(38,89,166,.18);
  --line:#e2e5ea;--line-strong:#8a909b;
  --success:#1f7a4d;--success-tint:#e5f3ec;--warning:#a34a00;--warning-tint:#fdf0e2;--danger:#b3261e;--danger-tint:#fbeaea;
  --shadow-1:0 1px 2px rgba(15,26,43,.05),0 4px 16px rgba(15,26,43,.06);
  --shadow-2:0 2px 4px rgba(15,26,43,.05),0 24px 48px rgba(15,26,43,.12);
  --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
  --skew-brand:-14deg;
  --font-display:"Geologica",system-ui,sans-serif;
  --font-text:"Geologica",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
  --surface-000:#121c2c;--surface-100:#0b1422;--surface-200:#1a2638;--navy:#05080f;
  --ink:#eef2f8;--ink-muted:#a3adbd;--on-navy:#eef2f8;
  --brand:#7ea6e6;--brand-strong:#a3c1f0;--brand-tint:#172a47;--on-brand:#0b1422;
  --on-signal:#0b1422;--glass:rgba(18,28,44,.72);--brand-glow:rgba(126,166,230,.22);
  --line:#233047;--line-strong:#66748b;
  --success:#5fcf95;--success-tint:#12281f;--warning:#f0a45a;--warning-tint:#2e1d0c;--danger:#f28b82;--danger-tint:#2e1414;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);--shadow-2:0 2px 4px rgba(0,0,0,.4),0 24px 48px rgba(0,0,0,.5);}}

*,*::before,*::after{box-sizing:border-box}
body{background:var(--surface-100);color:var(--ink);font:400 16px/24px var(--font-text);-webkit-font-smoothing:antialiased;padding-inline:16px}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto}
.muted{color:var(--ink-muted)}
.mono{font-family:var(--font-mono);font-weight:500}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--radius-pill);border:1px solid transparent;font:600 15px/1 var(--font-text);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s ease-out,border-color .18s,box-shadow .18s,transform .18s}
.btn:active{transform:scale(.98)}
.btn .go{display:grid;place-items:center;width:32px;height:32px;margin-right:-14px;border-radius:50%;background:var(--on-brand);color:var(--brand);transition:transform .18s}
.btn .go svg{width:16px;height:16px}
.btn:hover .go{transform:translateX(2px)}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-strong);box-shadow:0 8px 24px var(--brand-glow)}
.btn-secondary{background:var(--surface-000);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-1)}
.btn-secondary:hover{border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--ink);padding:0 14px}
.btn-ghost:hover{background:var(--surface-200)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:56px;padding:0 28px;font-size:16px}
.btn-icon{width:44px;height:44px;padding:0}
.navy{background:var(--navy);color:var(--on-navy)}
.navy .btn-primary{background:var(--brand-on-navy);color:var(--navy)}
.navy .btn-primary .go{background:var(--navy);color:var(--brand-on-navy)}
.navy .btn-secondary{background:transparent;color:var(--on-navy);border-color:rgba(255,255,255,.2);box-shadow:none}
.navy .btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}

/* chip, badges */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 14px 4px 10px;border-radius:var(--radius-pill);background:var(--surface-000);border:1px solid var(--line);box-shadow:var(--shadow-1);font:500 13px/18px var(--font-text)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-tint);flex:none}
.chip.closed .dot{background:var(--warning);box-shadow:0 0 0 4px var(--warning-tint)}
.badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:var(--radius-pill);font:500 13px/1 var(--font-text);background:var(--surface-200);color:var(--ink);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.progress{background:var(--brand-tint);color:var(--brand-strong)}
.badge.progress::before{animation:pulse 1.6s ease-in-out infinite}
.badge.success{background:var(--success-tint);color:var(--success)}
.badge.warning{background:var(--warning-tint);color:var(--warning)}
.badge.danger{background:var(--danger-tint);color:var(--danger)}
.badge.signal{background:var(--signal);color:var(--on-signal);font-weight:600}
.badge.signal::before{display:none}
@keyframes pulse{50%{opacity:.35}}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:14px}
.hdr-bar{max-width:1160px;margin:0 auto;height:64px;padding:0 8px 0 10px;display:flex;align-items:center;gap:20px;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);border-radius:var(--radius-pill);box-shadow:var(--shadow-1)}
.logo{display:inline-flex;background:#fff;padding:6px 12px;border-radius:var(--radius-pill);flex:none}
.logo img{display:block;height:26px;width:auto}
.nav{display:flex;gap:2px;margin:0 auto}
.nav a{padding:10px 16px;border-radius:var(--radius-pill);font:500 15px/20px var(--font-text);color:var(--ink-muted);text-decoration:none;transition:color .15s,background-color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface-200)}
.hdr-phone{font:500 14px/20px var(--font-mono);color:var(--ink);text-decoration:none;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.hdr-phone svg{width:16px;height:16px;color:var(--brand)}
.menu-btn{display:none;margin-left:auto;background:transparent;border:0;color:var(--ink)}
.mnav{display:none}
@media (max-width:900px){
  .nav,.hdr-phone,.hdr-cta{display:none}
  .menu-btn{display:grid;place-items:center}
  .mnav:not([hidden]){display:grid;gap:4px;max-width:1160px;margin:8px auto 0;padding:8px;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
  .mnav a{padding:14px 16px;border-radius:var(--radius-md);text-decoration:none;font:500 16px/20px var(--font-text)}
  .mnav a[aria-current="page"]{background:var(--surface-200)}
}

/* views */
.view{animation:rise .35s ease-out both}
@keyframes rise{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.view,.badge.progress::before{animation:none}.btn,.card{transition:none}}
section{padding-block:48px}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:40rem}
.eyebrow{font:500 13px/18px var(--font-text);color:var(--brand)}
.h-l{font:700 48px/52px var(--font-display);letter-spacing:-.025em}
/* Geologica: display je iskošen (slnt −10) i oštar (SHRP 100), kao kosa slova logotipa; tekst je uspravan i mek */
.hero h1,.h-l,.h-1,.price,.stats b,.tbl td.p{font-variation-settings:'slnt' -10,'SHRP' 100}
.h-1{font:700 32px/38px var(--font-display);letter-spacing:-.02em}
.lead{font-size:18px;line-height:28px;color:var(--ink-muted)}
@media (max-width:700px){.h-l{font-size:32px;line-height:36px}.h-1{font-size:26px;line-height:32px}section{padding-block:36px}}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-block:48px 80px}
.hero h1{font:700 68px/72px var(--font-display);letter-spacing:-.035em;margin:24px 0 20px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{max-width:30rem;margin-bottom:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:36px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.meta b{color:var(--ink);font-weight:600}
.hero-art{position:relative;padding-block:40px 60px}
.slant{position:absolute;display:flex;gap:10px;pointer-events:none}
.slant i{display:block;width:14px;height:100%;background:var(--brand);transform:skewX(var(--skew-brand));border-radius:2px}
.slant i:nth-child(3n){background:var(--silver)}
.widget{position:relative;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:24px;display:grid;gap:18px}
.w-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.w-id{font:500 14px/20px var(--font-mono);color:var(--ink-muted)}
.w-dev{font:600 20px/26px var(--font-text);letter-spacing:-.015em}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.steps i{height:6px;border-radius:var(--radius-pill);background:var(--surface-200)}
.steps i.on{background:var(--brand)}
.steps-l{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:12px;line-height:16px;color:var(--ink-muted)}
.steps-l b{color:var(--ink);font-weight:600}
.price{font:700 24px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.price small{font:400 14px/1 var(--font-text);letter-spacing:0;color:var(--ink-muted);margin-right:6px}
.mini{position:absolute;left:-32px;bottom:8px;padding:14px 18px;border-radius:var(--radius-lg)}

/* hero motion — diskretno: ulaz jednom, zatim samo "život" radionice */
.hero-copy>*{animation:hin .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.07s}.hero-copy>:nth-child(3){animation-delay:.14s}.hero-copy>:nth-child(4){animation-delay:.21s}.hero-copy>:nth-child(5){animation-delay:.28s}
@keyframes hin{from{opacity:.2;transform:translateY(14px)}}
.hero-art .slant i{transform-origin:50% 100%;animation:bar .7s cubic-bezier(.2,.7,.2,1) both}
.hero-art .slant i:nth-child(1){animation-delay:.35s}.hero-art .slant i:nth-child(2){animation-delay:.42s}.hero-art .slant i:nth-child(3){animation-delay:.49s}.hero-art .slant i:nth-child(4){animation-delay:.56s}.hero-art .slant i:nth-child(5){animation-delay:.63s}.hero-art .slant i:nth-child(6){animation-delay:.7s}
@keyframes bar{from{transform:skewX(var(--skew-brand)) scaleY(0)}}
.w-main{animation:win .8s .15s cubic-bezier(.2,.7,.2,1) both,float 8s 1s ease-in-out infinite}
@keyframes win{from{opacity:.2;transform:translateY(20px) scale(.98)}}
@keyframes float{50%{transform:translateY(-6px)}}
.mini{animation:float 7s 2.2s ease-in-out infinite}
.mini .w-row{transition:opacity .35s ease,transform .35s ease}
.mini .w-row.out{opacity:0;transform:translateY(6px)}
.steps i.run{position:relative;overflow:hidden}
.steps i.run::before{content:"";position:absolute;inset:0;width:62%;background:var(--brand);border-radius:inherit}
.steps i.run::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sheen 2.6s ease-in-out infinite}
@keyframes sheen{to{left:100%}}
@media (prefers-reduced-motion:reduce){.hero-copy>*,.hero-art .slant i,.w-main,.mini,.steps i.run::after{animation:none}.mini .w-row{transition:none}}

/* hero stage — tamna scena sa pozadinom */
.hero-stage{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.06);margin-top:4px}
.hero-stage .hero{padding:72px 56px 88px}
.hero>*{min-width:0}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg span{position:absolute;display:block}
.hero-bg .grid{inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%);mask-image:linear-gradient(100deg,transparent 30%,#000 75%)}
.hero-bg .glow{right:-8%;top:-10%;width:62%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(38,89,166,.42),transparent)}
.hero-bg .band{top:-20%;bottom:-20%;width:190px;background:rgba(255,255,255,.028);transform:skewX(var(--skew-brand))}
.hero-bg .b1{left:47%}.hero-bg .b2{left:calc(47% + 230px);width:90px;background:rgba(255,255,255,.02)}
.hero-stage h1{color:var(--on-navy)}
.hero-stage h1 em{color:var(--brand-on-navy)}
.hero-stage .lead,.hero-stage .meta{color:var(--on-navy-muted)}
.hero-stage .meta b{color:var(--on-navy)}
.navy .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--on-navy);box-shadow:none}
.hero-stage .widget{box-shadow:0 2px 4px rgba(0,0,0,.25),0 30px 60px rgba(0,0,0,.45);border-color:transparent;color:var(--ink)}
.hero-stage .slant i:nth-child(3n){background:var(--silver)}
.hero-stage + section{padding-top:72px}
@media (max-width:900px){.hero-stage .hero{padding:40px 24px 64px}.hero-bg .band{display:none}.hero-bg .grid{-webkit-mask-image:linear-gradient(180deg,transparent 45%,#000 85%);mask-image:linear-gradient(180deg,transparent 45%,#000 85%)}.hero-bg .glow{top:auto;bottom:-15%;width:110%}}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:24px;padding-block:24px 48px}.hero h1{font-size:42px;line-height:46px}.mini{left:12px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento .wide{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento .wide{grid-column:1/-1}}
@media (max-width:620px){.bento{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;text-decoration:none;color:var(--ink);overflow:hidden;transition:box-shadow .2s ease-out,transform .2s ease-out}
a.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.c-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.c-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--surface-200);border-radius:var(--radius-md)}
.c-icon svg{width:26px;height:26px}
.c-go{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);transition:background-color .2s,color .2s,border-color .2s,transform .2s}
a.card:hover .c-go{background:var(--brand);border-color:var(--brand);color:var(--on-brand);transform:rotate(-45deg)}
.c-title{font:600 22px/28px var(--font-text);letter-spacing:-.015em}
.c-text{color:var(--ink-muted);max-width:34rem}
.c-foot{margin-top:auto;padding-top:16px}
.card.dark{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.card.dark .c-text{color:var(--on-navy-muted)}
.card.dark .c-icon{background:rgba(255,255,255,.08);color:var(--brand-on-navy)}
.card.dark .c-go{border-color:rgba(255,255,255,.2)}
.card.dark .price small{color:var(--on-navy-muted)}
a.card.dark:hover .c-go{background:var(--brand-on-navy);border-color:var(--brand-on-navy);color:var(--navy)}
@media (max-width:620px){.card .slant{display:none}}
.stats{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:8px}
.stats b{display:block;font:700 40px/1 var(--font-display);letter-spacing:-.03em;margin-bottom:6px}
.stats span{font-size:13px;line-height:18px;color:var(--on-navy-muted)}

/* process */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
@media (max-width:760px){.process{grid-template-columns:1fr}}
.step{background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;display:grid;gap:10px;align-content:start}
.step .n{font:500 14px/20px var(--font-mono);color:var(--brand)}
.step h3{font:600 20px/26px var(--font-text);letter-spacing:-.01em}

/* track band */
.band{border-radius:var(--radius-xl);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.band .h-1{color:var(--on-navy)}
.band p{color:var(--on-navy-muted)}
@media (max-width:860px){.band{grid-template-columns:1fr;padding:32px 24px}}
.inline{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 20px;background:var(--surface-000);border:1px solid var(--line-strong);border-radius:var(--radius-pill);transition:border-color .15s,box-shadow .15s}
.inline:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.inline input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/24px var(--font-mono);color:var(--ink)}
.inline input::placeholder{color:var(--ink-muted);font-family:var(--font-text);font-weight:400}
.navy .inline{border-color:transparent}
.hint{font-size:13px;line-height:18px;margin-top:10px}
.hint button{font:500 13px/18px var(--font-mono);background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.navy .hint{color:var(--on-navy-muted)}
.navy .hint button{color:var(--brand-on-navy)}

/* visit */
.visit{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
@media (max-width:860px){.visit{grid-template-columns:1fr}}
.info{display:grid;gap:4px}
.info dt{font:500 13px/18px var(--font-text);color:var(--ink-muted)}
.info dd{margin:0 0 14px;font:600 17px/24px var(--font-text)}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:12px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-family:var(--font-mono);font-weight:500}
.hours tr.today td{color:var(--brand);font-weight:600}
.copy{display:inline-flex;align-items:center;gap:8px}
.copy button{font:500 12px/1 var(--font-text);height:28px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-100);color:var(--ink-muted);cursor:pointer}
.copy button:hover{color:var(--ink);border-color:var(--line-strong)}
.maplink{margin-top:8px}

/* services page */
.svc{display:grid;grid-template-columns:320px 1fr;gap:40px;padding:40px 0;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:20px}}
.svc-side{display:grid;gap:12px;align-content:start}
.svc-side .c-icon{background:var(--brand-tint);color:var(--brand)}
.svc-side h2{font:600 26px/32px var(--font-text);letter-spacing:-.02em}
.tbl-wrap{overflow-x:auto;background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-lg)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:460px}
.tbl th{text-align:left;font:500 13px/18px var(--font-text);color:var(--ink-muted);padding:14px 20px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.p{font-family:var(--font-display);font-weight:700;font-size:17px;text-align:right;white-space:nowrap}
.tbl th.p{text-align:right}
.tbl td.t{color:var(--ink-muted);white-space:nowrap}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.subnav a{padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-000);text-decoration:none;font:500 14px/18px var(--font-text)}
.subnav a:hover{border-color:var(--line-strong)}
.faq{display:grid;gap:8px;max-width:820px}
.faq details{background:var(--surface-000);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 24px}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font:600 17px/24px var(--font-text);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--font-text);color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;color:var(--ink-muted);max-width:40rem}

/* status page */
.track{max-width:720px;margin:0 auto;display:grid;gap:24px}
.result{display:grid;gap:20px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:28px 1fr auto;gap:14px;padding-bottom:20px;position:relative}
.timeline li::before{content:"";position:absolute;left:13px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--brand)}
.tl-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-200);color:var(--ink-muted);z-index:1}
.tl-dot svg{width:14px;height:14px}
.done .tl-dot{background:var(--brand);color:var(--on-brand)}
.now .tl-dot{background:var(--brand-tint);color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.timeline b{font-weight:600;display:block}
.timeline time{font:500 13px/20px var(--font-mono);color:var(--ink-muted)}
.note{background:var(--surface-100);border-radius:var(--radius-md);padding:14px 16px;font-size:15px;line-height:22px}
.err{color:var(--danger);font-weight:500;font-size:14px;margin-top:10px}

/* contact */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .lbl{font:500 14px/20px var(--font-text)}
.input{font:400 16px/24px var(--font-text);color:var(--ink);background:var(--surface-000);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:11px 16px;min-height:48px;width:100%;transition:border-color .15s,box-shadow .15s}
textarea.input{resize:vertical;min-height:112px}
.input::placeholder{color:var(--ink-muted)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.ferr{font:500 13px/18px var(--font-text);color:var(--danger)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:10px 16px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);cursor:pointer;font:500 14px/18px var(--font-text);background:var(--surface-000)}
.seg input:checked+label{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.seg input:focus-visible+label{outline:2px solid var(--brand);outline-offset:3px}
.ok{display:grid;gap:12px;justify-items:start}
.ok .c-icon{background:var(--success-tint);color:var(--success)}

/* footer */
.foot{margin-top:48px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:48px 40px 32px;margin-inline:-16px}
.foot-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot{padding:40px 24px 24px}}
.foot h4{font:500 13px/18px var(--font-text);color:var(--on-navy-muted);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--on-navy);text-decoration:none}
.foot a:hover{color:var(--brand-on-navy)}
.foot p{color:var(--on-navy-muted);font-size:14px;line-height:22px}
.foot-bottom{max-width:1160px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--on-navy-muted)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface-000);padding:10px 18px;border-radius:var(--radius-pill);font:500 14px/20px var(--font-text);z-index:50;box-shadow:var(--shadow-2)}