/* ==========================================================================
   portal.css: "portal" visual layer for the Claude Code for Excel site.
   Loaded after the page's inline <style>, so it overrides it. Inspired by the
   style of haportal.ai (researched 2026-11-08): white / night bands, glows,
   pill buttons with a breathing halo, arched cards, scroll reveal. Own code.
   ========================================================================== */

:root{
  --night:#090c14; --night-2:#0f1421; --night-3:#161d2c; --night-line:#232c40;
  --ink:#0a1e3c; --band:#f5f8fc;
  --ease-soft:cubic-bezier(.2,.65,.3,1);

  /* retune the existing tokens */
  --bg:#ffffff; --bg2:#f5f8fc; --surface:#ffffff; --surf2:#f5f8fc;
  --border:#e3e9f2; --border2:#cfd9e6;
  --text:#1a2535; --text2:#4b586b; --text3:#6b7688;
  --sans:'Heebo', system-ui, -apple-system, 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  --display:var(--sans);
  --r:16px;
}

body{ background:var(--canvas); font-size:1.02rem; }
body::after{ display:none; }                       /* drop the faint grid backdrop */

/* warm off-white canvas everywhere light; white is kept for cards that sit on it */
:root{ --canvas:#f4f2ee; --canvas-2:#ebe8e2; --band:#f4f2ee; --bg:#f4f2ee; --bg2:#f4f2ee; --surf2:#f7f5f1;
  --border:#e6e1d8; --border2:#d6cfc3; }
#hero,.paths,#capabilities,#safety,#pricing,#what,#book,#faq,.contact-band{ background:var(--canvas)!important; }
#roi{ background:var(--canvas)!important; }
header nav{ background:rgb(244 242 238 / .86)!important; }
footer{ background:var(--canvas)!important; }
.mobile-cta{ background:rgb(244 242 238 / .92)!important; }
.asks{ background:var(--canvas-2)!important; }
@media(max-width:1040px){ .nav-links{ background:rgb(244 242 238 / .97)!important; } }

/* bands: no hairlines, the colour change does the separating */
#loop,#what,#capabilities,#case,#book,#safety,#roi,#pricing,#faq,#cta{ border-top:0; border-bottom:0; }
#loop::before,#what::before,#capabilities::before,#changes::before,#case::before,
#audience::before,#book::before,#safety::before,#pricing::before{ display:none; }
#what{ background:var(--band); }
#capabilities{ background:#fff; }
#book{ background:var(--band); }
#safety{ background:#fff; }
#roi{ background:var(--band)!important; }
#pricing{ background:#fff; }
#faq{ background:var(--band); }

/* ---------- type ---------- */
h1{ font-size:clamp(2.2rem, 2.4vw + 1.5rem, 3.75rem); font-weight:900; line-height:1.12; letter-spacing:-.025em; color:var(--ink); }
h1 .green{ color:var(--blue); }
h2{ font-size:clamp(1.9rem, 2vw + 1.2rem, 2.8rem); letter-spacing:-.02em; color:var(--ink); }
h1, h2, #loop h2, .identity-left h2{ color:var(--ink); }

/* ---------- 1. glass header ---------- */
header nav{ height:65px; background:rgb(255 255 255 / .85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgb(10 30 60 / .10); box-shadow:none; }
.nav-logo{ font-weight:900; letter-spacing:-.01em; }
.nav-links a{ color:var(--text2); }
.nav-links a:hover{ color:var(--ink); background:rgb(0 120 212 / .07); }
.lang-toggle{ background:rgb(15 39 64 / .04); border-color:var(--border); border-radius:9999px; }
.lang-toggle a{ border-radius:9999px; }
@media(max-width:1040px){ .nav-links{ background:rgb(255 255 255 / .97); } }
@media(max-width:860px){ header nav{ height:65px; } }

/* ---------- buttons: pills on a breathing green aura ----------
   Layers inside each button (the button is its own stacking context):
   ::before = blurred aura that breathes, ::after = the solid green face, then the text. */
.btn-primary,.btn-green,.btn-upwork,.book-btn,.nav-cta,.mobile-cta a{
  position:relative; z-index:0; isolation:isolate; overflow:visible; display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  border-radius:9999px; font-weight:900; color:#fff; background:transparent!important;
  box-shadow:0 14px 40px -10px rgb(20 168 0 / .65); animation:none;
  transition:transform .15s ease, box-shadow .2s ease; }
.btn-primary::before,.btn-green::before,.btn-upwork::before,.book-btn::before,.nav-cta::before,.mobile-cta a::before{
  content:""; display:block; position:absolute; inset:-6px; z-index:-2; border-radius:inherit;
  background:rgb(20 168 0 / .5); filter:blur(16px); transform:none; pointer-events:none;
  animation:aura 2.6s ease-in-out infinite; }
.btn-primary::after,.btn-green::after,.btn-upwork::after,.book-btn::after,.nav-cta::after,.mobile-cta a::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--green); transition:filter .2s; }
.btn-primary:hover::after,.btn-green:hover::after,.btn-upwork:hover::after,.book-btn:hover::after,.nav-cta:hover::after,.mobile-cta a:hover::after{ filter:brightness(1.1); }
.btn-primary:hover,.btn-upwork:hover,.book-btn:hover,.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -10px rgb(20 168 0 / .75); }
.btn-primary:active,.btn-upwork:active,.book-btn:active,.nav-cta:active,.mobile-cta a:active{ transform:scale(.98); }
.btn-primary,.btn-upwork{ padding:1rem 2.1rem; font-size:1.08rem; }
.nav-cta::before{ inset:-4px; filter:blur(12px); }          /* smaller aura in the header */
/* display:inline-flex above beats the pages' own mobile rules: keep the nav CTA hidden under 620px
   (the sticky bar replaces it) and the sticky bar button full width */
@media(max-width:620px){ .nav-cta{ display:none; } }
.mobile-cta a{ display:flex; justify-content:center; }
@keyframes aura{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.05); } }
.btn-ghost{ border-radius:9999px; background:#fff; border:1px solid var(--border2); color:var(--ink); font-weight:700; padding:1rem 1.8rem; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
/* drawn arrow: a line with an open "<" head (replaces the "←" font glyph, which renders differently per OS) */
.nudge{ position:relative; display:inline-block; width:1.05em; height:1.05em; vertical-align:-.14em; overflow:hidden; text-indent:200%; white-space:nowrap;
  animation:nudge 1.7s ease-in-out infinite; }
.nudge::before{ content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 5.5 4.5 12 11 18.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 5.5 4.5 12 11 18.5'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-4px); } }   /* RTL: forward is left */

/* ---------- 2. hero ---------- */
#hero{ min-height:auto; padding:8.5rem 0 2.5rem; background:#fff; overflow:hidden; }
#hero::before{ content:""; position:absolute; top:-9rem; left:50%; translate:-50% 0; width:60rem; height:60rem; border-radius:50%;
  background:radial-gradient(circle, var(--blue) 0%, transparent 62%); opacity:.08; pointer-events:none; }
.hero-sub{ font-size:1.14rem; }
.eyebrow{ border-radius:9999px; }

/* ---------- 3. arched media frame (the before/after card) ---------- */
.hero-stage{ border:0; border-radius:15rem 15rem 1.6rem 1.6rem / 10rem 10rem 1.6rem 1.6rem; padding:5.2rem 2.2rem 2.2rem;
  background:linear-gradient(#e8f1fb 0%, #f5f8fc 70%, #fff 100%);
  box-shadow:inset 0 0 0 6px rgb(0 120 212 / .12), 0 30px 70px -30px rgb(0 120 212 / .45); }

/* ---------- 5. choose-a-path cards ---------- */
.paths{ padding:1rem 0 5rem; background:#fff; }
.paths-label{ display:block; text-align:center; font-size:.9rem; font-weight:700; letter-spacing:.35em; color:var(--text3); margin-bottom:1.4rem; }
.paths-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.gate{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; color:#fff; text-decoration:none;
  border-radius:2.6rem 2.6rem 1rem 1rem; padding:2.2rem 1.4rem 1.6rem; transition:transform .2s var(--ease-soft); }
.gate:hover{ transform:translateY(-5px); }
.gate-badge{ font-size:.8rem; font-weight:800; padding:.2rem .8rem; border-radius:9999px; background:rgb(255 255 255 / .18); border:1px solid rgb(255 255 255 / .3); }
.gate-title{ font-size:1.35rem; font-weight:900; line-height:1.25; }
.gate-sub{ font-size:.98rem; line-height:1.55; color:rgb(255 255 255 / .82); max-width:22rem; }
.gate-go{ margin-top:.5rem; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:rgb(255 255 255 / .16); font-weight:900; }
.gate--me  { background:linear-gradient(135deg,#0b6a00,#14A800); box-shadow:0 18px 40px -16px rgb(20 168 0 / .6); }
.gate--team{ background:linear-gradient(135deg,#004e8c,#0078D4); box-shadow:0 18px 40px -16px rgb(0 120 212 / .6); }
.gate--case{ background:linear-gradient(165deg,#05080f 0%,#0f1421 55%,#161d2c 100%); box-shadow:0 18px 40px -16px rgb(5 10 25 / .7); }
@media(max-width:860px){ .paths-grid{ grid-template-columns:1fr; } }

/* ---------- 6–7. night bands ---------- */
.band-night{ background:var(--night)!important; color:#fff; overflow:hidden;
  --text:#ffffff; --text2:rgb(255 255 255 / .74); --text3:rgb(255 255 255 / .56);
  --surface:rgb(255 255 255 / .04); --surf2:rgb(255 255 255 / .06); --bg2:rgb(255 255 255 / .03);
  --border:var(--night-line); --border2:#2f3b56; --blue2:#4da3f0; --ink:#ffffff; }
.band-night h2, .band-night h3{ color:#fff; }
.band-night h2 em{ background:linear-gradient(120deg,#4da3f0,#9fd2ff); -webkit-background-clip:text; background-clip:text; }
.band-night .h2-sub{ color:#4da3f0; }
#loop.band-night .h2-sub{ color:#f87171; }
.band-night .section-label{ color:#9fd2ff; border-color:rgb(77 163 240 / .35); background:rgb(77 163 240 / .1); }
.band-night .section-label::before{ background:#4da3f0; }
.glow{ position:absolute; width:36rem; height:36rem; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.glow--tr{ top:-12rem; right:18%; } .glow--bl{ bottom:-12rem; left:18%; } .glow--top{ top:-10rem; left:50%; translate:-50% 0; width:42rem; height:42rem; }
.glow--red{ background:rgb(220 38 38 / .16); } .glow--blue{ background:rgb(0 120 212 / .2); } .glow--green{ background:rgb(20 168 0 / .18); }
@media(max-width:600px){ .glow{ width:22rem; height:22rem; filter:blur(80px); } }

/* glass cards on night */
.band-night .loop-grid{ background:none; border:0; gap:1rem; overflow:visible; }
.band-night .loop-card, .band-night .ch-card{ background:rgb(255 255 255 / .04); border:1px solid var(--night-line); border-radius:1rem; transition:border-color .2s, background .2s; }
.band-night .loop-card:hover{ border-color:rgb(248 113 113 / .45); background:rgb(255 255 255 / .06); }
.band-night .ch-body, .band-night .ch-card .ch-lede{ background:transparent; }
.band-night .stat-num{ background:linear-gradient(135deg,#4da3f0,#9fd2ff); -webkit-background-clip:text; background-clip:text; }
.band-night .callout{ background:rgb(255 255 255 / .04); border-color:var(--night-line); }
#loop.band-night .loop-arrow span{ background:rgb(77 163 240 / .1); border-color:rgb(77 163 240 / .3); }

/* ---------- cards: softer, rounder ---------- */
.feat-card,.safety-card,.id-card,.price-card,.step-row,.faq-item,.prereq,.table-note,.callout,.book-card,.install-track{ border-radius:1rem; }
.feat-card,.safety-card,.id-card{ box-shadow:0 1px 2px rgb(10 30 60 / .04); }
.feat-card:hover,.safety-card:hover{ box-shadow:0 18px 40px -20px rgb(10 30 60 / .25); }
.cap-more{ display:none; }
.feat-grid.show-all .cap-more{ display:block; }
.cap-toggle{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem; border-radius:9999px; border:1px solid var(--border2); background:#fff;
  color:var(--ink); font:700 1rem var(--sans); padding:.7rem 1.5rem; cursor:pointer; }
.cap-toggle:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- final CTA ---------- */
#cta{ padding:6rem 0; }
#cta .lead{ color:rgb(255 255 255 / .74); }
.band-night .btn-ghost{ background:rgb(255 255 255 / .06); color:#fff; border-color:rgb(255 255 255 / .16); }
.band-night .btn-ghost:hover{ border-color:#4da3f0; color:#fff; }
.band-night .cta-mail{ color:#9fd2ff; }

/* ---------- contact form (replaces the mailto link; Netlify Forms) ---------- */
.contact-band{ background:var(--band); padding:4.5rem 0 5rem; text-align:center; }
.cf-or{ margin:0 0 1.2rem; font-weight:900; color:var(--ink); font-size:clamp(1.4rem, 1vw + 1rem, 1.8rem); letter-spacing:-.01em; }
.contact-form{ max-width:560px; margin:0 auto; text-align:right; display:flex; flex-direction:column; gap:.9rem;
  background:#fff; border:1px solid var(--border); border-radius:1.25rem; padding:1.6rem; box-shadow:0 24px 50px -30px rgb(10 30 60 / .35); }
.contact-form .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.contact-form .field{ display:flex; flex-direction:column; gap:.35rem; }
.contact-form label{ font-size:.92rem; font-weight:700; color:var(--ink); }
.contact-form input[type=text],.contact-form input[type=email],.contact-form select,.contact-form textarea{
  width:100%; font:500 1rem var(--sans); color:var(--ink); background:var(--band); border:1px solid var(--border2); border-radius:.8rem; padding:.7rem .85rem; }
.contact-form textarea{ resize:vertical; min-height:6rem; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); background:#fff; }
.contact-form #cf-email{ text-align:right; }
.cf-consent{ display:flex; align-items:flex-start; gap:.55rem; }
.cf-consent input{ margin-top:.3rem; width:1.05rem; height:1.05rem; accent-color:var(--green); flex-shrink:0; }
.cf-consent label{ font-weight:500; font-size:.9rem; color:var(--text2); }
button.cf-submit{ align-self:flex-start; border:0; cursor:pointer; font-family:var(--sans); }
.cf-helper{ font-size:.85rem; color:var(--text3); }
@media(max-width:560px){ .contact-form .cf-row{ grid-template-columns:1fr; } .contact-form{ padding:1.1rem; } }

/* ---------- footer + mobile bar ---------- */
footer{ background:#fff; border-top:1px solid var(--border); padding-inline:max(1.5rem, calc((100% - 1040px) / 2)); }
.footer-meta{ font-size:.95rem; }
.mobile-cta{ background:rgb(255 255 255 / .9); }

/* ---------- de-template: drop chrome that reads as generated ---------- */
.section-label,.loop-label,.loop-num{ display:none; }                 /* eyebrow pills + fake 01–06 numbering */
h2 em{ background:none; -webkit-text-fill-color:currentColor; color:var(--blue); }
.band-night h2 em{ background:none; -webkit-text-fill-color:currentColor; color:#4da3f0; }

/* ---------- hand-drawn marker under the key phrase (draws itself in) ---------- */
h1 .marked{ position:relative; display:inline-block; }
h1 .mark{ position:absolute; inset-inline:-2%; bottom:-.32em; width:104%; height:.42em; overflow:visible; pointer-events:none; }
h1 .mark path{ fill:none; stroke:var(--green); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:620; stroke-dashoffset:620; animation:draw-mark 1.1s .7s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes draw-mark{ to{ stroke-dashoffset:0; } }

/* ---------- hero kicker: plain type + a hand-drawn strike (replaces the dot pill) ---------- */
.kicker{ font-size:1.12rem; line-height:1.5; margin:0 0 1.2rem; }
.kicker .k-muted{ color:var(--text3); font-weight:600; }
.kicker .k-strong{ color:var(--ink); font-weight:800; }
.kicker .struck{ position:relative; display:inline-block; }
.kicker .strike{ position:absolute; inset-inline:-4%; top:38%; width:108%; height:.6em; overflow:visible; pointer-events:none; }
.kicker .strike path{ fill:none; stroke:var(--red); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:140; stroke-dashoffset:140;
  animation:draw-mark .6s .35s cubic-bezier(.6,.1,.3,1) forwards; }

/* ---------- install step: a real button for the free installer, then the bridge to a session ---------- */
.btn-install{ display:inline-flex; align-items:center; gap:.6rem; margin-top:.8rem; padding:.85rem 1.5rem; border-radius:1rem;
  background:linear-gradient(135deg,#1a8be0,#0078D4 55%,#0064b5); color:#fff; font-weight:900; font-size:1.05rem; text-decoration:none;
  border-bottom:4px solid #004e8c; box-shadow:0 14px 28px -14px rgb(0 120 212 / .8); transition:transform .12s, border-bottom-width .12s, filter .2s; }
.btn-install:hover{ filter:brightness(1.08); }
.btn-install:active{ transform:translateY(3px); border-bottom-width:1px; margin-bottom:3px; }
.btn-install .bi-ico{ width:1.25rem; height:1.25rem; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2px); } }
.install-meta{ margin-top:.5rem; font-size:.82rem; font-weight:600; color:var(--text3); direction:rtl; }
.step-bridge{ background:rgb(20 168 0 / .06)!important; border-color:rgb(20 168 0 / .3)!important; }
.bridge-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.45rem; font-weight:900; color:var(--green2); text-decoration:none; }
.bridge-link:hover{ color:var(--green); }
@media (prefers-reduced-motion:reduce){ .btn-install .bi-ico{ animation:none; } }

/* ---------- hero field: dots that wake up around the pointer ---------- */
.hero-field{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ---------- button face: gradient + coloured drop, like a real key ---------- */
.btn-primary::after,.btn-upwork::after,.book-btn::after,.nav-cta::after,.mobile-cta a::after{
  background:linear-gradient(135deg,#3ccb28 0%,#14A800 45%,#0e8a00 100%); }
.btn-primary,.btn-upwork,.book-btn,.nav-cta,.mobile-cta a{ box-shadow:0 16px 30px -14px rgb(14 138 0 / .9); }

/* ---------- tactile buttons: darker bottom edge that sinks when pressed ---------- */
.btn-primary::after,.btn-upwork::after,.book-btn::after,.nav-cta::after,.mobile-cta a::after{ box-shadow:0 4px 0 #0b6a00; }
.btn-primary:hover,.btn-upwork:hover,.book-btn:hover,.nav-cta:hover{ transform:none; }
.btn-primary:active,.btn-upwork:active,.book-btn:active,.nav-cta:active,.mobile-cta a:active{ transform:translateY(3px); }
.btn-primary:active::after,.btn-upwork:active::after,.book-btn:active::after,.nav-cta:active::after,.mobile-cta a:active::after{ box-shadow:0 1px 0 #0b6a00; }
.btn-ghost,.cap-toggle{ border:2px solid var(--border); border-bottom-width:5px; border-radius:1rem; transition:transform .12s, border-color .2s, color .2s; }
.btn-ghost:active,.cap-toggle:active{ transform:translateY(3px); border-bottom-width:2px; margin-bottom:3px; }
/* arrow sits in its own little circle and nudges forward */
.btn-primary .nudge,.btn-upwork .nudge,.book-btn .nudge,.nav-cta .nudge,.mobile-cta .nudge{
  width:1.75em; height:1.75em; border-radius:50%; vertical-align:middle; background:rgb(255 255 255 / .22); }
.btn-primary .nudge::before,.btn-upwork .nudge::before,.book-btn .nudge::before,.nav-cta .nudge::before,.mobile-cta .nudge::before{ inset:.4em; }
.gate-go .nudge{ width:1.15em; height:1.15em; }

/* ---------- hero: live mini-spreadsheet (the one memorable thing) ---------- */
.hero-visual{ position:relative; }
.hero-stage{ padding:4.4rem 1.6rem 1.6rem; min-height:0; gap:0; }
.ls{ display:flex; flex-direction:column; gap:.75rem; font-size:.9rem; }
.ls-steps{ list-style:none; display:flex; justify-content:center; gap:.4rem; margin:0 auto .2rem; }
.ls-steps .st{ font-size:.78rem; font-weight:800; color:var(--text3); padding:.2rem .7rem; border-radius:9999px; background:#fff; border:1px solid var(--border); transition:all .35s; }
.ls[data-step="0"] .st-0,.ls[data-step="1"] .st-1,.ls[data-step="2"] .st-1,.ls[data-step="3"] .st-2{ color:#fff; background:var(--blue); border-color:var(--blue); }
.ls-bubble{ align-self:flex-start; max-width:92%; background:#fff; border:1px solid var(--border); border-radius:1rem 1rem 1rem .3rem; padding:.55rem .8rem; box-shadow:0 6px 16px -10px rgb(10 30 60 / .3); line-height:1.5; }
.ls-who{ display:block; font-size:.72rem; font-weight:800; color:var(--blue); margin-bottom:.1rem; }
.ls-typed{ color:var(--ink); font-weight:600; }
.ls-typed.typing::after{ content:""; display:inline-block; width:2px; height:1em; margin-inline-start:2px; vertical-align:-2px; background:var(--blue); animation:caret .8s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
.ls-files{ display:flex; gap:.4rem; justify-content:center; transition:opacity .5s, transform .6s var(--ease-soft), max-height .6s; max-height:3rem; }
.ls-file{ font-size:.76rem; font-weight:700; padding:.25rem .6rem; border-radius:.5rem; background:rgb(209 52 56 / .08); border:1px solid rgb(209 52 56 / .25); color:var(--red2); }
.ls[data-step="0"] .ls-file{ animation:jiggle 1.6s ease-in-out infinite; }
.ls-file:nth-child(2){ animation-delay:.2s!important; } .ls-file:nth-child(3){ animation-delay:.4s!important; }
@keyframes jiggle{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-2deg); } }
.ls:not([data-step="0"]) .ls-files{ opacity:0; transform:translateY(14px) scale(.85); max-height:0; }
.ls-table{ background:#fff; border:1px solid var(--border); border-radius:.8rem; overflow:hidden; }
.ls-row{ display:grid; grid-template-columns:1.2fr 1.1fr .9fr; gap:.4rem; padding:.42rem .7rem; border-top:1px solid #eef2f7; font-size:.82rem; color:var(--text);
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease-soft), background .4s, max-height .5s, padding .5s; max-height:3rem; }
.ls-row.ls-head{ border-top:0; background:#eef4fb; font-weight:800; color:var(--text2); font-size:.76rem; }
.ls-row .num{ direction:ltr; text-align:right; font-variant-numeric:tabular-nums; }
.ls[data-step="0"] .ls-row:not(.ls-head){ opacity:0; transform:translateX(-18px); }
.ls-row.r2{ transition-delay:.12s; } .ls-row.r3{ transition-delay:.24s; } .ls-row.r4{ transition-delay:.36s; }
.ls[data-step="2"] .ls-row.dup{ background:rgb(209 52 56 / .1); }
.ls[data-step="3"] .ls-row.dup{ opacity:0; max-height:0; padding-block:0; border-top-width:0; }
.miss{ font-style:normal; font-size:.72rem; font-weight:800; color:#fff; background:var(--red); padding:.08rem .45rem; border-radius:.35rem; display:inline-block; transform:scale(0); transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
.ls[data-step="2"] .miss,.ls[data-step="3"] .miss{ transform:scale(1); }
.ls-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:2.3rem; }
.ls-status{ font-size:.8rem; font-weight:700; color:var(--text2); }
.ls-status .s-done{ display:none; color:var(--green2); }
.ls[data-step="3"] .ls-status .s-work{ display:none; } .ls[data-step="3"] .ls-status .s-done{ display:inline; }
.ls[data-step="0"] .ls-status{ visibility:hidden; }
.spin{ display:inline-block; width:.8rem; height:.8rem; border:2px solid var(--border2); border-top-color:var(--blue); border-radius:50%; margin-inline-end:.35rem; vertical-align:-1px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ls-ok{ font-size:.82rem; font-weight:900; color:#fff; background:var(--green); padding:.4rem 1rem; border-radius:.7rem; box-shadow:0 3px 0 #0b6a00; opacity:.35; transition:opacity .3s, transform .12s, box-shadow .12s; }
.ls[data-step="3"] .ls-ok{ opacity:1; }
.ls.pressed .ls-ok{ transform:translateY(3px); box-shadow:0 0 0 #0b6a00; }

/* floating arched tiles around the hero card */
.float-tile{ position:absolute; z-index:2; width:3rem; height:3.5rem; display:inline-flex; align-items:flex-end; justify-content:center; padding-bottom:.55rem;
  border-radius:9999px 9999px .5rem .5rem; font-weight:900; font-size:1.15rem; box-shadow:0 10px 24px -14px rgb(10 30 60 / .45);
  animation:float-tile 5s ease-in-out infinite; }
@keyframes float-tile{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-9px) rotate(var(--rot,0deg)); } }
.ft-1{ top:8%;  left:-1.2rem; background:#e7f1fa; color:var(--blue); --rot:-6deg; }
.ft-2{ top:38%; right:-1.4rem; background:#efeafb; color:#7c5cd6; --rot:5deg; animation-delay:1.2s; font-style:italic; }
.ft-3{ bottom:-1.3rem; right:24%; background:#e3f5ec; color:var(--green2); --rot:4deg; animation-delay:2.1s; }
.ft-4{ top:-1rem; right:22%; background:#fdecec; color:var(--red); --rot:-4deg; animation-delay:.6s; }
@media(max-width:600px){ .ft-1,.ft-2{ display:none; } }

/* ---------- moving strip of example requests ---------- */
.asks{ position:relative; overflow:hidden; background:var(--band); padding:1.1rem 0; border-block:1px solid var(--border);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.asks-track{ display:flex; width:max-content; animation:asks 60s linear infinite; }
.asks:hover .asks-track{ animation-play-state:paused; }
.asks-row{ display:flex; gap:.9rem; list-style:none; padding-inline-end:.9rem; }
.ask{ white-space:nowrap; font-size:.95rem; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--border); border-radius:1rem 1rem 1rem .3rem; padding:.5rem 1rem; box-shadow:0 4px 12px -8px rgb(10 30 60 / .25); }
@keyframes asks{ to{ transform:translateX(50%); } }        /* RTL: content flows toward the right edge */

/* ---------- 9. scroll reveal (only when JS is running) ---------- */
.fade-up,.slide-left,.slide-right{ opacity:1; transform:none; transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.reveal-ready .fade-up:not(.in){ opacity:0; transform:translateY(24px); }
.reveal-ready .slide-left:not(.in){ opacity:0; transform:translateX(-24px); }
.reveal-ready .slide-right:not(.in){ opacity:0; transform:translateX(24px); }

@media (prefers-reduced-motion:reduce){
  .btn-primary::before,.btn-green::before,.btn-upwork::before,.book-btn::before,.nav-cta::before,.mobile-cta a::before,.nudge{ animation:none; }
  .reveal-ready .fade-up:not(.in),.reveal-ready .slide-left:not(.in),.reveal-ready .slide-right:not(.in){ opacity:1; transform:none; }
  .fade-up,.slide-left,.slide-right,.gate{ transition:none; }
  .float-tile,.ls-file,.spin,.ls-typed.typing::after{ animation:none!important; }
  h1 .mark path,.kicker .strike path{ animation:none; stroke-dashoffset:0; }
  .asks-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .asks-row[aria-hidden="true"]{ display:none; }
  .asks-row{ flex-wrap:wrap; justify-content:center; }
  .ask{ white-space:normal; }
}

/* ---------- left-to-right pages (English): arrows point right and nudge right ---------- */
[dir="ltr"] .nudge::before{ transform:scaleX(-1); }
[dir="ltr"] .nudge{ animation-name:nudge-ltr; }
@keyframes nudge-ltr{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
[dir="ltr"] .contact-form{ text-align:left; }
[dir="ltr"] .contact-form #cf-email{ text-align:left; }