/* ---- style.css ---- */
:root{
  /* Design tokens shared with the Tafi-Contabil landing page, so the two
     sites read as one family: Apple-style white-dominant surfaces, SF Pro,
     semibold display type, soft shadows. */
  --bg:#f5f5f7;              /* Apple light-grey section */
  --bg-2:#ffffff;
  --ink:#1d1d1f;             /* Apple near-black */
  --muted:#6e6e73;           /* Apple secondary text */
  --accent:#e0701a;          /* TAFI orange, same value as Contabil */
  --accent-soft:#ef8a3c;
  --accent-50:#fbeede;
  --line:rgba(0,0,0,.1);
  --line-strong:rgba(0,0,0,.16);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Inter','Helvetica Neue',Arial,sans-serif;
  --shadow-soft:0 2px 8px rgba(0,0,0,.04),0 18px 50px -28px rgba(0,0,0,.22);
  --shadow-lift:0 30px 70px -38px rgba(0,0,0,.34);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:600;letter-spacing:-.02em;font-size:20px;color:var(--ink)}
.brand span{color:var(--accent);margin-left:2px}
.nav-links{display:flex;align-items:center;gap:clamp(14px,3vw,32px);font-size:15px}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active:not(.btn){color:var(--ink);font-weight:600}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;font-weight:600;
  padding:11px 20px;border-radius:999px;font-size:15px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  box-shadow:var(--shadow-soft);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-lg{padding:15px 28px;font-size:16px}
/* nav login: the same pill, squared off into a circle around a single glyph */
.btn-icon{
  width:42px;height:42px;padding:0;
  border-radius:50%;
  justify-content:center;
  flex:none;
}
.btn-icon svg{width:20px;height:20px;display:block}

.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line);box-shadow:none;
}
.btn-ghost:hover{border-color:rgba(0,0,0,.35);background:rgba(0,0,0,.04)}

.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent);margin-bottom:14px;
}
.accent{color:var(--accent)}

/* HERO */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;overflow:hidden;
}
.hero-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(230,93,49,.12),transparent 70%),
    radial-gradient(50% 40% at 80% 90%,rgba(80,120,255,.07),transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:820px}
.hero h1{
  font-size:clamp(64px,14vw,160px);
  font-weight:600;letter-spacing:-.04em;line-height:.92;
  margin-bottom:26px;color:var(--ink);
}
.hero .lead{
  font-size:clamp(17px,2.2vw,22px);color:var(--muted);
  max-width:620px;margin:0 auto 36px;
}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:-16vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.scroll-hint svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* HORIZONTAL SLIDE-OVER STACK — the section is tall; the inner pins while each
   subsequent fullscreen card slides in from the left and overlaps the previous
   one. Cards themselves stay in place once landed; only the incoming one moves. */
.stack{position:relative;background:var(--bg)}
.stack-inner{position:sticky;top:0;height:100svh;overflow:hidden}
.hpanel{
  position:absolute;inset:0;overflow:hidden;
  width:100%;height:100%;
  display:flex;align-items:center;
  will-change:transform;
}
.hpanel:nth-child(1){z-index:1}
.hpanel:nth-child(2){z-index:2}
.hpanel:nth-child(3){z-index:3}
.hpanel:nth-child(4){z-index:4}
/* full-bleed SOLID color background */
.hpanel-bg{position:absolute;inset:0;z-index:0}
.media-1{background:#ffffff}       /* Fleet      — white / black text  */
.media-2{background:var(--accent)} /* Compliance — orange / white text */
.media-3{background:#1d1d1f}       /* Accounting — black / white text  */
.media-4{background:#ffffff}       /* Automation — white / black text  */

.hpanel-text{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  height:100%;max-width:min(1500px,96vw);
  padding:100px clamp(32px,4vw,72px) clamp(32px,4vw,64px) clamp(48px,7vw,120px);
}
.hp-eyebrow{
  text-transform:uppercase;letter-spacing:.2em;font-size:13px;
  font-weight:700;margin-bottom:clamp(18px,3vw,30px);
}
.hpanel-text h2{
  font-size:clamp(56px,9.5vw,150px);font-weight:600;
  letter-spacing:-.04em;line-height:.94;
  overflow-wrap:break-word;
}

/* image-filled headline letters (photo shows through the glyphs) */
.hp-title{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.fill-forest {background-image:url('road-forest.jpg')}
.fill-lake   {background-image:url('truck-lake.jpg')}
.fill-field  {background-image:url('road-field.jpg')}
.fill-highway{background-image:url('truck-highway.jpg')}
.fill-tforest{background-image:url('truck-forest.jpg')}
.hp-desc{
  margin-top:clamp(22px,3vw,34px);max-width:520px;
  font-size:clamp(19px,1.7vw,24px);line-height:1.5;
}

/* per-panel text colors (solid, high-contrast) */
.t-light{color:#1d1d1f}
.t-light .hp-eyebrow{color:#5a6470}
.t-light .hp-desc{color:#3f4956}
.t-invert{color:#ffffff}
.t-invert .hp-eyebrow{color:rgba(255,255,255,.75)}
.t-invert .hp-desc{color:rgba(255,255,255,.85)}

/* Built in Moldova — same bold heading font, black, aligned with the logo */
.built-in{display:inline-flex;align-items:baseline;gap:18px;margin-top:clamp(28px,4vw,40px)}
.built-in span{
  font-family:var(--font);
  font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(24px,2.8vw,36px);color:var(--ink);
}
.built-in img{height:clamp(30px,3.4vw,46px);width:auto;display:block}

/* OUTRO */
.outro{
  min-height:80svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:80px 24px;gap:20px;
}
.outro h2{font-size:clamp(30px,5vw,56px);font-weight:600;letter-spacing:-.03em;max-width:720px;color:var(--ink)}
.outro p{color:var(--muted);font-size:18px}
.outro .foot{font-size:13px;margin-top:30px;color:rgba(90,100,112,.7)}

/* ============================================================
   INNER PAGES (Product / Pricing / About / Contact)
   ============================================================ */
.container{width:min(1200px,92vw);margin:0 auto}
.page{padding-top:clamp(118px,15vh,170px);padding-bottom:clamp(70px,10vw,120px)}

/* page hero */
.page-hero{text-align:center;max-width:860px;margin:0 auto clamp(50px,7vw,90px)}
.page-hero h1{
  font-size:clamp(44px,7vw,92px);font-weight:600;
  letter-spacing:-.04em;line-height:1;margin:16px 0 22px;color:var(--ink);
}
.page-hero p{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:660px;margin:0 auto}
.page-hero p.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent);margin:0 0 14px;
}

/* generic section */
.section{padding:clamp(36px,5vw,64px) 0}
.section-head{max-width:680px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.section-head h2{font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:14px}
.section-head p{color:var(--muted);font-size:18px}

/* ---- PRICING ---- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-soft);
  padding:clamp(28px,3vw,40px) clamp(24px,2.5vw,34px);background:#fff;
}
.price-card.featured{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-lift)}
.price-badge{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(230,93,49,.14);padding:5px 11px;border-radius:999px;margin-bottom:16px}
.price-name{font-weight:700;font-size:19px;margin-bottom:8px}
.price-desc{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:22px;min-height:44px}
.featured .price-desc{color:rgba(255,255,255,.7)}
.price{font-size:clamp(38px,4.5vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.featured .price{color:#fff}
.price small{font-size:16px;font-weight:500;color:var(--muted)}
.featured .price small{color:rgba(255,255,255,.6)}
.price-list{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:13px;flex:1}
.price-list li{display:flex;gap:11px;font-size:15px;line-height:1.4;align-items:flex-start}
.price-list li::before{content:"✓";color:var(--accent);font-weight:600;flex:none}
.price-card .btn{justify-content:center;width:100%}
.featured .btn-ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.featured .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.pricing-note{text-align:center;color:var(--muted);font-size:15px;margin-top:32px}

/* ---- FEATURE ROWS ---- */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line);
}
.feature-row:last-child{border-bottom:1px solid var(--line)}
.feature-row.rev .feature-media{order:2}
.feature-num{font-size:14px;font-weight:700;letter-spacing:.15em;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
.feature-copy h3{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.025em;color:var(--ink);margin-bottom:16px;line-height:1.02}
.feature-copy p{color:var(--muted);font-size:17px;line-height:1.6;margin-bottom:20px}
.feature-copy ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.feature-copy li{display:flex;gap:10px;font-size:15px;color:#3f4956}
.feature-copy li::before{content:"→";color:var(--accent);font-weight:700}
.feature-media{
  aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  display:flex;align-items:flex-end;padding:26px;
  color:#fff;font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;
}
.fm-1{background:#1d1d1f}
.fm-2{background:var(--accent)}
.fm-3{background:#1b2a4a}
.fm-4{background:#123a3a}

/* ---- SERVICES GRID (Product page) ---- */
.services-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(56px,8vw,110px) clamp(48px,7vw,90px);
  margin-top:clamp(20px,3vw,40px);
}
.service-item{display:flex;flex-direction:column}
.service-top{display:flex;align-items:center;gap:18px;margin-bottom:clamp(48px,7vw,96px)}
.service-top .num{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.05em;flex:none}
.service-top .line{flex:1;height:1px;background:var(--line)}
.service-item h3{
  text-align:center;font-size:clamp(24px,2.7vw,36px);font-weight:600;
  letter-spacing:-.01em;text-transform:uppercase;line-height:1.04;
  color:var(--ink);margin-bottom:18px;
}
.service-item p{
  text-align:center;max-width:340px;margin:0 auto;
  color:var(--muted);font-size:15px;line-height:1.65;
}
@media(max-width:760px){
  .services-grid{grid-template-columns:1fr;gap:52px}
  .service-top{margin-bottom:28px}
}

/* ---- ABOUT ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px}
.stat{border:1px solid var(--line);border-radius:18px;padding:28px 24px;background:#fff;text-align:center}
.stat-num{font-size:clamp(34px,4.5vw,56px);font-weight:600;letter-spacing:-.03em;color:var(--accent);line-height:1}
.stat-label{color:var(--muted);font-size:15px;margin-top:8px}
.about-lead{max-width:760px;margin:0 auto;font-size:clamp(20px,2.4vw,28px);line-height:1.5;color:var(--ink);text-align:center;font-weight:500}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{border:1px solid var(--line);border-radius:18px;padding:30px;background:#fff}
.value-card h3{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.value-card p{color:var(--muted);font-size:15px;line-height:1.6}

/* ---- CONTACT ---- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:start}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field textarea,.field select{
  font-family:var(--font);font-size:16px;color:var(--ink);
  padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:130px}
.contact-info{border:1px solid var(--line);border-radius:20px;padding:clamp(28px,3vw,40px);background:#fff}
.contact-info h3{font-size:20px;font-weight:700;margin-bottom:20px}
.contact-item{margin-bottom:20px}
.contact-item .label{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:4px}
.contact-item a,.contact-item span{font-size:17px;color:var(--ink);font-weight:500}

/* ---- SHARED FOOTER ---- */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:clamp(50px,7vw,72px) 0 40px}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand{max-width:300px}
.footer-brand .brand{display:inline-block;margin-bottom:16px;line-height:0}
.footer-brand .brand img{height:45px;width:auto;display:block}
.footer-brand p{color:var(--muted);font-size:15px;line-height:1.6}
.footer-built{display:flex;align-items:baseline;gap:10px;margin-top:16px!important}
.footer-built span{font-weight:600;letter-spacing:-.02em;color:var(--ink);font-size:18px}
.footer-built img{height:24px;width:auto}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px;font-weight:700}
.footer-col a{display:block;color:#3f4956;font-size:15px;margin-bottom:11px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

/* ---- SCROLL-ZOOM HERO (About page) ---- */
.zoom{position:relative;height:300vh}
.zoom-inner{
  position:sticky;top:0;height:100svh;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.zoom-title{
  font-size:clamp(36px,6.5vw,86px);font-weight:600;letter-spacing:-.04em;
  line-height:.95;text-align:center;max-width:16ch;color:#1d1d1f;
  padding:0 24px;will-change:transform,opacity;
}
.zoom-reveal{
  position:absolute;left:0;right:0;bottom:clamp(38px,7vh,88px);
  display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:end;padding:0 clamp(24px,5vw,72px);
  opacity:0;color:#fff;will-change:opacity,transform;
}
.zoom-reveal .r-label{font-size:14px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.zoom-reveal .r-body{font-size:clamp(18px,2vw,27px);line-height:1.4;font-weight:500;color:#fff}
.zoom-reveal .r-note{font-size:13px;line-height:1.6;color:rgba(255,255,255,.65);text-align:right}
.zoom-reveal .r-note a{color:rgba(255,255,255,.85);text-decoration:underline}

/* About page: transparent nav that flips light over the dark-red section */
.page-about .nav{background:transparent;border-bottom:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.page-about .nav .brand,
.page-about .nav-links a:not(.btn){color:#1d1d1f;transition:color .35s ease}
.page-about .nav .brand span{color:var(--accent)}
.page-about.is-dark .nav .brand,
.page-about.is-dark .nav-links a.active:not(.btn){color:#fff}
.page-about.is-dark .nav-links a:not(.btn){color:rgba(255,255,255,.5)}
.page-about.is-dark .nav .brand span{color:#fff}
@media(max-width:760px){
  .zoom-reveal{grid-template-columns:1fr;gap:14px;bottom:32px}
  .zoom-reveal .r-note{text-align:left}
}

/* ---- WORKING PROCESS (interactive stepper) ---- */
.process{padding:clamp(70px,9vw,120px) 0;background:#fff}
.process-head{margin-bottom:clamp(40px,6vw,68px)}
.process-head h2{font-size:clamp(34px,5vw,60px);font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px}
.process-head p{color:var(--muted);font-size:17px;max-width:480px;line-height:1.6}
.steps{display:flex;gap:clamp(16px,2.4vw,40px);align-items:flex-start}
.step{
  flex:0 0 auto;display:flex;gap:clamp(18px,2.2vw,34px);align-items:flex-start;
  background:none;border:none;border-top:2px solid var(--line);
  padding:22px 0 0;margin:0;cursor:pointer;text-align:left;min-width:0;
  transition:flex .45s ease,border-color .35s ease;font-family:var(--font);
}
.step-num{
  font-size:clamp(76px,12vw,168px);font-weight:600;color:#d7dbe0;
  line-height:.82;letter-spacing:-.05em;flex:none;transition:color .35s ease;
}
.step-body{
  overflow:hidden;max-width:0;opacity:0;padding-top:12px;
  transition:max-width .45s ease,opacity .35s ease;
}
.step-body h3{font-size:clamp(18px,1.5vw,22px);font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.15}
.step-body p{color:var(--muted);font-size:15px;line-height:1.6}
.step.active{flex:1 1 auto;border-color:var(--accent)}
.step.active .step-num{color:var(--accent)}
.step.active .step-body{max-width:440px;opacity:1}
.process .btn{margin-top:clamp(40px,5vw,64px)}

@media(max-width:760px){
  .steps{flex-direction:column;gap:8px}
  .step{width:100%;flex:1 1 auto!important;border-color:var(--line)}
  .step.active{border-color:var(--accent)}
  .step-num{font-size:clamp(64px,20vw,90px)}
  .step-body{max-width:none!important;opacity:1!important;padding-top:6px}
}

@media(max-width:900px){
  .pricing-grid,.values{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .feature-row{grid-template-columns:1fr}
  .feature-row.rev .feature-media{order:0}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-links a:not(.btn){display:none}   /* nav.css re-shows these in the menu */
  .hpanel-text{max-width:none;padding:96px 22px 40px}
  .hpanel-text h2{font-size:clamp(40px,12vw,62px)}
  .hp-desc{font-size:17px}
  .zoom-title{font-size:clamp(30px,8.6vw,44px);max-width:14ch}
}

/* ---- home-more.css ---- */
/* ============================================================
   WHAT ELSE COMES WITH IT — the three free apps and the things
   the platform does that a tracker cannot. Home page.
   ============================================================ */

.more{
  background:#fff;
  padding:clamp(70px,9vw,120px) 0 clamp(60px,8vw,110px);
}
/* the heading sits on the right, over the cards it introduces */
.more-head{
  max-width:640px;
  margin:0 0 clamp(64px,9vw,124px) auto;   /* clear air before the apps */
  text-align:right;
}
.more-head h2{
  font-size:clamp(30px,4.4vw,54px);font-weight:600;letter-spacing:-.03em;
  color:var(--ink);line-height:1.03;margin-bottom:14px;
}
.more-head p{color:var(--muted);font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:520px;margin-left:auto}

/* ---- the three apps ---- */
.apps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,4.5vw,70px);
}
/* no card around them — the three sit free on the white, Contabil-style */
.app{
  display:flex;flex-direction:column;
  padding:0;
}
.app-icon{
  width:clamp(38px,3.4vw,46px);height:auto;
  border-radius:23%;
  flex:none;
  box-shadow:0 6px 14px -8px rgba(29,29,31,.45);
}
.app h3{font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.app-free{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(230,93,49,.12);
  padding:5px 9px;border-radius:999px;
}
.app p{color:var(--muted);font-size:15px;line-height:1.6}

/* ---- the four one-liners ---- */
.edges{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,34px) clamp(30px,5vw,80px);
  margin-top:clamp(40px,5.5vw,80px);
  padding-top:clamp(30px,4vw,50px);
  border-top:1px solid var(--line);
}
.edge{display:flex;gap:clamp(12px,1.4vw,18px);align-items:flex-start}
.edge svg{
  width:clamp(20px,1.8vw,24px);height:auto;flex:none;
  margin-top:2px;
}
.edge:nth-child(1) svg{color:var(--accent)}
.edge:nth-child(2) svg{color:var(--c-blue)}
.edge:nth-child(3) svg{color:var(--c-green)}
.edge:nth-child(4) svg{color:var(--c-plum)}
.edge h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
.edge p{color:var(--muted);font-size:15px;line-height:1.55}

.more-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:clamp(34px,4vw,52px);
  font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
.more-link:hover{color:var(--accent);border-color:var(--accent)}

@media(max-width:900px){
  .more-head{text-align:left;margin-right:auto}
  .more-head p{margin-left:0}
  .apps{grid-template-columns:1fr}
  .edges{grid-template-columns:1fr}
}

/* ============================================================
   WORKING PROCESS — fixes on top of style.css (home page only)
   ============================================================ */

/* The step copy used to re-wrap while the panel opened, because the reveal
   animates max-width from 0 and the text reflowed at every width on the way.
   Giving the copy its final width and letting the wrapper clip it means the
   text is laid out once and simply uncovered. */
.steps{--body-w:min(440px,40vw)}
.step-body h3,
.step-body p{width:var(--body-w)}
.step.active .step-body{max-width:var(--body-w)}

/* the stepper is the end of the section now that the button is gone */
.process{padding-bottom:clamp(34px,4.5vw,60px)}

@media(max-width:760px){
  .steps{--body-w:100%}
}

/* ---- nav.css ---- */
/* ============================================================
   NAV — a detached bar floating off the edges, logo left,
   sections centred, account right. Overrides style.css.
   ============================================================ */

.nav{
  /* pulled in off every edge so it reads as a bar sitting on the page */
  top:clamp(10px,1.6vw,18px);
  left:clamp(10px,2.4vw,30px);
  right:clamp(10px,2.4vw,30px);
  padding:10px clamp(14px,1.6vw,22px);
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-soft);

  /* logo | sections | account */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.nav .brand{justify-self:start;display:flex;align-items:center;line-height:0}
/* the mark is two lines — "TAFI" is only the top ~70% of the box — so it is
   set taller than a plain wordmark would be to keep the letters the same size */
.nav .brand img{
  height:clamp(31px,2.9vw,37px);width:auto;display:block;
  /* The box is centred, but "TAFI" only fills its top 58% and the script
     descends below, so the mark reads high. Nudge it down optically. This is a
     transform rather than a margin on purpose: it does not take part in layout,
     so the bar keeps exactly the height it had. */
  transform:translateY(12%);
}

.nav-links{justify-self:center}

/* ---- the account glyph: grey until you touch it ---- */
.nav-account{
  justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  color:#98a1ad;                       /* quiet by default */
  background:transparent;
  transition:color .2s ease,background .2s ease,transform .12s ease;
}
.nav-account svg{width:21px;height:21px;display:block}
.nav-account:hover,
.nav-account:focus-visible{
  color:var(--ink);
  background:rgba(29,29,31,.06);
}
/* pressing it makes it unmistakable */
.nav-account:active{
  color:var(--accent);
  background:var(--t-orange,rgba(230,93,49,.12));
  transform:scale(.94);
}

/* ---- About page: it used to strip the bar bare over the dark section,
        which would leave white links on a white pill ---- */
.page-about .nav{
  background:#fff;
  border:1px solid var(--line);
}
.page-about.is-dark .nav-links a:not(.btn){color:var(--muted)}
.page-about.is-dark .nav-links a.active:not(.btn){color:var(--ink)}

@media(max-width:760px){
  .nav{grid-template-columns:auto 1fr auto;padding:8px 12px}
  .nav-links{justify-self:end}
}

/* Contabil's nav type: small, quiet, semibold on the current page */
.nav-links a{font-size:13px;font-weight:500;color:var(--muted);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active:not(.btn){font-weight:600;color:var(--ink)}
.nav-links{gap:clamp(10px,1.5vw,22px)}

/* ---- small screens: the links collapse behind a button ---- */
.nav-toggle{
  display:none;
  width:38px;height:38px;padding:0;
  background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.nav-toggle span{
  display:block;width:19px;height:2px;border-radius:2px;
  background:var(--ink);
  transition:transform .28s var(--ease),opacity .2s ease;
}
.nav.is-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:760px){
  .nav{grid-template-columns:auto 1fr auto;gap:8px}
  .nav-toggle{display:flex;justify-self:start;order:1}
  .nav .brand{order:2;justify-self:center}
  .nav-account{order:3}

  /* the panel drops out of the bar rather than pushing the page around */
  .nav-links{
    grid-column:1 / -1;
    justify-self:stretch;
    position:absolute;
    top:calc(100% + 8px);left:0;right:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:6px;
    box-shadow:var(--shadow-soft);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .28s var(--ease),visibility .22s;
  }
  .nav.is-open .nav-links{opacity:1;visibility:visible;transform:none}

  /* style.css hides these below 760, which is what left the bar empty */
  .nav-links a:not(.btn){
    display:block;
    padding:12px 14px;
    border-radius:12px;
    font-size:16px;
  }
  .nav-links a:not(.btn):hover{background:var(--bg)}
  .nav-links a.active:not(.btn){background:var(--bg);color:var(--ink)}
}

/* ---- palette.css ---- */
/* ============================================================
   PALETTE — the brand's eight base colours.
   White and the TAFI orange stay primary; the rest carry
   the categorical work, one colour per item in a set, so a row
   of four things stops reading as one block of orange.
   Loads after style.css on every page.
   ============================================================ */

:root{
  --c-red:#d5002f;          /* Pantone 1795  R213 G0   B47  */
  --c-plum:#940144;         /* Pantone 221   R148 G1   B68  */
  --c-rose:#b94676;         /* Pantone 674   R185 G70  B118 */
  --c-green:#34871d;        /* Pantone 363   R52  G135 B29  */
  --c-teal:#006c50;         /* Pantone 342   R0   G108 B80  */
  --c-blue:#1b7396;         /* Pantone 633   R27  G115 B150 */
  --c-black:#000000;        /* Pantone Black                */

  /* the same hues at 10%, for backgrounds and rules */
  --t-orange:rgba(224,112,26,.10);
  --t-plum:rgba(148,1,68,.10);
  --t-rose:rgba(185,70,118,.10);
  --t-green:rgba(52,135,29,.10);
  --t-teal:rgba(0,108,80,.10);
  --t-blue:rgba(27,115,150,.10);

  /* lifted versions, for the dark sections where the deep inks go muddy */
  --c-blue-lt:#4ea8cd;
  --c-green-lt:#6ec24e;
  --c-rose-lt:#e07ba5;
}

/* a set of four cycles orange → blue → green → plum */
.c-1{color:var(--accent)}
.c-2{color:var(--c-blue)}
.c-3{color:var(--c-green)}
.c-4{color:var(--c-plum)}

/* ---- Product: the four capability numbers ---- */
.services-grid .service-item:nth-child(1) .num{color:var(--accent)}
.services-grid .service-item:nth-child(2) .num{color:var(--c-blue)}
.services-grid .service-item:nth-child(3) .num{color:var(--c-green)}
.services-grid .service-item:nth-child(4) .num{color:var(--c-plum)}
.service-top .num{font-weight:600;letter-spacing:.02em}

/* ---- About: the four figures ---- */
.stats .stat:nth-child(1) .stat-num{color:var(--accent)}
.stats .stat:nth-child(2) .stat-num{color:var(--c-blue)}
.stats .stat:nth-child(3) .stat-num{color:var(--c-green)}
.stats .stat:nth-child(4) .stat-num{color:var(--c-rose)}
.stat-num{font-weight:600}

/* ---- About: the three values ---- */
.values .value-card:nth-child(1){border-top:3px solid var(--accent)}
.values .value-card:nth-child(2){border-top:3px solid var(--c-blue)}
.values .value-card:nth-child(3){border-top:3px solid var(--c-teal)}

/* ---- Product: the live console, on dark ---- */
.al-card[data-card="trip"].is-active{border-color:rgba(78,168,205,.65);background:rgba(78,168,205,.10)}
.al-card[data-card="route"].is-active{border-color:rgba(110,194,78,.6);background:rgba(110,194,78,.10)}
.al-card[data-card="trip"] .al-flag{color:var(--c-blue-lt)}
.al-card[data-card="route"] .al-flag{color:var(--c-green-lt)}
.al-log li.k-warn{color:var(--c-rose-lt)}
.al-log li.k-warn::before{color:var(--c-rose-lt)}

/* ---- Product page sits on white, not the grey section colour ---- */
.page-product .page-shell{background:#fff}

/* ---- About page ---- */
/* white throughout; the scroll-zoom hero paints its own background from JS,
   so it keeps going dark on cue */
.page-about .page-shell{background:#fff}

/* the four figures lose their cards */
.page-about .stat{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}
.page-about .stats{gap:clamp(24px,3.4vw,48px)}

/* ---- footer.css ---- */
/* ============================================================
   FOOTER — dark, and fixed behind the page. The content sits on
   top with rounded bottom corners and slides up off it as you
   reach the end, so the footer is revealed rather than scrolled to.
   ============================================================ */

html,body{background:var(--ink)}          /* whatever shows past the shell is dark */

.page-shell{
  position:relative;
  z-index:1;
  background:var(--bg);
  border-radius:0 0 clamp(22px,2.8vw,40px) clamp(22px,2.8vw,40px);
}
/* the last block inside has to round with the shell, or its square corners
   paint over them */
.page-shell > :last-child{
  border-bottom-left-radius:inherit;
  border-bottom-right-radius:inherit;
}

.site-footer{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:0;                              /* behind the shell */
  background:var(--ink);
  color:#fff;
  border-top:none;
}

/* ---- dark palette for everything inside ---- */
.site-footer .footer-brand p{color:rgba(255,255,255,.62)}
.site-footer .footer-col h4{color:rgba(255,255,255,.45)}
.site-footer .footer-col a{color:rgba(255,255,255,.78)}
.site-footer .footer-col a:hover{color:var(--accent)}
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.45);
}
.site-footer .footer-built span{color:#fff}
/* the footer uses moldova-light.png: same artwork with the black wordmark
   flipped to white, so the tree keeps its own colours */

@media(max-width:900px){
  /* a tall footer under a short page would leave the reveal permanently
     open, so on narrow screens it simply sits at the end */
  .site-footer{position:static}
  .page-shell{margin-bottom:0!important;border-radius:0}
}

/* ---- seo.css ---- */
/* ============================================================
   CONTENT PAGES — the pieces the module, FAQ and translated pages
   add on top of style.css: language switch, breadcrumbs, hero
   buttons, module tiles, FAQ, calls to action. Same tokens, same
   type scale; nothing here restyles an existing component.
   ============================================================ */

/* ---- language switch, last item in the nav ---- */
.nav-lang{
  display:inline-flex;align-items:center;gap:2px;
  margin-left:clamp(4px,1vw,10px);padding-left:clamp(8px,1.2vw,14px);
  border-left:1px solid var(--line);
}
.nav-links .nav-lang a{
  font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:4px 6px;border-radius:8px;color:var(--muted);
}
.nav-links .nav-lang a.is-current{color:var(--ink);background:var(--bg)}
@media(max-width:760px){
  .nav-lang{margin:6px 0 0;padding:8px 8px 4px;border-left:0;border-top:1px solid var(--line);gap:6px}
  .nav-links .nav-lang a:not(.btn){display:inline-block;padding:8px 12px;font-size:14px}
}

/* ---- breadcrumbs ---- */
.crumbs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  font-size:13px;color:var(--muted);margin-bottom:8px;
}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.crumb-sep{opacity:.5}

/* ---- hero additions ---- */
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.page-hero h1{text-wrap:balance}
.home-hero{margin-bottom:clamp(20px,3vw,40px)}
.home-hero h1{font-size:clamp(38px,5.6vw,72px)}
.lead-hero{padding-top:clamp(118px,15vh,170px)}
.lead-hero .page-hero{margin-bottom:clamp(40px,5vw,70px)}

/* ---- cards that wrap to the content, not a fixed three ---- */
.values-auto{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* ---- long-form copy ---- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-bottom:18px;color:var(--ink)}
.prose p{color:#3f4956;font-size:17px;line-height:1.7;margin-bottom:16px}
.hardware-note{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,34px);background:var(--accent-50)}
.hardware-note h2{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.hardware-note p{color:#3f4956;font-size:16px;line-height:1.65;margin-bottom:10px}
.text-link{color:var(--accent);font-weight:600}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- module tiles ---- */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.module-card{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
}
.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--line-strong)}
.module-card h3{font-size:19px;font-weight:700;color:var(--ink)}
.module-card p{color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.module-more{color:var(--accent);font-weight:600;font-size:14px}

/* ---- FAQ ---- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 22px}
.faq-item summary{
  cursor:pointer;list-style:none;padding:18px 28px 18px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--accent);transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{color:#3f4956;font-size:16px;line-height:1.65;padding:0 0 20px}
.faq-more{text-align:center;margin-top:18px;font-weight:600}
.faq-more a{color:var(--accent)}

/* ---- calls to action ---- */
.inline-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  margin:clamp(28px,4vw,48px) auto;text-align:center;
}
.inline-cta span{color:var(--muted);font-size:14px}
.cta-band{
  margin:clamp(40px,6vw,80px) 0 clamp(10px,2vw,20px);
  background:var(--ink);color:#fff;border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(36px,5vw,64px) clamp(22px,4vw,56px);text-align:center;
}
.cta-band h2{font-size:clamp(28px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.72);font-size:17px;max-width:620px;margin:0 auto 26px;line-height:1.6}

/* ---- ecosystem links + company contact line, bottom of the footer ---- */
.footer-eco{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.footer-eco h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px;font-weight:700}
.footer-eco ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px 24px}
.footer-eco a{display:flex;flex-direction:column;gap:2px;font-size:15px;transition:color .2s}
.footer-eco a strong{font-weight:600}
.footer-eco a span{font-size:13px;opacity:.7}
.footer-eco a:hover strong{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.footer-nap{font-style:normal}
.footer-nap a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:currentColor}
.footer-nap a:hover{color:var(--accent)}
.site-footer .footer-eco{border-top-color:rgba(255,255,255,.12)}
.site-footer .footer-eco h4{color:rgba(255,255,255,.45)}
.site-footer .footer-eco a{color:rgba(255,255,255,.82)}
.site-footer .footer-bottom{margin-top:24px}

/* ---- app downloads (mobile apps pages) ---- */
.apps-dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px}
.app-dl{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff}
.app-dl-top{display:flex;align-items:center;gap:14px}
.app-dl-top h3{font-size:19px;font-weight:700;color:var(--ink)}
.app-dl-icon{width:56px;height:56px;border-radius:14px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.app-dl-icon-blank{display:grid;place-items:center;background:var(--accent-50);color:var(--accent);font-weight:700;font-size:24px}
.app-dl p{color:var(--muted);font-size:15px;line-height:1.6;flex:1}
.app-dl-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:60px}
.store-badge{display:inline-block;line-height:0}
.store-badge img{height:40px;width:auto}
.store-badge-google img{height:60px;margin:-10px -10px}   /* the Play badge ships with its own clear space */
.soon-badge{display:inline-block;padding:8px 14px;border-radius:999px;border:1px dashed var(--line-strong);color:var(--muted);font-size:14px;font-weight:600}
.app-dl-soon{background:var(--bg)}
.apps-dl-tm{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}

/* ---- contact: direct lines under the form ---- */
.contact-direct{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--line)}
.contact-direct-title{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:16px}
.contact-direct ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px 32px}
.contact-direct li{display:flex;flex-direction:column;gap:4px}
.contact-direct li span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-direct a,.contact-direct address{font-size:17px;font-style:normal;color:var(--ink)}
.contact-direct a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.contact-direct a:hover{color:var(--accent)}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sh-shot picture{display:block}

/* ---- legible orange: the brand orange (#e0701a) gives white text and small
   orange text only ~3:1 contrast. Text-bearing uses take a deeper shade of the
   same hue (≥4.5:1, WCAG AA); decorative orange stays as it was. ---- */
:root{--accent-ink:#b35309;--accent-btn:#b8570d}
.btn:not(.btn-ghost):not(.btn-dark){background:var(--accent-btn)}
.btn:not(.btn-ghost):not(.btn-dark):hover{background:#a44c0b}
.eyebrow,.text-link,.module-more,.faq-more a{color:var(--accent-ink)}
.dev-n{color:var(--muted)}

/* ---- module pages: product picture, alternating bands, calmer hero ---- */
.crumbs{margin-bottom:22px}
.page-module .page-hero{margin-bottom:clamp(28px,4vw,48px)}
.page-plain .page-hero h1{font-size:clamp(34px,4.6vw,60px);max-width:18ch;margin-inline:auto}
.page-module .page-hero p.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
/* the laptop mock-up as it is on the home page: no frame, no crop */
.mod-shot{max-width:940px;margin:0 auto clamp(40px,5vw,72px)}
.mod-shot picture,.mod-shot img{display:block;width:100%;height:auto}
.mod-shot img{mix-blend-mode:multiply}   /* the mock-up's white canvas takes the page grey */

/* full-bleed white bands inside the grey page, without restructuring the
   container: the colour is painted sideways and clipped to the band's height */
.band{position:relative;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);
  padding-block:clamp(56px,7vw,96px);margin-block:clamp(16px,2vw,28px)}
.band .value-card{background:var(--bg);border-color:transparent}
.band .faq-item{background:var(--bg);border-color:transparent}

/* numbered cards: a tinted tile in one of six palette colours */
.values-num .value-card.value-card{position:relative;border-top:0}
.vc-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:18px;
  font-size:15px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.values-num .value-card:nth-child(6n+1) .vc-num{background:var(--t-orange);color:var(--accent-ink)}
.values-num .value-card:nth-child(6n+2) .vc-num{background:var(--t-blue);color:var(--c-blue)}
.values-num .value-card:nth-child(6n+3) .vc-num{background:var(--t-green);color:var(--c-green)}
.values-num .value-card:nth-child(6n+4) .vc-num{background:var(--t-plum);color:var(--c-plum)}
.values-num .value-card:nth-child(6n+5) .vc-num{background:var(--t-rose);color:var(--c-rose)}
.values-num .value-card:nth-child(6n+6) .vc-num{background:var(--t-teal);color:var(--c-teal)}
.inline-cta-quiet{margin-bottom:0}
.inline-cta-quiet .text-link{font-size:17px}

/* long copy beside a road photo */
.prose-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;max-width:1080px;margin-inline:auto}
.prose-split .prose{max-width:none;margin:0}
.split-photo{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-soft)}
.split-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.prose-split{grid-template-columns:1fr}.split-photo{aspect-ratio:16/9}}

/* hardware pointer: a card with a device glyph and a real button */
.page-module .hardware-note{max-width:1080px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,32px);
  align-items:center;background:#fff;border:1px solid var(--line);margin-block:clamp(24px,3vw,40px)}
.page-module .hardware-note p{margin:0}
.hw-glyph{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:var(--t-orange);color:var(--accent-ink)}
.hw-glyph svg{width:40px;height:40px}
.hw-btn{white-space:nowrap}
@media(max-width:860px){.page-module .hardware-note{grid-template-columns:1fr}.hw-btn{justify-self:start;white-space:normal}}

/* five related modules in one row on wide screens, no orphan */
.module-grid-5{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
@media(min-width:1000px){.module-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.module-grid-5 .module-card{padding:22px}}

/* ---- form result: a visible notice, not a stray line ---- */
.form-done.is-shown,.form-fail.is-shown{padding:14px 18px;border-radius:12px;font-weight:600;line-height:1.5}
.form-done.is-shown{background:#e9f7ef;border:1px solid #9bd3b2;color:#17613a}
.form-fail.is-shown{background:#fdecec;border:1px solid #f0b1b1;color:#9b1c1c}
.contact-grid form > .form-fail{grid-column:1 / -1}

/* ---- mobile menu: language links big enough to tap ---- */
@media(max-width:760px){.nav-links .nav-lang a:not(.btn){min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---- cookie prompt: a compact card in the corner on wide screens, so it does
   not sit over the headline (both choices stay identical, as the law asks) ---- */
@media(min-width:900px){
  body .cc-root{justify-content:flex-start;padding:20px}
  body .cc-box{max-width:460px}
}

/* ---- cookie-consent.css ---- */
/* cookie-consent.css — theme-aware, self-contained, no framework assumptions.
   Accept and reject are the same size and weight: under art. 7 of Law 195/2024
   consent must be as easy to refuse as to give. */
.cc-root{position:fixed;inset:auto 0 0 0;z-index:2147483000;display:flex;
  justify-content:center;padding:16px;pointer-events:none;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.cc-box{pointer-events:auto;width:100%;max-width:640px;background:#fff;color:#16181d;
  border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:22px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);max-height:86vh;overflow-y:auto}
.cc-title{margin:0 0 8px;font-size:1.05rem;font-weight:650;line-height:1.3}
.cc-body{margin:0 0 16px;font-size:.9rem;line-height:1.6;color:#444a57}
.cc-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cc-cats{margin:0 0 18px;border-top:1px solid rgba(0,0,0,.08)}
.cc-cat{padding:13px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-cat-name{font-size:.9rem;font-weight:600}
.cc-cat-desc{margin:5px 0 0;font-size:.82rem;line-height:1.55;color:#5b6070}
.cc-always{font-size:.75rem;color:#5b6070;white-space:nowrap}
.cc-switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-slider{position:absolute;inset:0;background:#c9ccd4;border-radius:999px;transition:background .18s;pointer-events:none}
.cc-slider::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .18s}
.cc-switch input:checked+.cc-slider{background:var(--cc-accent,#1a7f4b)}
.cc-switch input:checked+.cc-slider::before{transform:translateX(18px)}
.cc-switch input:focus-visible+.cc-slider{outline:2px solid var(--cc-accent,#1a7f4b);outline-offset:2px}
.cc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.cc-btn{font:inherit;font-size:.875rem;font-weight:550;padding:10px 18px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;min-width:132px;flex:1 1 auto;
  transition:opacity .15s,background .15s}
.cc-btn:hover{opacity:.88}
.cc-btn:focus-visible{outline:2px solid var(--cc-accent,#1a7f4b);outline-offset:2px}
.cc-primary{background:var(--cc-accent,#16181d);color:#fff}
/* Accept and "essentials only" render identically — same size, same weight,
   one click each — so refusing is never the harder path (art. 7). */
.cc-choice{background:var(--cc-accent,#16181d);color:#fff}
.cc-secondary{background:transparent;color:inherit;border-color:rgba(0,0,0,.28)}
.cc-ghost{background:transparent;color:inherit;border-color:transparent;text-decoration:underline;
  text-underline-offset:2px;min-width:auto;flex:0 0 auto}
@media(max-width:560px){.cc-actions{flex-direction:column-reverse}.cc-btn{width:100%}}
@media (prefers-color-scheme:dark){
  .cc-box{background:#14171e;color:#e8eaf0;border-color:rgba(255,255,255,.14);
    box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .cc-body{color:#aeb4c2}.cc-cat-desc,.cc-always{color:#9aa0b0}
  .cc-cats,.cc-cat{border-color:rgba(255,255,255,.10)}
  .cc-slider{background:#3a3f4b}
  .cc-secondary{border-color:rgba(255,255,255,.28)}
  .cc-primary,.cc-choice{background:var(--cc-accent,#e8eaf0);color:#14171e}
}
@media (prefers-reduced-motion:reduce){.cc-slider,.cc-slider::before,.cc-btn{transition:none}}