/* Barber Al-Hari – predogled. Večerni vhod (vijolična), bela stena salona, barve brivskega droga. */
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/hanken-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/hanken-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --night:#120e26; --night-2:#1b1638; --night-3:#2a2352; --line-d:#3b3466;
  --on-night:#f3f1fb; --muted-d:#c4bee0; --violet:#a99cff; --sign-blue:#93a4ff;
  --wall:#f5f4f9; --wall-2:#e9e7f1; --paper:#fff; --line:#d9d5e6;
  --ink:#15122a; --muted:#4a4562;
  --red:#c8202c; --red-d:#a3141f; --blue:#2b47d6; --oak:#a8692f; --leather:#141217;
  --head:'Anybody','Arial Black',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font:400 18px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.08;letter-spacing:-.005em}
h2{font-size:clamp(30px,5.2vw,52px);font-weight:800;font-stretch:118%}
h3{font-size:22px;font-weight:750;font-stretch:110%}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{scroll-margin-top:84px}

/* gumbi */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 22px;border-radius:999px;border:2px solid transparent;font:700 17px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s,background-color .2s,border-color .2s,color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2a2550}
.btn-light{background:var(--on-night);color:var(--ink)}
.btn-sm{min-height:46px;padding:8px 18px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* trak – brivski drog kot ločilo */
.tape{height:16px;background:repeating-linear-gradient(-55deg,var(--red) 0 16px,#fff 16px 32px,var(--blue) 32px 48px,#fff 48px 64px);background-size:auto;animation:tape 6s linear infinite}
@keyframes tape{to{background-position:156px 0}}

/* mini drog (logo, status) */
.mini-pole{display:inline-block;flex:none;width:14px;height:34px;border-radius:7px;border:2px solid #d8d5e8;background:repeating-linear-gradient(-55deg,var(--red) 0 5px,#fff 5px 10px,var(--blue) 10px 15px,#fff 15px 20px);background-size:100% 49px;animation:minipole 1.4s linear infinite;box-shadow:0 0 14px rgba(169,156,255,.55)}
@keyframes minipole{to{background-position:0 49px}}

/* Predogled */
.preview-bar{background:#fff2b8;color:#2b2200;text-align:center;font-size:16px;line-height:1.4;padding:9px 16px}

/* glava */
.site-header{position:sticky;top:0;z-index:30;background:rgba(18,14,38,.94);backdrop-filter:blur(8px);color:var(--on-night);border-bottom:1px solid var(--line-d)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand-txt{display:flex;flex-direction:column}
.brand-word{font:800 19px/1.1 var(--head);font-stretch:130%;text-transform:uppercase;letter-spacing:.02em}
.brand-word b{color:var(--sign-blue);font-weight:800}
.brand-sub{font-size:16px;color:var(--muted-d);line-height:1.3}
.nav{display:flex;align-items:center;gap:6px}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:46px;padding:0 12px;text-decoration:none;font-weight:600;font-size:17px;border-radius:10px}
.nav a:not(.btn):hover{background:var(--night-3)}
.nav-call{margin-left:8px}
.burger{display:none;width:50px;height:50px;border:2px solid var(--line-d);border-radius:12px;background:transparent;color:var(--on-night);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-of-type(2){opacity:0}
.burger[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-7.5px) rotate(-45deg)}

/* skupno */
.eyebrow{font:700 16px/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:14px}
.hl{color:var(--blue)}
.sec-head{max-width:760px;margin-bottom:36px}
.sec-head h2{margin-bottom:14px}
.sec-lead{font-size:19px;color:var(--muted);margin:0}

/* 1. prvi zaslon */
.hero{background:radial-gradient(120% 90% at 85% 10%,#3a2b8f 0%,rgba(58,43,143,0) 55%),radial-gradient(80% 70% at 0% 100%,#2a1f63 0%,rgba(42,31,99,0) 60%),var(--night);color:var(--on-night);padding:52px 0 64px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero .eyebrow{color:#ff8f97}
.sign{display:flex;flex-direction:column;text-transform:uppercase;margin:0 0 22px}
.sign .s1{font-size:clamp(54px,10.5vw,116px);font-weight:880;font-stretch:142%;line-height:.92;letter-spacing:-.01em}
.sign .s2{font-size:clamp(40px,7.6vw,84px);font-weight:800;font-stretch:128%;line-height:1;color:var(--sign-blue);text-shadow:0 0 28px rgba(110,130,255,.55)}
.lead{font-size:20px;color:var(--muted-d);max-width:560px}
.status{display:inline-flex;align-items:center;gap:12px;background:var(--night-2);border:1px solid var(--line-d);border-radius:999px;padding:8px 18px 8px 12px;font-weight:600;margin:4px 0 24px}
.status .mini-pole{width:10px;height:26px;background-size:100% 36px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.proof{margin:22px 0 0;color:var(--muted-d)}
.proof b{color:var(--on-night);font-size:20px}
.stars{color:#ffc93c;letter-spacing:2px;margin-right:8px}
.mirror{margin:0;justify-self:center;width:min(440px,100%);position:relative}
.mirror img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:30% 50%;border-radius:999px 999px 26px 26px;border:3px solid #cfcbe2;box-shadow:0 0 0 10px rgba(169,156,255,.12),0 30px 80px rgba(70,50,200,.45)}
.mirror figcaption{margin-top:14px;text-align:center;color:var(--muted-d);font-size:16px}

/* 2. termin */
.appoint{background:var(--wall);padding:84px 0}
.steps-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--oak);border-radius:var(--r);padding:22px 24px}
.steps .num{grid-row:span 2;font:900 44px/1 var(--head);font-stretch:150%;color:var(--wall-2);-webkit-text-stroke:2px var(--ink);min-width:96px}
.steps h3{margin-bottom:6px;align-self:end}
.steps p{margin:0;color:var(--muted)}
.sticker{margin:0;background:var(--leather);padding:14px;border-radius:var(--r);transform:rotate(1.5deg);box-shadow:0 18px 40px rgba(20,18,42,.25)}
.sticker img{border-radius:8px;width:100%}
.sticker figcaption{color:#e9e6f6;text-align:center;padding:12px 4px 2px;font-weight:600}

/* 3. storitve */
.services{background:var(--paper);padding:84px 0}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc{grid-column:span 2;background:var(--wall);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.svc-tag{align-self:flex-start;font:700 16px/1 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 12px;margin-bottom:16px}
.svc h3{margin-bottom:10px}
.svc p{color:var(--muted)}
.svc blockquote{margin:auto 0 0;padding:16px 0 0;border-top:1px dashed var(--line);font-size:18px;color:var(--ink);font-style:italic;overflow-wrap:anywhere}
.svc cite{display:block;font-style:normal;font-size:16px;color:var(--muted);margin-top:6px}
.svc-price{background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.svc-price p,.svc-price cite{color:var(--muted-d)}
.svc-price .svc-tag{background:var(--red);color:#fff;border-color:var(--red)}
.svc-price blockquote{color:var(--on-night);border-color:var(--line-d)}
.svc-photo{grid-column:span 6;margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--leather)}
.svc-photo img{width:100%;height:340px;object-fit:cover;object-position:50% 45%}
.svc-photo figcaption{position:absolute;left:16px;bottom:16px;background:rgba(20,18,23,.82);color:#fff;font-weight:600;padding:8px 14px;border-radius:999px}

/* 4. vau: brivski drog */
.pole-sec{background:linear-gradient(180deg,var(--night) 0%,#1a1440 100%);color:var(--on-night);padding:88px 0}
.pole-in{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy stage" "ctrl stage";column-gap:56px;align-items:center}
.pole-copy{grid-area:copy;align-self:end}
.pole-copy .eyebrow{color:#ff8f97}
.pole-copy .hl{color:var(--sign-blue)}
.pole-copy h2{margin-bottom:16px}
.pole-copy p{color:var(--muted-d);font-size:19px}
.pole-ctrl{grid-area:ctrl;align-self:start}
.pole-cap{font-weight:700;font-size:19px;margin:18px 0 6px;min-height:2.6em}
.pole-hint{color:var(--muted-d);margin:0}
.pole-stage{grid-area:stage;max-width:460px;width:100%;justify-self:center;border-radius:22px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pole-stage svg{display:block;width:100%;height:auto;touch-action:pan-x pan-y}
.pole-hit{cursor:grab;touch-action:none}
.dragging .pole-hit{cursor:grabbing}
.sc-wall{fill:#211d36;transition:fill .8s}
.sc-ceil path{fill:#2e2a40;transition:fill .8s}
.sc-ceil .slat{fill:none;stroke:#1a1729;stroke-width:5}
.sc-spill{opacity:0;transition:opacity .8s}
.sign-panel{fill:#3a3652;transition:fill .6s}
.sign-ring{fill:none;stroke:#15122a;stroke-width:3}
.sign-t1{font:880 31px var(--head);font-stretch:135%;fill:#15122a}
.sign-t2{font:800 22px var(--head);font-stretch:120%;fill:#2b47d6}
.slit{fill:#3b3522;transition:fill .6s}
.tag{fill:#55516a;transition:fill .6s}
.tag-t{font:700 11px var(--body);fill:#15122a}
.tag-b{font:800 13px var(--head);font-stretch:100%}
.tube-dim{fill:#120e26;opacity:.58;transition:opacity .6s}
.rays line{stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:0;animation:ray 1.4s ease-out var(--d,0s) forwards}
@keyframes ray{0%{opacity:0;stroke-dashoffset:40}35%{opacity:1}100%{opacity:.75;stroke-dashoffset:0}}
.pole-stage.on .sc-wall{fill:#4b40a8}
.pole-stage.on .sc-ceil path{fill:#5d54a0}
.pole-stage.on .sc-ceil .slat{stroke:#3b3378}
.pole-stage.on .sc-spill{opacity:1}
.pole-stage.on .sign-panel{fill:#f3f1ff}
.pole-stage.on .sc-sign{animation:flick .9s steps(1) 1}
.pole-stage.on .slit{fill:#ffd57a}
.pole-stage.on .tag{fill:#d9d6ea}
.pole-stage.on .tube-dim{opacity:0}
.pole-stage.on .pole{filter:drop-shadow(0 0 12px rgba(200,190,255,.85))}
@keyframes flick{0%{opacity:.3}12%{opacity:1}22%{opacity:.4}34%{opacity:1}50%{opacity:.6}62%{opacity:1}}

/* 5. mnenja */
.reviews{background:var(--wall);padding:84px 0}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev-grid>*{min-width:0}
.score{grid-row:span 2;background:var(--ink);color:var(--on-night);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.score .big{font:900 92px/1 var(--head);font-stretch:140%;margin:0 0 8px}
.score .stars{font-size:26px;margin:0 0 6px}
.score p{color:var(--muted-d)}
.score .btn{margin-top:10px;background:var(--on-night);color:var(--ink)}
.rev{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow-wrap:anywhere}
.rev p{font-size:19px;line-height:1.55;margin-bottom:16px}
.rev footer{font-size:16px;color:var(--muted);font-weight:600}
.rev-long{grid-column:span 2}

/* 6. kje smo */
.visit{background:var(--night);color:var(--on-night);padding:84px 0}
.visit .eyebrow{color:#ff8f97}
.visit .hl{color:var(--sign-blue)}
.visit-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visit h2{margin-bottom:26px}
.facts{margin:0 0 28px;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line-d)}
.facts div:last-child{border-bottom:1px solid var(--line-d)}
.facts dt{color:var(--muted-d);font-weight:600}
.facts dd{margin:0;font-weight:600}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-wide{grid-column:1/-1}
.visit-photo{margin:0}
.visit-photo img{width:100%;border-radius:var(--r);border:1px solid var(--line-d)}
.visit-photo figcaption{color:var(--muted-d);margin-top:12px}

/* noga */
.site-footer{background:#0b0918;color:var(--muted-d);padding:48px 0 40px;border-top:1px solid var(--line-d)}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:24px 40px}
.foot-brand{font:800 22px/1.1 var(--head);font-stretch:130%;text-transform:uppercase;color:var(--on-night);margin-bottom:10px}
.foot-brand b{color:var(--sign-blue)}
.foot-legal{margin:0}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-content:start}
.foot-links a{display:inline-flex;align-items:center;min-height:46px;color:var(--on-night);font-weight:600}
.small{grid-column:1/-1;font-size:16px;margin:0;border-top:1px solid var(--line-d);padding-top:18px}

/* politika */
.legal{background:var(--wall);padding:48px 16px 64px;max-width:820px;border-radius:0}
.legal-page{background:var(--wall)}
.legal h1{font-size:clamp(32px,6vw,48px);font-stretch:120%;font-weight:800;margin-bottom:20px}
.legal h2{font-size:24px;font-stretch:110%;margin:28px 0 8px}
.legal a{display:inline-block;min-height:44px;line-height:44px}

/* spodnji gumbi na telefonu */
.dock{display:none}

@media (max-width:1000px){
  .hero-in{gap:36px}
  .svc{grid-column:span 3}
  .svc-price{grid-column:span 6}
}
@media (max-width:900px){
  .burger{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;background:var(--night);border-bottom:1px solid var(--line-d);padding:12px 16px 18px}
  .nav.open{display:flex}
  .nav a:not(.btn){min-height:50px;font-size:18px}
  .nav-call{margin:8px 0 0}
  .site-header{position:sticky}
  .header-in{position:relative}
  .hero-in,.visit-in{grid-template-columns:1fr}
  .mirror{width:min(360px,100%)}
  .steps-wrap{grid-template-columns:1fr}
  .sticker{max-width:420px;justify-self:center;transform:rotate(1deg)}
  .pole-in{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "ctrl";row-gap:26px}
  .pole-copy{align-self:auto}
  .rev-grid{grid-template-columns:1fr 1fr}
  .score{grid-row:auto;grid-column:1/-1}
  .rev-long{grid-column:1/-1}
}
@media (max-width:760px){
  body{padding-bottom:74px}
  .dock{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--night);border-top:1px solid var(--line-d);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .dock a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;color:var(--on-night);text-decoration:none;font-weight:700;font-size:17px;border-radius:12px}
  .dock a:first-child{background:var(--red)}
  .dock svg{width:20px;height:20px}
  .svc{grid-column:span 6}
  .svc-photo img{height:260px}
  .rev-grid{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
  .foot-in{grid-template-columns:1fr}
  .appoint,.services,.reviews,.visit,.pole-sec{padding:64px 0}
}
@media (max-width:640px){
  .hero{padding:36px 0 52px}
  .cta .btn{flex:1 1 auto}
  .cta>.btn-red{flex-basis:100%}
  .steps li{grid-template-columns:1fr;padding:20px}
  .steps .num{grid-row:auto;font-size:36px;margin-bottom:8px}
  .brand-sub{display:none}
  .brand-word{font-size:17px}
  .cta-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .tape,.mini-pole{animation:none}
  .pole-stage.on .sc-sign{animation:none}
  .rays line{animation-duration:.01s}
  html{scroll-behavior:auto}
}