/* YR Time marketing site (D-105). Paper, ink and the colours of a booked day.
   Light only, on purpose: a dark variant on a light site is a liability (playbook). */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-ext-37facb.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-c9a5f1.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-ext-76dcfc.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-814019.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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-i-cyrillic-780493.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-i-latin-ext-3a90cf.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-i-latin-0f6fcd.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:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-6fbb1d.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-eda814.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:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-dbd757.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-a2f8e3.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{
  color-scheme: light;
  --paper:#fbfaf7; --paper-2:#f3f1ea; --white:#fff;
  --ink:#15151a; --ink-2:#4b4b55; --ink-3:#6b6b74; --line:#e6e2d8; --line-2:#d6d1c4;
  --link:#0356d6; --live:#0891b2;
  /* Brand: the logo's sky-to-royal gradient (2026-10-15). Text-safe: --brand-700 (6.1:1 on paper), --brand-600 carries
     white text (5.2:1). --brand-300/500 are for decoration only (dots, glows, gradients), never for text. */
  --brand-50:#eaf3ff; --brand-100:#d6e8ff; --brand-300:#4fb6f7; --brand-500:#1e8dee; --brand-600:#0364ed;
  --brand-700:#0356d6; --brand-800:#0b4fc0; --brand-900:#0a2a6b;
  --brand-grad:linear-gradient(135deg, #0869ec 0%, #0364ed 45%, #0349c4 100%);
  /* The colours of a booked day: each pair is a calendar chip, fill + its own dark ink (>= 5.7:1, AA). */
  --mint:#dcf5fa; --mint-ink:#06606f; /* "mint" is the cool accent: cyan from the logo gradient (was green) */
  --sky:#e1ecff; --sky-ink:#173f8f;
  --apricot:#ffe6d3; --apricot-ink:#7f3209;
  --lilac:#ebe5ff; --lilac-ink:#46299a;
  --lemon:#fff2bf; --lemon-ink:#5c4700;
  --rose:#ffe0e8; --rose-ink:#8c1a43;
  --r-sm:12px; --r:20px; --r-lg:28px;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:'Playfair Display', Georgia, serif;
  --shadow:0 1px 2px rgba(21,21,26,.05), 0 12px 32px -12px rgba(21,21,26,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="ar"]{ --sans:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --serif:'IBM Plex Sans Arabic', serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img,svg,iframe{ max-width:100%; }
a{ color:var(--link); text-underline-offset:3px; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ letter-spacing:0; line-height:1.3; font-weight:600; }
p{ margin:0; }
p, li, dd, dt, .toc a{ overflow-wrap:break-word; }
.legal p, .legal li, .toc a, .card-facts dd{ hyphens:auto; }
h1, h2, h3{ overflow-wrap:break-word; hyphens:manual; }
:focus-visible{ outline:3px solid var(--link); outline-offset:3px; border-radius:6px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; }
.skip:focus{ top:12px; }
.wrap{ width:min(1180px, 100% - 32px); margin-inline:auto; }
.center{ text-align:center; justify-content:center; }

/* Type */
.display{ font-size:clamp(38px, 6.2vw, 74px); }
.display-sm{ font-size:clamp(24px, 7vw, 52px); }
html[lang="de"] .display-sm, html[lang="nl"] .display-sm{ hyphens:auto; }
.h2{ font-size:clamp(30px, 4.2vw, 50px); }
.h3{ font-size:22px; letter-spacing:-.015em; }
.serif-accent{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-.01em; color:var(--brand-700); }
/* The logo's gradient on the headline accent. Stops stay >= 4.5:1 on paper (large text needs only 3:1). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .serif-accent{ background:linear-gradient(110deg, var(--brand-800) 0%, var(--brand-600) 55%, #166ae0 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; padding-inline-end:.08em; }
}
html[lang="ar"] .serif-accent{ font-style:normal; font-weight:600; }
.lede{ margin-top:20px; font-size:clamp(18px, 1.8vw, 21px); color:var(--ink-2); max-width:36em; }
.kicker{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
html[lang="ar"] .kicker{ letter-spacing:0; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--mint-ink);
  background:var(--mint); padding:7px 14px 7px 12px; border-radius:999px; margin-bottom:22px; }
.fine{ margin-top:14px; font-size:14px; color:var(--ink-3); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(8,145,178,.5); animation:pulse 2s infinite; flex:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(8,145,178,.45);} 70%{ box-shadow:0 0 0 8px rgba(8,145,178,0);} 100%{ box-shadow:0 0 0 0 rgba(8,145,178,0);} }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 26px;
  border-radius:999px; font:700 16px/1 var(--sans); text-decoration:none; border:1.5px solid transparent;
  transition:transform .2s var(--ease), background .2s, box-shadow .2s; white-space:nowrap; cursor:pointer; }
.btn:active{ transform:scale(.98); }
.btn-sm{ min-height:40px; padding:0 18px; font-size:14px; }
.btn-block{ width:100%; }
.btn-ink{ background:var(--brand-grad); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -10px rgba(3,86,214,.55); }
.btn-ink:hover{ background:linear-gradient(135deg, #0364ed 0%, #0352d0 50%, #0b44b0 100%); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--white); border-color:var(--ink); }
.btn-paper{ background:var(--paper); color:var(--ink); }
.btn-paper:hover{ background:#fff; }
.btn-ghost-light{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost-light:hover{ border-color:#fff; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.lnk-quiet{ color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; }
.lnk-quiet:hover{ text-decoration:underline; }
.lnk-btn{ background:none; border:0; padding:8px 0 0; color:var(--link); font:600 14px var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* Header */
.top{ position:sticky; top:0; z-index:50; background:rgba(251,250,247,.82); -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px); border-bottom:1px solid rgba(214,209,196,.6); }
.top-in{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:20px; letter-spacing:-.02em; }
.brand em{ font-family:var(--serif); font-weight:500; }
html[lang="ar"] .brand em{ font-family:'Playfair Display', Georgia, serif; }
.brand-logo{ flex:none; display:block; border-radius:16%; box-shadow:0 1px 2px rgba(3,73,196,.18), 0 4px 10px -6px rgba(3,73,196,.45); }
.nav{ display:flex; gap:26px; margin-inline-end:auto; }
.nav a{ color:var(--ink-2); text-decoration:none; font-weight:600; font-size:15px; }
.nav a:hover, .nav a[aria-current]{ color:var(--ink); }
.top-act{ display:flex; align-items:center; gap:16px; }
.menu{ display:none; position:relative; }
.menu summary{ list-style:none; width:42px; height:42px; display:grid; place-content:center; gap:6px; cursor:pointer; border-radius:12px; }
.menu summary::-webkit-details-marker{ display:none; }
.menu summary span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s; }
.menu[open] summary span:first-child{ transform:translateY(4px) rotate(45deg); }
.menu[open] summary span:last-child{ transform:translateY(-4px) rotate(-45deg); }
.menu-panel{ position:absolute; inset-inline-end:0; top:calc(100% + 10px); min-width:220px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; }
.menu-panel a{ padding:12px 14px; color:var(--ink); text-decoration:none; font-weight:600; border-radius:12px; }
.menu-panel a:hover{ background:var(--paper-2); }
.menu-langs{ display:none; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px; margin-top:6px; padding-top:8px; border-top:1px solid var(--line); }
.menu-langs a{ padding:9px 12px; font-weight:600; font-size:14px; }
.menu-langs a[aria-current]{ background:var(--mint); color:var(--mint-ink); }

/* Language picker (shared partial), light skin */
.langpick{ position:relative; font-size:14px; }
.langpick > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:8px 12px;
  border-radius:999px; border:1px solid var(--line-2); color:var(--ink); font-weight:600; }
.langpick > summary::-webkit-details-marker{ display:none; }
.langpick > summary:hover{ border-color:var(--ink); }
.langpick-chev{ color:var(--ink-3); transition:transform .15s; }
.langpick[open] .langpick-chev{ transform:rotate(180deg); }
.langpick-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; min-width:180px; max-height:70vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; }
.langpick-item{ padding:9px 12px; border-radius:10px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.langpick-item:hover{ background:var(--paper-2); }
.langpick-item.on{ background:var(--brand-50); color:var(--brand-800); font-weight:700; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 100px); }
.hero-grid-bg{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:100% 64px, 120px 100%; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 45%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 45%, #000 20%, transparent 75%); }
.hero-in{ position:relative; display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:48px; align-items:center; }
.hero-copy .lede{ max-width:31em; }
.hero-stage{ --pw:min(318px, calc(78vh / 2.1)); --pw:min(318px, calc(78svh / 2.1)); position:relative; display:flex; justify-content:center; padding:24px 0; }
/* Hero phone, owner's reference (2026-10-15): silver titanium edge, very thin black bezel, pill camera in the
   status bar, side buttons. Screen radius = body radius - bezel, so the corners stay concentric. */
/* Real proportions: a big phone is 1 : 2.1 (77.6 x 163 mm), so the size follows the width and the viewport height. */
.phone{ --bezel:5px; --r:48px; --edge:3px; position:relative; margin:0; width:min(var(--pw), 100%); aspect-ratio:1 / 2.1;
  display:flex; padding:var(--edge); border-radius:var(--r);
  background:linear-gradient(90deg, #a7abb2 0%, #eef0f3 7%, #c9cdd3 22%, #f6f7f9 50%, #c4c8ce 78%, #eceef1 93%, #9fa3aa 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.18) inset,
    0 40px 80px -36px rgba(10,42,107,.40), 0 18px 36px -24px rgba(21,21,26,.32); z-index:2; }
@supports not (aspect-ratio:1 / 2) { .phone{ height:calc(var(--pw) * 2.1); } }
.phone-body{ --sb:#f8f2ed; position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding:var(--bezel); border-radius:calc(var(--r) - var(--edge)); background:#050506;
  box-shadow:0 0 0 1px #2a2b2f inset; }
.phone-body::after{ content:''; position:absolute; inset:var(--bezel); border-radius:calc(var(--r) - var(--edge) - var(--bezel)); pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 26%); }
/* Side buttons: action + volume on the left, side button on the right. */
.pb{ position:absolute; width:3px; border-radius:2px; background:linear-gradient(90deg, #8e9299, #e9ebee 60%, #b3b7bd); }
.pb-action{ left:-2px; top:17%; height:4.5%; } .pb-up{ left:-2px; top:25%; height:8%; } .pb-down{ left:-2px; top:35%; height:8%; }
.pb-power{ right:-2px; top:28%; height:12%; }
/* Status bar: time, pill camera, signal; the booking page starts below it. Its colour follows the page's own
   background (site.js reads it from the same-origin frame); the cream default matches the demo design. */
.phone-status{ position:relative; flex:none; height:40px; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px 0 30px; background:var(--sb); color:#16161a; font-size:14px; font-weight:700; letter-spacing:.01em;
  border-radius:calc(var(--r) - var(--edge) - var(--bezel)) calc(var(--r) - var(--edge) - var(--bezel)) 0 0; }
.ps-icons{ fill:currentColor; }
.phone-screen{ display:block; flex:1; min-height:0; width:100%; border:0; background:var(--sb, #fff);
  border-radius:0 0 calc(var(--r) - var(--edge) - var(--bezel)) calc(var(--r) - var(--edge) - var(--bezel)); }
.phone-cam{ position:absolute; top:50%; left:50%; width:29%; height:26px; transform:translate(-50%, -50%); border-radius:13px; background:#000; }
.phone-cam::after{ content:''; position:absolute; top:50%; right:11px; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2b3a63 0 22%, #0b0e18 55%, #000 75%); }
.phone-cap{ position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); width:max-content; max-width:92vw; display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-2); }
.phone-cap a{ font-weight:700; }
.chip{ position:absolute; z-index:3; display:flex; gap:8px; align-items:center; padding:10px 14px; border-radius:14px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow); white-space:nowrap; animation:float 7s ease-in-out infinite; }
.chip b{ font-weight:800; }
.chip-a{ background:var(--mint); color:var(--mint-ink); top:14%; inset-inline-end:calc(50% + var(--pw) / 2 - 22px); }
.chip-b{ background:var(--lilac); color:var(--lilac-ink); top:46%; inset-inline-start:calc(50% + var(--pw) / 2 - 22px); animation-delay:-2.5s; }
.chip-c{ background:var(--apricot); color:var(--apricot-ink); bottom:18%; inset-inline-end:calc(50% + var(--pw) / 2 - 22px); animation-delay:-5s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* Promise strip */
.promises{ border-block:1px solid var(--line); background:var(--white); }
.promises-in{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; }
.promise{ display:flex; gap:12px; align-items:flex-start; padding:22px 20px; font-size:15px; color:var(--ink-2); line-height:1.45; }
.promise + .promise{ border-inline-start:1px solid var(--line); }
.promise b{ display:block; color:var(--ink); font-weight:800; font-size:16px; margin-bottom:2px; }
.tick{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--mint); color:var(--mint-ink); display:grid; place-items:center; margin-top:1px; }

/* Sections */
.sec{ padding:clamp(64px, 9vw, 120px) 0; }
.sec-tint{ background:var(--paper-2); }
.sec-head{ max-width:760px; margin-bottom:48px; }
.sec-head-center{ margin-inline:auto; text-align:center; }
.sec-sub{ margin-top:16px; font-size:18px; color:var(--ink-2); max-width:38em; }
.sec-sub.center{ margin-inline:auto; text-align:center; margin-top:28px; }
.page-hero{ padding:clamp(56px, 8vw, 104px) 0 clamp(28px, 4vw, 48px); }
.page-hero-sm{ padding-bottom:12px; }

/* Bento */
.bento{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.tile{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg); padding:28px; min-height:220px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5),
    0 1px 2px rgba(var(--t-rgb, 21,21,26), .04), 0 16px 32px -24px rgba(var(--t-rgb, 21,21,26), .22);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
/* A soft light in the top corner and a quiet glow of the tone's own colour in the far corner: depth, no noise. */
.tile::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(90% 70% at 0% 0%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(var(--t-rgb, 21,21,26), .05), transparent 70%); }
.tile h3{ font-size:22px; letter-spacing:-.02em; }
.tile p{ font-size:15.5px; line-height:1.55; }
.tile-wide{ grid-column:span 2; grid-row:span 2; }
.tile-span2{ grid-column:span 2; }
.tile-ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:6px;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.72));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px -6px rgba(var(--t-rgb, 21,21,26), .18);
  transition:transform .45s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .tile:hover{ transform:translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55),
      0 2px 4px rgba(var(--t-rgb, 21,21,26), .04), 0 22px 40px -24px rgba(var(--t-rgb, 21,21,26), .28); }
  .tile:hover .tile-ic{ transform:translateY(-2px) rotate(-4deg); }
}
/* Each tone: light (--t-hi), base (--t-bg), deep (--t-lo) and its ink as RGB (--t-rgb) for tinted shadows.
   Inks stay >= 5.7:1 (AA) on all three stops, so the gradient never costs readability. */
.tone-mint{ --t-hi:#f1fbfd; --t-bg:var(--mint); --t-lo:#c4ecf5; --t-rgb:6,96,111; color:var(--mint-ink); }
.tone-sky{ --t-hi:#f3f7ff; --t-bg:var(--sky); --t-lo:#cbdcfd; --t-rgb:23,63,143; color:var(--sky-ink); }
.tone-apricot{ --t-hi:#fff5ee; --t-bg:var(--apricot); --t-lo:#ffd3b3; --t-rgb:127,50,9; color:var(--apricot-ink); }
.tone-lilac{ --t-hi:#f7f4ff; --t-bg:var(--lilac); --t-lo:#dad0ff; --t-rgb:70,41,154; color:var(--lilac-ink); }
.tone-lemon{ --t-hi:#fffbe6; --t-bg:var(--lemon); --t-lo:#ffe796; --t-rgb:92,71,0; color:var(--lemon-ink); }
.tone-rose{ --t-hi:#fff4f7; --t-bg:var(--rose); --t-lo:#ffccd9; --t-rgb:140,26,67; color:var(--rose-ink); }
[class*="tone-"]{ background:linear-gradient(155deg, var(--t-hi) 0%, var(--t-bg) 55%, var(--t-lo) 100%); }
.mini-cal{ margin-top:auto; background:rgba(255,255,255,.66); border-radius:18px; padding:14px; display:grid; gap:8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 8px 20px -16px rgba(var(--t-rgb, 21,21,26), .16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.mc-row{ display:grid; grid-template-columns:48px 1fr; align-items:center; gap:10px; font-size:13px; font-weight:700; }
.mc-ev{ display:block; height:26px; border-radius:8px; width:calc(var(--w) * 28%);
  border:1px solid rgba(var(--t-rgb), .35); box-shadow:0 3px 8px -6px rgba(var(--t-rgb), .25), inset 0 1px 0 rgba(255,255,255,.8); }
@media (prefers-reduced-motion:no-preference){
  .mc-ev{ transform-origin:left center; animation:mc-in .9s var(--ease) both; }
  html[dir="rtl"] .mc-ev{ transform-origin:right center; }
  .mc-row:nth-child(2) .mc-ev{ animation-delay:.08s; } .mc-row:nth-child(3) .mc-ev{ animation-delay:.16s; }
  .mc-row:nth-child(4) .mc-ev{ animation-delay:.24s; } .mc-row:nth-child(5) .mc-ev{ animation-delay:.32s; }
}
@keyframes mc-in{ from{ transform:scaleX(.2); opacity:0; } to{ transform:none; opacity:1; } }

/* Trades */
.trades{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.trades li{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px 12px 16px; border-radius:999px; font-weight:700; font-size:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.45), 0 6px 14px -12px rgba(var(--t-rgb), .25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.trades li::before{ content:''; width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; opacity:.55;
  box-shadow:0 0 0 3px rgba(255,255,255,.7); }
@media (hover:hover) and (pointer:fine){
  .trades li:hover{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 20px -14px rgba(var(--t-rgb), .3); }
}

/* Steps */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; counter-reset:none; }
.steps li{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.steps h3{ font-size:21px; margin:18px 0 8px; }
.steps p{ color:var(--ink-2); font-size:16px; }
.step-n{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--ink); color:#fff; font-weight:800; }
.tile .step-n{ background:rgba(255,255,255,.7); color:inherit; }

/* Receipt */
.receipt-sec{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); gap:56px; align-items:center; }
.receipt-sec .btn{ margin-top:28px; }
.receipt{ position:relative; background:#fff; border-radius:18px 18px 0 0; padding:30px 30px 26px; box-shadow:var(--shadow);
  font-variant-numeric:tabular-nums; color:var(--ink); }
.receipt::after{ content:''; position:absolute; left:0; right:0; bottom:-14px; height:14px;
  background:linear-gradient(-45deg, transparent 10px, #fff 0) 0 0/20px 14px repeat-x, linear-gradient(45deg, transparent 10px, #fff 0) 0 0/20px 14px repeat-x;
  filter:drop-shadow(0 6px 4px rgba(21,21,26,.06)); }
.receipt-head{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--ink); }
.receipt-brand{ font-weight:800; font-size:18px; }
.receipt-brand em{ font-family:'Playfair Display', Georgia, serif; font-weight:500; }
.receipt-sub{ font-size:13px; color:var(--ink-3); font-weight:600; }
.receipt-lines{ margin:0; padding:10px 0; }
.receipt-lines > div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:15px; }
.receipt-lines dt{ color:var(--ink-2); }
.receipt-lines dd{ margin:0; font-weight:700; white-space:nowrap; }
.receipt-total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-top:14px; font-weight:800; font-size:17px; }
.receipt-total strong{ font-size:28px; letter-spacing:-.02em; }
.receipt-note{ margin-top:14px; font-size:13px; color:var(--ink-3); line-height:1.5; }
.receipt-barcode{ height:34px; margin-top:18px; opacity:.85;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
/* Currency, period and plan state is CSS: the wrapper says which amount, text and receipt show.
   The currency comes from the visitor's location (TRY Türkiye, UZS Uzbekistan, USD elsewhere): until the page
   knows it (no data-currency yet) every amount stays hidden and "..." stands in, so no wrong price ever shows. */
.cur-scope .amt, .cur-scope .by-p, .cur-scope .amt-wait{ display:none; }
.cur-scope:not([data-currency]) .amt-wait{ display:inline; color:var(--ink-3); }
.cur-scope[data-period="monthly"] .by-p[data-p="monthly"],
.cur-scope[data-period="yearly"] .by-p[data-p="yearly"]{ display:inline; }
.cur-scope[data-currency="TRY"][data-period="monthly"] .amt[data-c="TRY"][data-p="monthly"],
.cur-scope[data-currency="UZS"][data-period="monthly"] .amt[data-c="UZS"][data-p="monthly"],
.cur-scope[data-currency="USD"][data-period="monthly"] .amt[data-c="USD"][data-p="monthly"],
.cur-scope[data-currency="TRY"][data-period="yearly"] .amt[data-c="TRY"][data-p="yearly"],
.cur-scope[data-currency="UZS"][data-period="yearly"] .amt[data-c="UZS"][data-p="yearly"],
.cur-scope[data-currency="USD"][data-period="yearly"] .amt[data-c="USD"][data-p="yearly"]{ display:inline; }
.seg-save{ display:inline-block; margin-inline-start:6px; padding:2px 8px; border-radius:999px; background:var(--mint); color:var(--mint-ink);
  font-size:12px; font-weight:800; letter-spacing:0; }
/* Narrow phones: the badge goes under its label, on one line (ru/uk/it/nl wrapped inside the pill at 320 px). */
@media (max-width: 420px){
  .seg-btn:has(.seg-save){ display:flex; flex-direction:column; align-items:center; gap:3px; padding-block:6px; }
  .seg-save{ margin-inline-start:0; white-space:nowrap; font-size:11px; padding:1px 7px; }
}
.receipt-stack > .receipt{ display:none; }
.receipt-stack[data-plan="solo"] > [data-plan-receipt="solo"],
.receipt-stack[data-plan="team"] > [data-plan-receipt="team"],
.receipt-stack[data-plan="business"] > [data-plan-receipt="business"]{ display:block; }
.receipt-pick{ padding:clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 80px); }

/* Segmented control */
.seg{ display:inline-flex; gap:4px; padding:4px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; margin:8px 0 36px; }
.seg-left{ margin:28px 0 0; }
.seg-btn{ border:0; background:transparent; padding:10px 18px; border-radius:999px; font:700 14px var(--sans); color:var(--ink-2); cursor:pointer; }
.seg-btn[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(21,21,26,.15); }

/* Plans */
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; align-items:stretch; }
.plan{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px 26px; display:flex; flex-direction:column; }
.plan-trial{ border:2px solid var(--brand-600); box-shadow:0 16px 36px -28px rgba(3,86,214,.45); }
.plan-flag{ position:absolute; top:-13px; inset-inline-start:24px; background:var(--brand-50); color:var(--brand-800); font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:999px; }
.plan h2{ font-size:26px; }
.plan-for{ color:var(--ink-2); font-size:15px; margin-top:8px; min-height:3.1em; }
.plan-price{ margin:22px 0 18px; font-size:40px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.plan-price .per{ font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-inline-start:4px; }
.plan-list{ list-style:none; margin:0 0 24px; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; font-size:15px; color:var(--ink-2); flex:1; }
.plan-list li{ padding-inline-start:26px; position:relative; }
.plan-list li::before{ content:''; position:absolute; inset-inline-start:0; top:.45em; width:14px; height:8px; border-left:2.5px solid var(--mint-ink); border-bottom:2.5px solid var(--mint-ink); transform:rotate(-45deg); }

/* Compare */
.table-scroll{ position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.compare{ width:100%; border-collapse:collapse; min-width:560px; font-size:15px; }
.compare th, .compare td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:center; }
.compare thead th{ font-size:16px; font-weight:800; background:var(--paper); }
.compare tbody th{ text-align:start; font-weight:600; color:var(--ink-2); }
.compare tr:last-child > *{ border-bottom:0; }
.yes, .no{ display:inline-block; width:22px; height:22px; border-radius:50%; vertical-align:middle; position:relative; }
.yes{ background:var(--mint); }
.yes::after{ content:''; position:absolute; left:6px; top:6px; width:9px; height:5px; border-left:2.5px solid var(--mint-ink); border-bottom:2.5px solid var(--mint-ink); transform:rotate(-45deg); }
.no::after{ content:''; position:absolute; left:6px; top:10px; width:10px; height:2px; background:var(--line-2); }

/* FAQ */
.faq-wrap{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:56px; align-items:start; }
.faq-wrap .sec-head{ margin:0; }
.faq{ border-top:1px solid var(--line-2); }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-weight:700; font-size:18px; position:relative; }
html[dir="rtl"] .faq summary{ padding:22px 0 22px 40px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; inset-inline-end:4px; top:16px; font-size:28px; font-weight:400; color:var(--ink-3); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 0 24px; color:var(--ink-2); max-width:44em; }

/* Band */
.band{ background:linear-gradient(140deg, #071636 0%, var(--brand-900) 55%, #0b3a8c 100%); color:#f5f3ee; padding:clamp(64px, 9vw, 110px) 0; position:relative; overflow:hidden; }
.band::before{ content:''; position:absolute; inset:0; background:
  radial-gradient(340px 220px at 12% 20%, rgba(79,182,247,.30), transparent 70%),
  radial-gradient(360px 240px at 88% 80%, rgba(134,230,251,.16), transparent 70%),
  radial-gradient(260px 200px at 70% 10%, rgba(255,166,107,.18), transparent 70%); pointer-events:none; }
.band-in{ position:relative; text-align:center; max-width:760px; }
.band p{ margin-top:16px; font-size:19px; color:#cfccc4; }

/* About */
.about-grid{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:56px; align-items:start; }
.prose p{ margin-top:16px; color:var(--ink-2); font-size:18px; }
.prose .h3{ margin-bottom:4px; }
.card-facts{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.card-facts dl{ margin:8px 0 0; }
.facts-sub{ margin:22px 0 0; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-ink); }
html[lang="ar"] .facts-sub{ letter-spacing:0; }
.card-facts dl > div{ padding:12px 0; border-bottom:1px dashed var(--line-2); }
.card-facts dl > div:last-child{ border:0; }
.card-facts dt{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
html[lang="ar"] .card-facts dt{ letter-spacing:0; }
.card-facts dd{ margin:4px 0 0; font-weight:600; font-size:15.5px; overflow-wrap:anywhere; }
.values{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.values .tile{ min-height:0; }

/* Legal */
.sec-legal{ padding-top:24px; }
.legal-grid{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:56px; align-items:start; }
.toc{ position:sticky; top:92px; font-size:14px; }
.toc-h{ font-weight:800; margin-bottom:10px; }
.toc ol{ margin:0; padding-inline-start:20px; display:grid; gap:8px; color:var(--ink-3); }
.toc a{ color:var(--ink-2); text-decoration:none; }
.toc a:hover{ color:var(--ink); text-decoration:underline; }
.legal{ max-width:760px; }
.legal section{ scroll-margin-top:90px; padding-top:8px; }
.legal h2{ font-size:22px; letter-spacing:-.015em; margin:36px 0 4px; }
.legal-n{ color:var(--ink-3); }
.legal p, .legal li{ font-size:16.5px; color:var(--ink-2); }
.legal ul{ margin:12px 0 0; padding-inline-start:22px; display:grid; gap:6px; }
.legal-intro p{ font-size:18px; }
.legal-company{ margin-top:48px; padding:22px 24px; background:var(--paper-2); border-radius:var(--r); }
.legal-company p{ margin:2px 0; font-size:14.5px; }

/* Footer */
.foot{ background:var(--white); border-top:1px solid var(--line); padding:64px 0 36px; font-size:15px; }
.foot-grid{ display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap:40px; }
.foot h2{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:800; margin-bottom:14px; }
html[lang="ar"] .foot h2{ letter-spacing:0; }
.foot-grid > div > a{ display:block; color:var(--ink); text-decoration:none; padding:5px 0; }
.foot-grid > div > a:hover{ text-decoration:underline; }
/* Phone numbers never break across lines (footer, about, legal company block). */
.foot-grid a span[dir="ltr"], .card-facts a[dir="ltr"], .legal-company a[dir="ltr"]{ white-space:nowrap; }
.foot-brand p{ color:var(--ink-2); margin-top:14px; max-width:26em; }
.foot-brand .foot-hours{ font-size:14px; color:var(--mint-ink); font-weight:700; }
.foot-pay{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:44px; padding:22px 0; border-block:1px solid var(--line); }
.foot-pay-lbl{ font-size:13px; font-weight:700; color:var(--ink-3); }
.foot-pay img{ height:28px; width:auto; }
.foot-legal{ margin-top:22px; font-size:13px; color:var(--ink-3); display:grid; gap:6px; }

/* Entrance: one orchestrated load, nothing else moves. */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{ animation:rise .8s var(--ease) both; }
  .hero-copy > :nth-child(2){ animation-delay:.08s; } .hero-copy > :nth-child(3){ animation-delay:.16s; }
  .hero-copy > :nth-child(4){ animation-delay:.24s; } .hero-copy > :nth-child(5){ animation-delay:.32s; }
  .phone{ animation:rise 1s .2s var(--ease) both; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .chip, .live-dot{ animation:none; } html{ scroll-behavior:auto; } }

/* Responsive */
@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tile-span2{ grid-column:span 2; }
  .values{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .foot-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .nav, .hide-sm{ display:none; }
  .menu{ display:block; }
  .top-in{ gap:12px; justify-content:space-between; }
  .top-act{ gap:8px; }
  .hero-in{ grid-template-columns:minmax(0, 1fr); gap:72px; }
  .hero-stage{ padding-bottom:40px; }
  .promises-in{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .promise:nth-child(3){ border-inline-start:0; }
  .promise:nth-child(n+3){ border-top:1px solid var(--line); }
  .receipt-sec, .faq-wrap, .about-grid, .legal-grid{ grid-template-columns:minmax(0, 1fr); gap:36px; }
  .toc{ position:static; }
  .plans, .steps{ grid-template-columns:minmax(0, 1fr); }
  .plan-for{ min-height:0; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .top-in{ height:60px; }
  .top .brand span{ display:none; }
  .btn-sm{ padding:0 14px; }
  .top-lang{ display:none; }
  .menu-langs{ display:grid; }
  .menu-panel{ min-width:260px; }
  .top .btn-sm{ padding:0 14px; font-size:13px; min-height:38px; }
  .bento, .values{ grid-template-columns:minmax(0, 1fr); }
  .tile-wide, .tile-span2{ grid-column:auto; grid-row:auto; }
  .promises-in{ grid-template-columns:minmax(0, 1fr); }
  .promise + .promise{ border-inline-start:0; border-top:1px solid var(--line); }
  .chip{ font-size:12.5px; padding:8px 11px; }
  .chip{ display:none; }
  .hero-stage{ --pw:min(300px, calc(80vh / 2.1)); --pw:min(300px, calc(80svh / 2.1)); }
  .phone{ --r:44px; }
  .phone-status{ padding:0 22px 0 26px; }
  .receipt{ padding:24px 20px 22px; }
  .seg{ display:flex; width:100%; } .seg-btn{ flex:1; padding:10px 8px; }
  .foot-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cta-row .btn{ flex:1 1 100%; white-space:normal; text-align:center; line-height:1.25; padding-block:12px; }
}