@charset "utf-8";
/* =========================================================================
   Digitouch — new home page · style.css
   fonts · tokens · reset · utilities (Alex) · shared classes (DRY).
   Area CSS lives in css/<area>.css, scoped to the area class.
   Figma: EAYZ2Sb8sRJMxNssmPRBEi · page "Homepage Closer to Final" (921:5172)
     desktop 1920: frame "Final" 1053:995
     mobile 390:   frame "New homepage 9 — Mobile" 964:656 (earlier version of the page —
                   used for the mobile patterns; content follows the desktop frame)
     tablet: not in Figma — derived.

   Breakpoints (one set, used by every area file):
     > 1480   desktop — Figma 1920 (content 1500 = x 210→1710)
     ≤ 1480   compact desktop — same layout, smaller type
     ≤ 1100   tablet — burger menu, stacked service cards, 2-up grids
     ≤  800   mobile — 1-up, checked at 390 / 375
   ========================================================================= */

/* ---------- fonts --------------------------------------------------------
   Figma uses "Polin" (commercial, not in our library). The stack tries a locally
   installed / later-added Polin first, then falls back to Ploni DL 1.1 AAA — the
   closest match we license (company font library: assets/fonts/ploni-dl-aaa).
   To switch to Polin: add @font-face rules for "Polin" (400 + 700) here. Nothing else changes.
   Ploni's files carry different family names per weight — declare them ALL under one
   family with an explicit font-weight (else 300/700 fall back).
   Gilroy Bold (digitouch.co.il licence) — only the "Works" outline word.            */
@font-face{font-family:"Ploni";src:url("../fonts/ploni-light-aaa.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-regular-aaa.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-medium-aaa.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Ploni";src:url("../fonts/ploni-bold-aaa.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../fonts/GilroyBold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- tokens ------------------------------------------------------ */
:root{
  --black:#000;
  --ink:#0c0e12;               /* video cards, mobile case card */
  --white:#fff;
  --blue:#176dde;              /* brand blue: steps, form button, links */
  --blue-2:#3989f3;            /* scroll-progress ring */
  --cyan:#00f2ea;
  --sky:#e7f7fc;               /* footer gradient + platform tiles */
  --tag:#a7d1df;               /* tag pill border on white cards */
  --card-line:#e3e8f0;         /* service card border */
  --grey-line:#515151;         /* dark card borders */
  --text-2:#555;               /* footer links */
  --muted:rgba(0,0,0,.65);
  --rule:rgba(12,14,18,.15);
  --progress:linear-gradient(270deg,var(--blue) 0%,#0ea2e3 50%,var(--cyan) 100%);   /* steps: 01 (right) → 03 */
  --bubble:linear-gradient(166deg,rgba(0,242,234,.1) 0%,rgba(23,109,222,.1) 100%);

  --font:"Polin","Ploni","Assistant","Heebo",system-ui,-apple-system,sans-serif;
  --font-latin:"Gilroy","Polin","Ploni",sans-serif;

  --container:1548px;          /* 1500 content (Figma x 210→1710) + 2×24 gutter */
  --gutter:24px;
  --header-h:72px;
  --radius-card:32px;
  --fs-h1:84px;  --lh-h1:95px;    /* hero */
  --fs-h2:60px;  --lh-h2:66px;    /* section titles */
  --fs-h3:30px;  --lh-h3:42px;
  --fs-body:22px; --lh-body:32px;
  --fs-btn:20px;
}
@media (max-width:1480px){:root{--fs-h1:72px;--lh-h1:82px;--fs-h2:52px;--lh-h2:58px;--fs-body:20px;--lh-body:30px;--radius-card:28px}}
@media (max-width:1100px){:root{--fs-h1:60px;--lh-h1:68px;--fs-h2:44px;--lh-h2:50px;--fs-h3:26px;--lh-h3:36px;--fs-body:19px;--lh-body:28px;--header-h:68px}}
@media (max-width:800px){:root{--gutter:20px;--fs-h1:44px;--lh-h1:50px;--fs-h2:34px;--lh-h2:42px;--fs-h3:22px;--lh-h3:30px;--fs-body:17px;--lh-body:26px;--fs-btn:18px;--radius-card:20px;--header-h:64px}}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[id]{scroll-margin-top:calc(var(--header-h) + 10px)}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);direction:rtl;overflow-x:hidden}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol,menu{padding:0;list-style:none}
menu{margin:0}
b,strong{font-weight:700}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
input[type=tel],input[type=email]{direction:rtl;text-align:right}   /* WebKit makes these LTR — keep RTL placeholders */
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip-link{position:fixed;top:-60px;right:16px;z-index:300;background:var(--white);color:var(--black);padding:10px 16px;border-radius:6px}
.skip-link:focus{top:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Alex utilities ---------------------------------------------- */
.ts-01{transition:all .1s}
.ts-02{transition:all .2s}
.ts-03{transition:all .3s}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.image{position:relative;overflow:hidden}
.object-fit-cover{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.flex-align-center{display:flex;align-items:center;justify-content:center}
.absolute-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* ---------- shared type ------------------------------------------------- */
.title{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:400}
.title--center{text-align:center}
.title--light{color:var(--white)}
.title b{font-weight:700}

/* ---------- pill button (Figma: 44px, 2px border, 20px text, 20px arrow) --
   .btn            black outline (white sections)
   .btn--light     white outline (dark sections)
   .btn--solid     white fill, black text (header CTA, clients CTA)
   .btn--blue      blue fill (mobile hero CTA, as in the mobile frame)          */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 24px;border:2px solid currentColor;border-radius:50px;font-size:var(--fs-btn);line-height:1;white-space:nowrap;color:var(--black);cursor:pointer}
.btn svg{flex:none;width:20px;height:20px}
.btn:hover,.btn:focus-visible{background:var(--black);border-color:var(--black);color:var(--white)}
.btn--light{color:var(--white)}
.btn--light:hover,.btn--light:focus-visible{background:var(--white);border-color:var(--white);color:var(--black)}
.btn--solid{background:var(--white);border-color:var(--white);color:var(--black)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn--blue{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn--blue:hover,.btn--blue:focus-visible{background:var(--white);border-color:var(--white);color:var(--black)}

/* underlined "לסיפור המלא" link */
.more{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:18px;line-height:1.2;white-space:nowrap}
.more svg{flex:none;width:16px;height:16px}
.more:hover,.more:focus-visible{gap:12px}

/* tag pills (service cards) */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{display:inline-flex;align-items:center;padding:6px 16px 10px;border:1px solid var(--tag);border-radius:100px;font-size:17px;line-height:22px;white-space:nowrap}

/* ---------- timeline (growth card + "how it works") ----------------------
   Steps run right→left (01 on the right). One grey rail between the first and
   last badge, one gradient "progress" overlay from 01 to --done (here 03).        */
.timeline{--n:5;--done:3;--badge:46px;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.timeline::before,.timeline::after{content:"";position:absolute;top:calc(var(--badge) / 2);height:1px;right:calc(100% / var(--n) / 2);left:calc(100% / var(--n) / 2);background:rgba(0,0,0,.25)}
.timeline::after{height:3px;margin-top:-1px;border-radius:2px;left:auto;width:calc(100% / var(--n) * (var(--done) - 1));background:var(--progress);box-shadow:0 0 8px rgba(23,109,222,.45)}
.timeline__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding-inline:8px;text-align:center}
.timeline__num{display:flex;align-items:center;justify-content:center;width:var(--badge);height:var(--badge);border-radius:18px;background:var(--blue);color:var(--white);font-size:20px;line-height:1}
.timeline__label{font-size:20px;line-height:25px;color:rgba(0,0,0,.85);max-width:234px}

@media (max-width:800px){
  .btn{height:44px;padding:0 20px}
  .tag{font-size:15px;padding:5px 14px 8px}
  /* vertical timeline: badge on the right, rail down the badges */
  .timeline{grid-template-columns:1fr;row-gap:22px}
  .timeline::before,.timeline::after{top:calc(var(--badge) / 2);bottom:calc(var(--badge) / 2);right:calc(var(--badge) / 2);left:auto;width:1px;height:auto}
  .timeline::after{width:3px;margin:0 -1px 0 0;bottom:auto;height:calc((100% - var(--badge)) / (var(--n) - 1) * (var(--done) - 1))}
  .timeline__step{flex-direction:row;align-items:center;gap:16px;padding:0;text-align:right}
  .timeline__num{flex:none}
  .timeline__label{max-width:none;font-size:19px}
}