/* Shared by every page: self-hosted fonts, colour tokens, reset, buttons, focus. */

/* Fonts are served from this site (same files Google Fonts delivered), so no visitor data goes to a third party */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(../assets/fonts/archivo-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:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(../assets/fonts/archivo-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 600;font-display:swap;
  src:url(../assets/fonts/hanken-grotesk-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 600;font-display:swap;
  src:url(../assets/fonts/hanken-grotesk-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:"Martian Mono";font-style:normal;font-weight:400 500;font-stretch:100%;font-display:swap;
  src:url(../assets/fonts/martian-mono-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:"Martian Mono";font-style:normal;font-weight:400 500;font-stretch:100%;font-display:swap;
  src:url(../assets/fonts/martian-mono-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}

/* base reset */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* ---------- design tokens ----------
   Colour: the logo's navy and sun gold, with cool whites, light greys and graphite. Gold is an accent (primary
   button, active states, the text marker), never a text colour for whole phrases. */
:root{
  /* brand */
  --night:#021a3f;                 /* darkest surface: footer, story sky, final CTA */
  --navy:#032250;                  /* logo navy */
  --navy-2:#0b2d5c;                /* hover / raised navy */
  --gold:#FBB03B;                  /* logo sun: primary button, active step, focus ring */
  --gold-deep:#E39A22;             /* gold hover */
  --gold-soft:#F8C766;             /* the editorial marker behind a highlighted phrase */
  /* neutrals */
  --white:#FFFFFF;
  --snow:#F4F6F9;                  /* light section background */
  --cloud:#E9EDF2;                 /* quieter light surface, field fills */
  --steel:#CDD5E0;                 /* borders on light */
  --graphite:#3D4A5C;              /* body text on light (8.6:1 on --snow) */
  --graphite-2:#56637A;            /* secondary text on light (5.9:1 on white) */
  --ink:#0A1B36;                   /* headings on light */
  --paper:#F3F5F8;                 /* main text on dark */
  --mist:#A9B4C6;                  /* secondary text on dark (7.4:1 on --night) */
  --line:rgba(243,245,248,.14);    /* hairline on dark */
  /* WhatsApp: only on WhatsApp buttons. Dark navy text keeps 8.9:1 contrast on the brand green */
  --wa:#25D366;--wa-hover:#1EBE5B;
  /* aliases kept for the existing light band, header, footer, cookie panels and legal pages */
  --l-bg:var(--snow);--l-card:var(--white);--l-ink:var(--ink);--l-body:var(--graphite);--l-line:rgba(3,34,80,.12);--l-eyebrow:var(--graphite-2);
  --frost:#E8ECF1;--frost-2:#BFC8D6;--mineral:#F3F5F6;--hair-d:rgba(232,236,241,.12);--hair-l:rgba(3,34,80,.12);
  --honey:var(--gold-deep);
  /* type */
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-lede:clamp(1.05rem,.98rem + .35vw,1.25rem);
  --fs-h2:clamp(2rem,1.25rem + 2.9vw,3.5rem);
  --fs-h3:clamp(1.1rem,1rem + .35vw,1.3rem);
  /* space & layout */
  --gut-l:max(clamp(16px,4.5vw,64px),env(safe-area-inset-left,0px));
  --gut-r:max(clamp(16px,4.5vw,64px),env(safe-area-inset-right,0px));
  --sec-y:clamp(4.5rem,9vw,8rem);  /* vertical rhythm between sections */
  --w-max:78rem;                   /* content width */
  --w-text:40rem;                  /* reading width */
  --header-h:68px;
  /* shape, depth, motion */
  --r-1:4px;--r-2:8px;--r-3:12px;
  --sh-1:0 1px 2px rgba(2,26,63,.05),0 12px 32px -20px rgba(2,26,63,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.18s;--t:.3s;--t-slow:.6s;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--night);color:var(--paper);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.nb{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;z-index:60;left:var(--gut-l);top:10px;transform:translateY(-160%);padding:.7rem 1rem;border-radius:10px;
  background:var(--frost);color:var(--night);font-weight:600;text-decoration:none;transition:transform .2s}
.skip-link:focus-visible{transform:none;outline-color:var(--navy)}

/* ---------- buttons ----------
   One shape for every button: 52px tall (44px small, 58px large), 8px corners, a faint pressed edge along the bottom and
   a soft lift on hover (a shadow, never a glow). Gold = the main action on dark; navy = the main action on light;
   outlines = the second action; green = WhatsApp only. .btn-arrow adds an arrow that steps forward on hover. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:52px;padding:0 1.5em;
  border:1px solid transparent;border-radius:var(--r-2);font:600 1rem/1 var(--f-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn .i-wa{width:21px;height:21px}
.btn-sm{min-height:44px;font-size:.92rem;padding:0 1.15em}
.btn-lg{min-height:58px;padding:0 1.7em;font-size:1.04rem}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-2)}
.btn-arrow::after{content:"";width:18px;height:18px;flex:none;background:currentColor;transition:transform var(--t) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-arrow:hover::after{transform:translateX(3px)}
/* filled buttons share the pressed edge and the hover lift */
.btn-gold,.btn-navy,.btn-wa{box-shadow:inset 0 -2px 0 rgba(2,26,63,.16),0 1px 2px rgba(2,10,30,.16)}
.btn-gold:hover,.btn-navy:hover,.btn-wa:hover{box-shadow:inset 0 -2px 0 rgba(2,26,63,.16),0 12px 24px -14px rgba(2,10,30,.6)}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:#FDBA4A}
.btn-ghost,.btn-line-light{border-color:rgba(243,245,248,.42);color:var(--paper);background:rgba(2,26,63,.3)}
.btn-ghost:hover,.btn-line-light:hover{border-color:var(--paper);background:rgba(243,245,248,.08)}
/* for light surfaces: navy fill and navy outline */
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-line{background:var(--white);color:var(--navy);border-color:rgba(3,34,80,.3)}
.btn-line:hover{border-color:var(--navy)}
.btn-navy:focus-visible,.btn-line:focus-visible,.btn-text:focus-visible{outline-color:var(--navy)}
/* text button with an arrow that steps forward on hover */
.btn-text{min-height:44px;padding:0 .2em;color:var(--navy);gap:.5em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(3,34,80,.35)}
.btn-text:hover{text-decoration-color:var(--navy);transform:none}
.btn-text svg{transition:transform var(--t) var(--ease)}
.btn-text:hover svg{transform:translateX(3px)}
/* WhatsApp: brand green with dark text (8.9:1), used only for WhatsApp */
.btn-wa{background:var(--wa);color:var(--night);border-color:var(--wa)}
.btn-wa:hover{background:var(--wa-hover);border-color:var(--wa-hover)}
.btn-wa:focus-visible{outline-color:var(--wa)}
/* the main evaluation button, "Solicită o evaluare gratuită" (header, menu, hero, process, contact panel, phone dock):
   the logo's sun gold as an almost flat surface, a fine deeper-gold edge and a small static shadow. At rest nothing
   moves, flashes or glows. With a mouse, hovering lifts it a little, steps the arrow forward and sends one band of light
   across it, once (~650 ms); moving away lets the band fade where it is, and it waits for the next hover. Touch screens
   get a pressed state instead, and reduced motion keeps only the colour change. The band is a pseudo-element under the
   label moved only with transform, so the text never shifts and nothing blurred is repainted. */
:root{
  --sun-fill:#FAAF3B;              /* the logo's sun, a hair deeper so dark text keeps 9:1 */
  --sun-fill-hover:#FDBA4E;
  --sun-fill-press:#EFA12E;
  --sun-sheen:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 65%);   /* constant, so colours can fade */
  --sun-edge:#E59D2E;
  --sun-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(2,26,63,.14),0 1px 2px rgba(2,10,30,.2),0 6px 14px -10px rgba(251,176,59,.45);
  --sun-shadow-hover:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(2,26,63,.14),0 2px 4px rgba(2,10,30,.22),0 12px 24px -14px rgba(251,176,59,.6);
}
.btn-sun{position:relative;overflow:hidden;isolation:isolate;border-color:var(--sun-edge);background:var(--sun-sheen) var(--sun-fill);color:var(--night);box-shadow:var(--sun-shadow)}
.btn-sun::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:55%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,252,240,0) 15%,rgba(255,252,240,.5) 50%,rgba(255,252,240,0) 85%);
  transform:translateX(-120%) skewX(-16deg);transition:opacity .2s ease,transform 0s linear .2s}
.btn-sun:hover{background-color:var(--sun-fill-hover);border-color:var(--sun-edge);box-shadow:var(--sun-shadow-hover);transform:none}
.btn-sun:active{background-color:var(--sun-fill-press);transform:translateY(1px);transition-duration:.08s;
  box-shadow:inset 0 2px 4px rgba(2,26,63,.22),0 1px 1px rgba(2,10,30,.18)}
.btn-sun:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.btn-sun:is(:disabled,[aria-disabled="true"]){cursor:not-allowed;transform:none;background-color:var(--sun-fill-press);opacity:.55;box-shadow:none}
.btn-sun:is(:disabled,[aria-disabled="true"])::before{display:none}
@media (hover:hover) and (pointer:fine){
  .btn-sun:not(:disabled,[aria-disabled="true"]):hover{transform:translateY(-2px)}
  .btn-sun:not(:disabled,[aria-disabled="true"]):active{transform:translateY(0)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn-sun:not(:disabled,[aria-disabled="true"]):hover::before{opacity:1;transform:translateX(230%) skewX(-16deg);
    transition:opacity .12s ease,transform .65s cubic-bezier(.45,.05,.25,1)}
}
@media (prefers-reduced-motion:reduce){.btn,.btn-arrow::after,.btn-text svg{transition:none}.btn:hover,.btn-sun:hover,.btn-sun:active{transform:none}}

/* ---------- editorial highlight ----------
   One short phrase per heading at most. A soft gold band sits a touch lower and to the right of the words, like a
   marker laid by hand. On light sections it covers the lower half of the letters (navy text stays navy); on dark
   sections it covers the whole word and the text turns deep navy, because white on gold would fail contrast.
   The heading becomes its own stacking context, so the band always paints behind its text, punctuation included. */
:where(h1,h2,h3,p):has(.highlight-word){isolation:isolate}
.highlight-word{--hl-top:.46em;position:relative;white-space:nowrap;font-weight:inherit}
.highlight-word::before{content:"";position:absolute;z-index:-1;inset:var(--hl-top) -.1em -.02em -.06em;border-radius:2px;background:var(--gold-soft);
  transform:translate(.06em,.03em)}
.on-dark .highlight-word{--hl-top:-.06em;color:var(--night)}
.on-dark .highlight-word::before{right:-.02em;transform:translate(.02em,.04em)}
@media (forced-colors:active){.highlight-word{color:inherit}.highlight-word::before{display:none}}