:root{
  --night:#0f2f4a; --night-2:#173f60; --night-3:#1f4f74; --teal:#1f6386; --sky:#7fb3cf; --sky-soft:#e8f2f8;
  --gold:#c9a24b; --gold-2:#e8cd86; --gold-3:#f6e7bf; --gold-soft:#f8f0dc; --gold-deep:#8a6a22;
  --parch:#f3e7cb; --parch-2:#e6d3a8; --parch-ink:#2a1d12;
  --ink:#1d2a36; --muted:#5b6b7a; --line:#e3e9ef; --paper:#fffdf8;
  --ok:#1f8a5b; --ok-soft:#e1f3ea; --warn:#c0562b; --warn-soft:#fbe8df;
  --bg:#ffffff; --bg-alt:#f5f8fb; --radius:18px; --shadow:0 18px 40px -18px rgba(15,47,74,.35);
  --serif:'Frank Ruhl Libre','David Libre',Georgia,serif; --sans:'Inter','Assistant','Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--teal)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);border-radius:2px}
.dark .eyebrow,.hero .eyebrow{color:var(--sky)}
h1,h2,h3{font-family:var(--serif);color:var(--night);line-height:1.12;font-weight:800;text-wrap:balance}
h2{font-size:clamp(30px,4vw,44px);margin:12px 0 16px}
h3{font-size:22px}
.dark h2,.dark h3{color:#fff}
.lead{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:680px}
.dark .lead{color:rgba(255,255,255,.74)}
.center{text-align:center}.center .lead{margin-inline:auto}
section{padding:clamp(64px,9vw,112px) 0;position:relative}
.dark{background:var(--night);color:#fff}
.alt{background:var(--bg-alt)}
.gold-text{background:linear-gradient(100deg,#b8892f 0%,var(--gold-2) 25%,#fff4d2 38%,var(--gold-2) 50%,#b8892f 75%,var(--gold-2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite}
@keyframes foil{to{background-position:-250% 0}}

/* buttons */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--sans);text-decoration:none;border-radius:999px;padding:16px 28px;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s;cursor:pointer;border:0;white-space:nowrap;transform:translate(var(--mx),var(--my))}
.btn-primary{background:var(--gold);color:var(--night);box-shadow:0 10px 24px -10px rgba(201,162,75,.9);position:relative;overflow:hidden;isolation:isolate}
.btn-primary:hover{background:#d5b05a;box-shadow:0 14px 30px -10px rgba(201,162,75,1)}
.btn svg{width:18px;height:18px;flex:none}
.btn-outline{color:var(--night);border:1.5px solid var(--night);background:#fff}.btn-outline:hover{background:var(--sky-soft)}
.btn-primary::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(255deg,transparent 30%,rgba(255,255,255,.8) 48%,transparent 66%);transform:translateX(120%);animation:shine 4.5s ease-in-out infinite 1.4s;pointer-events:none}
@keyframes shine{0%{transform:translateX(120%)}22%,100%{transform:translateX(-120%)}}
/* every order button: a flash of light runs across it, and it glows for a moment */
.btn[href^="order.html"],.btn.send{position:relative;overflow:hidden;isolation:isolate;animation:zap 3.2s ease-in-out infinite 1s}
.btn[href^="order.html"]::after,.btn.send::after{content:"";position:absolute;inset:-4px;z-index:-1;background:linear-gradient(250deg,transparent 28%,rgba(255,255,255,.35) 40%,#fff 48%,rgba(255,255,255,.35) 56%,transparent 68%);transform:translateX(130%);animation:shine 3.2s cubic-bezier(.5,0,.3,1) infinite 1s;pointer-events:none}
@keyframes zap{0%,12%,30%,100%{box-shadow:0 10px 24px -10px rgba(201,162,75,.9)}20%{box-shadow:0 0 0 3px rgba(255,236,170,.55),0 0 28px 6px rgba(255,214,110,.75)}}
.btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-dark{background:var(--night);color:#fff}
.btn-dark:hover{background:var(--night-2)}
.btn-line{background:#fff;color:var(--night);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--gold)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* banner */
.banner{background:linear-gradient(90deg,var(--gold-deep),#b38a34 50%,var(--gold-deep));color:#fff;text-align:center;font:700 15.5px/1.4 var(--sans);padding:10px 16px;display:flex;gap:10px 14px;justify-content:center;align-items:center;flex-wrap:wrap}
.banner{position:relative;padding-inline:44px}
.banner.sale{background:linear-gradient(90deg,#8f2f14,var(--warn) 50%,#8f2f14)}
.banner .bx{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.8;padding:4px 8px}
.banner .bx:hover{opacity:1}
.banner a{background:#fff;color:var(--night);border-radius:20px;padding:5px 14px;text-decoration:none;font-weight:800;font-size:14px}

/* top bar: white, like a clean letterhead */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.scrolled{border-color:var(--line);box-shadow:0 6px 20px -14px rgba(15,47,74,.4)}
.top .wrap{display:flex;align-items:center;gap:24px;height:72px}
.bh{position:absolute;top:4px;right:10px;font-size:11px;color:var(--muted);font-family:var(--serif)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-left:auto}
.brand img{width:40px;height:40px;border-radius:10px}
.brand b{font-family:var(--serif);font-size:23px;color:var(--night);display:block;line-height:1.1;direction:ltr;text-align:right}
.wm span{color:var(--gold)}
.brand small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);opacity:.8;position:relative;transition:color .2s,opacity .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;right:0;left:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:hover{opacity:1;color:var(--teal)}
.nav a.cur{opacity:1;color:var(--teal)}.nav a.cur::after{transform:scaleX(1)}
.top .btn{padding:12px 20px;font-size:14.5px}
.menu-btn{display:none;width:42px;height:42px;border-radius:10px;border:0;background:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;flex:none}
.menu-btn span{width:22px;height:2px;border-radius:2px;background:var(--night);transition:transform .3s var(--ease),opacity .2s}
.top.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.menu-open .menu-btn span:nth-child(2){opacity:0}
.top.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1180px){.nav{gap:16px}.nav a{font-size:14px}}
@media (max-width:1060px){
  .menu-btn{display:flex}
  .top .btn{display:none}
  .nav{position:absolute;top:72px;right:0;left:0;display:flex;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(15,47,74,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .top.menu-open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
  .nav a{padding:16px 20px;border-top:1px solid var(--line);opacity:1;font-size:16px}
  .nav a::after{display:none}
  .nav a.cur{background:var(--sky-soft)}
}
@media (max-width:420px){.brand small{display:none}.brand b{font-size:21px}}

/* hero: deep navy, the name in gold, and the scanned scroll */
.hero{overflow:hidden;background:radial-gradient(1200px 600px at 15% -10%,#1f6386 0%,transparent 60%),linear-gradient(200deg,#0f2f4a 0%,#0b2236 100%);color:#fff;padding:clamp(56px,8vw,104px) 0 clamp(130px,15vw,180px)}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;z-index:1}
.hero h1{color:#fff;font-size:clamp(46px,6.4vw,82px);letter-spacing:-.02em;margin:16px 0 18px;direction:ltr;text-align:right;animation:fadeUp .9s var(--ease) .15s both}
.hero h1 span{color:var(--gold)}
.hero-lead{font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.82);max-width:520px}
.fade-up{opacity:0;transform:translateY(16px);animation:fadeUp .9s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ctas,.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:48px}.hero-art{max-width:560px;width:100%;margin-inline:auto}}
@media (max-width:720px){.hero .ctas .btn{flex:1 1 100%}}

/* the scroll: wooden rollers, parchment with real text, scan beam, magnifier */
.hero-art{position:relative;perspective:1600px}
/* one ring around one mistake, on the scroll and on the photo */
.hero .tag.t1{display:none}
.photo,.hbg{display:none}
.art-photo .scroll,.art-bg .scroll{display:none}
.art-photo .photo{display:block;position:relative;border-radius:18px;overflow:hidden;transform:rotateY(-6deg) rotateX(3deg);box-shadow:0 40px 70px -25px rgba(0,0,0,.75),0 0 0 1px rgba(201,162,75,.4);transition:transform .6s var(--ease);cursor:zoom-in}
.art-photo .hero-art:hover .photo{transform:none}
.photo img{width:100%;display:block;filter:contrast(1.05)}
.pbeam{position:absolute;inset-inline:0;height:80px;top:-80px;background:linear-gradient(180deg,transparent,rgba(127,214,255,.12) 60%,rgba(127,214,255,.6) 97%,transparent);mix-blend-mode:multiply;animation:beam 5.5s cubic-bezier(.45,0,.55,1) 1s infinite}
.pring{position:absolute;border:3px solid var(--warn);border-radius:999px;box-shadow:0 0 0 6px rgba(192,86,43,.2),0 0 24px rgba(192,86,43,.55);animation:ringIn .9s var(--ease) .8s both,ringGlow 2.6s ease-in-out 1.8s infinite;pointer-events:none}
@keyframes ringIn{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
@keyframes ringGlow{50%{box-shadow:0 0 0 10px rgba(192,86,43,.12),0 0 34px rgba(192,86,43,.75)}}
.plens{position:absolute;top:0;left:0;width:140px;height:140px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:0 0 0 4px #e8cd86,0 0 0 7px #8a6a22,0 18px 40px rgba(0,0,0,.45);background-repeat:no-repeat}
.plens.on{opacity:1}
.art-photo .tag.t2,.art-bg .tag.t2{bottom:auto;top:62%;right:auto;left:-6%}
.art-bg .hbg{display:block;position:absolute;inset:0;overflow:hidden}
.hbg-in{position:absolute}
.hbg-in img{width:100%;height:100%;display:block}
.art-bg .hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(11,34,54,.97) 0%,rgba(11,34,54,.9) 40%,rgba(11,34,54,.35) 70%,rgba(11,34,54,.15) 100%),linear-gradient(0deg,rgba(11,34,54,.85),transparent 30%)}
.art-bg .hbg .pring{z-index:2}
.art-bg .hbg-in{z-index:auto}
.art-bg .hbg::after{z-index:1}
.art-bg .hero-art{min-height:420px}
.art-bg .tag.t2{position:absolute;top:auto;bottom:20%;left:0}
.tag.near{animation-delay:1.2s,1.9s;font-size:clamp(17px,1.5vw,21px);padding:14px 20px;border-radius:18px;gap:11px}
.tag.near i{width:12px;height:12px}
@media (max-width:560px){.tag.near{font-size:16px;padding:12px 16px}}
.tag.near::before{content:"";position:absolute;top:-7px;left:calc(var(--cx,50%) - 7px);border:7px solid transparent;border-top:0;border-bottom-color:rgba(255,255,255,.96)}
@media (max-width:980px){.art-bg .hbg::after{background:linear-gradient(180deg,rgba(11,34,54,.96) 0%,rgba(11,34,54,.88) 50%,rgba(11,34,54,.3) 80%,rgba(11,34,54,.6) 100%)}}
.scroll{position:relative;display:flex;align-items:stretch;justify-content:center;transform:rotateY(-8deg) rotateX(4deg);transform-style:preserve-3d;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6));transition:transform .6s var(--ease)}
.hero-art:hover .scroll{transform:rotateY(-3deg) rotateX(2deg)}
.etz{width:30px;flex:none;position:relative;z-index:2;border-radius:15px;background:linear-gradient(90deg,#2a160a,#6d4321 30%,#b07a42 52%,#7a4c25 70%,#341c0c)}
.etz::before,.etz::after{content:"";position:absolute;right:-9px;left:-9px;height:30px;border-radius:12px;background:radial-gradient(circle at 50% 30%,#fff7da,var(--gold-2) 25%,#9b7426 70%,#5d4413)}
.etz::before{top:-22px}.etz::after{bottom:-22px}
.etz i{position:absolute;right:50%;transform:translateX(50%);width:12px;height:30px;border-radius:6px;background:linear-gradient(90deg,#5d4413,var(--gold-2),#5d4413)}
.etz i:first-child{top:-46px}.etz i:last-child{bottom:-46px}
.sheet{position:relative;overflow:hidden;flex:1 1 0;max-width:0;animation:unroll 1.8s var(--ease) .35s forwards;background:radial-gradient(120% 90% at 50% 40%,#f7ecd2,var(--parch) 55%,#e2cc9c 100%);box-shadow:inset 0 0 40px rgba(122,84,30,.28)}
@keyframes unroll{to{max-width:1000px}}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(80,50,15,.22),transparent 7%,transparent 93%,rgba(80,50,15,.22)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 26px 30px;width:var(--sheetw,520px);direction:rtl}
.cols p{font-family:var(--serif);font-weight:700;color:var(--parch-ink);font-size:13.4px;line-height:1.72;text-align:justify;text-align-last:justify;word-spacing:-.04em}
.cols p .w{transition:color .3s,text-shadow .3s}
.cols p .w.lit{color:#0d4f7a;text-shadow:0 0 10px rgba(127,214,255,.8)}
.beam{position:absolute;inset-inline:0;height:90px;top:-90px;background:linear-gradient(180deg,transparent,rgba(127,214,255,.10) 55%,rgba(127,214,255,.55) 96%,rgba(255,255,255,.9) 99%,transparent);mix-blend-mode:multiply;animation:beam 5.5s cubic-bezier(.45,0,.55,1) 2s infinite;pointer-events:none;z-index:3}
.beam::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:#7fd6ff;box-shadow:0 0 18px 4px rgba(127,214,255,.85)}
@keyframes beam{0%{top:-90px}75%,100%{top:100%}}
.ring{position:absolute;z-index:4;border-radius:999px;border:2.5px solid var(--warn);box-shadow:0 0 0 5px rgba(192,86,43,.18);opacity:0;transform:scale(1.6);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.ring.ok{border-color:var(--ok);box-shadow:0 0 0 5px rgba(31,138,91,.18)}
.ring.on{opacity:1;transform:none}
.lens{position:absolute;z-index:5;width:150px;height:150px;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s;box-shadow:0 0 0 4px #e8cd86,0 0 0 7px #8a6a22,0 18px 40px rgba(0,0,0,.45),inset 0 0 30px rgba(0,0,0,.15);background:var(--parch)}
.lens.on{opacity:1}
.lens .cols{position:absolute;top:0;right:0;transform-origin:100% 0}
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 40%)}
.tag{position:absolute;z-index:6;background:rgba(255,255,255,.96);color:var(--night);border-radius:16px;padding:11px 15px;font-size:14.5px;font-weight:800;box-shadow:0 20px 40px -14px rgba(0,0,0,.55);display:flex;gap:9px;align-items:center;white-space:nowrap;opacity:0;animation:tagIn .7s var(--ease) forwards,float 6s ease-in-out infinite}
.tag i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft);flex:none}
.tag.w i{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
.tag.t1{top:10%;left:-4%;animation-delay:2.3s,3s}
.tag.t2{bottom:9%;right:-2%;animation-delay:2.7s,3.4s}
@keyframes tagIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{50%{translate:0 -9px}}
@media (max-width:560px){.tag.t1{left:2px}.tag.t2{right:2px}.tag{font-size:13px;padding:9px 12px}.etz{width:22px}.cols{gap:16px;padding:18px 16px 22px}.cols p{font-size:11.5px}}

.one{margin:64px auto 0;max-width:640px}
.one h3{font-size:clamp(24px,3vw,30px);margin-bottom:8px}
.one>p{color:var(--muted);margin:0 auto 22px;max-width:560px}
.morph{display:flex;justify-content:center}
.verse{position:relative;width:min(440px,100%)}
.vsheet{background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(120,80,20,.22) 100%),linear-gradient(180deg,#f6eed9,#efe3c4);border-radius:6px;padding:clamp(22px,3vw,30px) clamp(18px,3vw,28px);box-shadow:var(--shadow),inset 0 0 0 1px rgba(110,80,30,.18);border-inline:10px solid #7a4c25}
.vsheet p{font:700 clamp(25px,3vw,34px)/1.75 var(--serif);color:var(--parch-ink);text-align:justify;text-align-last:right}
.vw{white-space:nowrap}
.hw{position:relative;display:inline-block}
.hw .h1,.hw .h2{display:inline-block}
.hw .h1{position:absolute;right:0;top:0;transition:opacity 1.3s var(--ease),filter 1.3s var(--ease)}
.hw .zoom{position:absolute;left:-.32em;top:.12em;width:.9em;height:.9em;border:3px solid var(--warn);border-radius:50%;opacity:0;transform:scale(1.8);transition:opacity .45s .8s,transform .6s .8s var(--ease)}
.verse figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:15px}
.verse .vref{color:var(--gold-deep);font-weight:600}
.verse figcaption b{font-weight:700;font-size:16px;color:var(--ok);transition:color .4s .8s}
.morph.go .hw .h1{opacity:0;filter:blur(2px)}
.morph.go .hw .zoom{opacity:1;transform:none}
.morph.go .verse figcaption b{color:var(--warn)}
.after-steps{margin-top:52px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* cards: the three benefits overlap the hero; a soft gold spotlight follows the mouse */
.benefits{margin-top:clamp(-96px,-9vw,-72px);position:relative;z-index:2;padding:0}
.benefits .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{--x:50%;--y:50%;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--x) var(--y),rgba(201,162,75,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
.benefit{display:flex;gap:16px;align-items:flex-start}
.ico{flex:none;width:48px;height:48px;border-radius:14px;background:var(--sky-soft);color:var(--teal);display:grid;place-items:center}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{font-family:var(--sans);font-size:17px;font-weight:700;margin-bottom:4px}
.benefit p{color:var(--muted);font-size:15px}
@media (max-width:980px){.benefits .wrap{grid-template-columns:1fr}}
@media (max-width:720px){.card{padding:22px}}

/* about */
.about .wrap{max-width:820px;text-align:center}
.about .sub{color:var(--teal);font-weight:600;font-size:15px;margin-bottom:12px}
.about .paras p{color:var(--muted);font-size:17px;margin-bottom:14px}
.link-btn{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--teal);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.link-btn:hover{color:var(--night)}

/* steps: navy numbers on a dashed line, and a gold thread that fills as you scroll */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:24px;margin-top:56px;position:relative}
.thread{position:absolute;top:34px;right:calc(50% / var(--n,4));left:calc(50% / var(--n,4));border-top:2px dashed #c6d6e2}
.thread i{position:absolute;top:-2px;right:0;left:0;height:2px;background:linear-gradient(270deg,var(--gold),#e8cd86);transform-origin:100% 50%;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(201,162,75,.6)}
.step{position:relative;text-align:center;padding:0 6px}
.num{width:68px;height:68px;margin:0 auto 22px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font:700 26px var(--serif);box-shadow:0 0 0 8px var(--bg-alt),0 0 0 9px #d6e2ec;position:relative;transition:background .5s,color .5s,box-shadow .5s}
.step.lit .num{background:var(--gold);color:var(--night);box-shadow:0 0 0 8px var(--bg-alt),0 0 0 9px var(--gold),0 0 26px rgba(201,162,75,.6)}
.step h3{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px;max-width:320px;margin-inline:auto}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:34px}.thread{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* report section: a phone showing the customer's page */
.rep{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ticks{list-style:none;display:grid;gap:14px;margin:26px 0 32px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:17.5px}
.ticks li::before{content:"✓";flex:none;width:27px;height:27px;border-radius:50%;background:var(--night);color:var(--gold-2);font-weight:800;display:grid;place-items:center;font-size:14px;margin-top:2px}
.phone{position:relative;width:min(330px,100%);margin-inline:auto;border-radius:44px;padding:12px;background:linear-gradient(145deg,#2b3a4a,#0b1622);box-shadow:0 50px 80px -30px rgba(11,22,34,.7),inset 0 0 0 1.5px rgba(255,255,255,.12);animation:float 7s ease-in-out infinite}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#05090e;z-index:2}
.screen{border-radius:34px;overflow:hidden;background:var(--paper);padding:54px 16px 22px;font-size:13.5px}
.screen .sh{font-family:var(--serif);font-size:20px;font-weight:800;color:var(--night);margin-bottom:2px}
.screen .ss{color:var(--muted);font-size:12px;margin-bottom:12px}
.verdict{border-radius:16px;padding:12px;text-align:center;border:2px solid var(--warn);background:var(--warn-soft);color:var(--warn);margin-bottom:12px}
.verdict b{font:800 22px var(--serif);display:block}
.pdf{border-radius:12px;background:#fff;border:1px solid var(--line);padding:10px;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.pdf i{width:38px;height:46px;border-radius:6px;background:linear-gradient(180deg,#e45d4a,#b8392a);color:#fff;font:800 10px var(--sans);font-style:normal;display:grid;place-items:center;flex:none}
.pdf b{display:block;font-size:13.5px;color:var(--night)}
.pdf small{color:var(--muted);font-size:11.5px}
.fixr{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 10px;margin-bottom:7px}
.fixr .cb{width:18px;height:18px;border-radius:5px;background:var(--night);color:var(--gold-2);display:grid;place-items:center;font-size:11px;flex:none}
.fixr .cb.off{background:#fff;border:1.5px solid #c9ced4}
.fixr span{flex:1;line-height:1.3}
.fixr .cb.rd{border-radius:50%;font-size:9px}
.ph-q{font-weight:800;color:var(--night);margin:4px 2px 8px}
.fixr em{font-style:normal;font-weight:800;color:var(--night)}
.screen .go{margin-top:10px;border-radius:999px;background:var(--gold);color:var(--night);text-align:center;font-weight:800;padding:11px}
@media (max-width:900px){.rep{grid-template-columns:1fr}}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px 30px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.price:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.price.featured{background:radial-gradient(500px 300px at 50% 0,#1d3a58,var(--night));color:#fff;border:0;transform:translateY(-14px);box-shadow:0 40px 70px -30px rgba(11,22,34,.8)}
.price.featured:hover{transform:translateY(-20px)}
.price.featured::before{content:"";position:absolute;inset:-2px;border-radius:28px;padding:2px;background:conic-gradient(from var(--a,0deg),#8a6a22,var(--gold-2),#fff4d2,var(--gold),#8a6a22 40%,#8a6a22 60%,var(--gold-2),#8a6a22);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.price.featured h3{color:#fff}
.price.featured .desc,.price.featured li{color:rgba(255,255,255,.8)}
.price .badge{position:absolute;top:-15px;right:26px;background:linear-gradient(180deg,#e2c06c,var(--gold));color:var(--night);font-weight:800;font-size:13.5px;border-radius:999px;padding:6px 15px;box-shadow:0 8px 18px -8px rgba(201,162,75,.9)}
.price .amt{font-family:var(--serif);font-size:46px;font-weight:800;color:var(--gold-deep);margin:12px 0 4px;line-height:1.1}
.price.featured .amt{color:var(--gold-2)}
.price .amt small{font-size:16px;font-family:var(--sans);font-weight:700;color:var(--muted)}
.price.featured .amt small{color:rgba(255,255,255,.65)}
.price .amt.ask{font-size:24px}
.price .desc{color:var(--muted);font-size:16px;margin-bottom:18px}
.price ul{list-style:none;display:grid;gap:10px;margin-bottom:28px;flex:1}
.price li{display:flex;gap:10px;font-size:16.5px}
.price li::before{content:"✓";color:var(--gold);font-weight:800}
@media (max-width:940px){.prices{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.price.featured{transform:none}.price.featured:hover{transform:translateY(-6px)}}

/* zones: rings of distance around Jerusalem */
.zwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;margin-top:50px}
.rings{position:relative;max-width:440px;width:100%;margin-inline:auto}
.rings svg{width:100%;height:auto;overflow:visible}
.rings circle.r{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:4 7;opacity:.45;transition:opacity .3s,stroke-width .3s,fill .3s}
.rings circle.r.on{opacity:1;stroke-width:2.5;stroke-dasharray:none;fill:rgba(201,162,75,.10)}
.rings .pulse{fill:var(--gold);transform-origin:200px 200px;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.55}to{transform:scale(5);opacity:0}}
.rings text{font:800 13px var(--sans);fill:var(--gold-deep)}
.rings .jlm{font:800 16px var(--serif);fill:var(--night)}
.zones{display:grid;gap:10px}
.zone{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;cursor:default}
.zone:hover,.zone.on{border-color:var(--gold);transform:translateX(-4px);box-shadow:0 14px 30px -20px rgba(138,106,34,.8)}
.zone b{color:var(--night);font-size:17.5px}
.zone .km{font-size:13.5px;color:var(--gold-deep);font-weight:800;margin-inline-start:8px}
.zone .nt{grid-column:1;color:var(--muted);font-size:15px}
.zone .zp{grid-row:1/3;grid-column:2;font-family:var(--serif);font-weight:800;font-size:23px;color:var(--night);white-space:nowrap}
.zone .zp.ask{font-family:var(--sans);font-size:14.5px;color:var(--muted);font-weight:700}
.zone.self{background:var(--gold-soft)}
@media (max-width:900px){.zwrap{grid-template-columns:1fr}.rings{max-width:330px}}

/* counter */
.counter{padding:clamp(48px,6vw,72px) 0 0;text-align:center}
.counter .big{font-family:var(--serif);font-weight:800;font-size:clamp(56px,9vw,96px);line-height:1;color:#8a6a22;font-variant-numeric:tabular-nums;direction:ltr}
.counter .cap{font-size:clamp(17px,2vw,20px);color:var(--night);font-weight:600;margin-top:6px}

/* equipment */
.tech-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.bed{position:relative;border-radius:26px;padding:22px;background:linear-gradient(160deg,#1a3149,var(--night));box-shadow:0 40px 70px -35px rgba(11,22,34,.9),inset 0 0 0 1px rgba(232,205,134,.18)}
.plate{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#f6ead0,var(--parch));box-shadow:inset 0 0 30px rgba(138,106,34,.35)}
.glyphs{display:grid;grid-template-columns:repeat(12,1fr);gap:6px 2px;padding:22px 18px;direction:rtl}
.glyphs i.hit{color:var(--ok);text-shadow:0 0 12px rgba(31,138,91,.6);opacity:1}
.glyphs i.bad{color:var(--warn);outline:2px solid var(--warn);outline-offset:1px;border-radius:4px;opacity:1}
.glyphs i{transition:color .3s,text-shadow .3s;font:800 clamp(15px,1.7vw,22px)/1.25 var(--serif);font-style:normal;color:var(--parch-ink);text-align:center;opacity:.88}
.plate .head{position:absolute;top:0;bottom:0;width:26%;left:-26%;background:linear-gradient(90deg,transparent,rgba(42,122,166,.18) 40%,rgba(120,210,255,.55) 50%,rgba(42,122,166,.18) 60%,transparent);animation:sweep 3.4s ease-in-out infinite;mix-blend-mode:multiply}
.plate .head i{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#5fd0ff;box-shadow:0 0 18px 4px rgba(95,208,255,.8)}
@keyframes sweep{0%{left:-26%}50%{left:100%}100%{left:-26%}}
.hud{display:flex;align-items:center;gap:10px;margin-top:16px;color:rgba(255,255,255,.8);font-size:15px;font-weight:700}
.hud b{font-family:var(--serif);color:var(--gold-2);font-size:22px;font-variant-numeric:tabular-nums;min-width:90px}
.hud .dot{width:10px;height:10px;border-radius:50%;background:#46e08a;box-shadow:0 0 0 0 rgba(70,224,138,.7);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(70,224,138,0)}100%{box-shadow:0 0 0 0 rgba(70,224,138,0)}}
.tech-items{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.ti{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ti:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-2)}
.ti .tn{font:900 22px/1 var(--serif);color:var(--gold);min-width:32px}
.ti h3{font-size:19px;margin-bottom:6px}.ti p{font-size:15.5px;color:var(--muted)}
@media (max-width:980px){.tech-grid{grid-template-columns:1fr;gap:40px}.scanner{max-width:520px;width:100%;margin-inline:auto}}
@media (max-width:560px){.tech-items{grid-template-columns:1fr}}

/* sale on the price cards */
.price .ribbon{position:absolute;top:18px;left:-8px;background:linear-gradient(180deg,#d9663a,var(--warn));color:#fff;font-weight:800;font-size:14px;padding:7px 16px 7px 14px;border-radius:0 8px 8px 0;box-shadow:0 10px 18px -10px rgba(192,86,43,.9);direction:rtl}
.price .ribbon::after{content:"";position:absolute;left:0;bottom:-8px;border:4px solid #7a2e12;border-left-color:transparent;border-bottom-color:transparent}
.price .amt s{font-size:.5em;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--warn)}
.price.featured .amt s{color:rgba(255,255,255,.55)}

/* purpose: Kfir */
.purpose .intro{max-width:820px;margin:0 auto 14px;color:var(--muted);font-size:17px}
.purpose .proud{font-weight:600;color:var(--night);max-width:780px;margin:18px auto 0}
.heroes{display:grid;max-width:640px;margin:52px auto 0;gap:28px;text-align:right}
.hero-card{display:grid;grid-template-columns:1fr 200px;overflow:hidden;padding:0}
.hero-card .ph{order:2;position:relative;min-height:220px;background:radial-gradient(circle at 50% 40%,#1f6386,#0f2f4a 70%);display:grid;place-items:center}
.hero-card .ph span{width:136px;height:136px;border-radius:50%;padding:4px;background:conic-gradient(from var(--a,0deg),#a5822f,#e6c878,#fff4d2,#c9a24b,#a5822f);animation:spin 8s linear infinite;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);display:block;position:relative}
.hero-card .ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 35%;border:3px solid #0f2f4a}
.hero-card .bd{padding:28px}
.tag2{font-size:12.5px;font-weight:700;color:#a5822f}
.hero-card h3{font-size:24px;margin:8px 0 10px}
.hero-card p{color:var(--muted);font-size:15px;margin-bottom:16px}
.candle{position:absolute;left:calc(50% - 104px);bottom:calc(50% - 82px);width:34px;height:70px;z-index:2;pointer-events:none}
.candle .glow{position:absolute;left:50%;top:-6px;width:90px;height:90px;transform:translate(-50%,-30%);background:radial-gradient(circle,rgba(255,196,90,.45),transparent 65%);animation:glow 3s ease-in-out infinite}
.candle .fl{position:absolute;left:50%;top:0;width:12px;height:22px;margin-left:-6px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff6d8 0%,#ffd36b 35%,#ff9b2f 70%,rgba(255,120,40,0) 100%);transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite}
.candle .wick{position:absolute;left:50%;top:20px;width:2px;height:5px;margin-left:-1px;background:#3a2a1a}
.candle .wax{position:absolute;left:50%;top:24px;width:18px;height:44px;margin-left:-9px;border-radius:3px 3px 4px 4px;background:linear-gradient(90deg,#e9e2d2,#fffaf0 45%,#d9d0bd)}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.94,1.06) rotate(2deg)}50%{transform:scale(1.04,.95) rotate(-2deg)}75%{transform:scale(.97,1.04) rotate(1deg)}}
@keyframes glow{0%,100%{opacity:.85}50%{opacity:1}}
.band{margin-top:56px;border-radius:26px;background:linear-gradient(225deg,var(--night),var(--teal));color:#fff;padding:clamp(34px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden;text-align:right}
.band::after{content:"";position:absolute;left:-60px;top:-60px;width:240px;height:240px;border-radius:50%;border:2px solid rgba(201,162,75,.35);pointer-events:none}
.band h3{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.band p{color:rgba(255,255,255,.82);font-size:16.5px}
.chai{margin-top:56px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.chai svg{width:84px;height:62px;border-radius:6px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4);animation:wave 4s ease-in-out infinite;transform-origin:100% 50%}
@keyframes wave{50%{transform:skewY(-2deg) scaleX(.98)}}
.chai b{font-family:var(--serif);font-size:clamp(24px,3vw,34px);color:var(--night)}
@media (max-width:720px){.hero-card{grid-template-columns:1fr}.hero-card .ph{order:0;height:200px;min-height:0}.band{grid-template-columns:1fr;text-align:center}.band .btn{justify-self:center}.band::after{display:none}}

/* faq: the answer unrolls like a small parchment */
.faq{padding-top:clamp(32px,4vw,56px)}
.faq .list{max-width:780px;margin:40px auto 0;text-align:right;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:17px;color:var(--night)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--sky-soft);color:var(--teal);display:grid;place-items:center;font-size:20px;font-weight:500;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{position:relative;margin:0 0 18px;padding:16px 18px;border-radius:4px;color:#4a3a22;white-space:pre-line;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#f6eed9,#efe3c4);box-shadow:inset 0 0 0 1px rgba(110,80,30,.18)}
.faq details[open] p{animation:unrollP .7s cubic-bezier(.3,.7,.3,1)}
@keyframes unrollP{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.faq .roll{position:absolute;left:-6px;right:-6px;height:12px;border-radius:6px;background:linear-gradient(180deg,#9a6a3a,#6b4423 60%,#4a2d14);box-shadow:0 3px 6px rgba(0,0,0,.3);top:-6px;pointer-events:none}
.faq details[open] .roll.go{animation:rollDown .7s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes rollDown{from{top:-6px}to{top:calc(100% - 6px)}}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cl{display:grid;gap:12px;margin-top:28px}
.ci{display:flex;align-items:center;gap:16px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;transition:border-color .15s,transform .15s}
a.ci:hover{border-color:var(--sky);transform:translateX(-3px)}
.ci small{display:block;color:var(--muted);font-size:13px}
.ci b{color:var(--night);font-size:17px;font-weight:600;direction:ltr;unicode-bidi:isolate}
.ci .ico{width:44px;height:44px}
.ci.wapp .ico{background:#e7f8ee;color:#1b9e55}
.logo-card{background:linear-gradient(200deg,#fff,var(--sky-soft));border:1px solid var(--line);border-radius:28px;padding:48px;text-align:center;box-shadow:var(--shadow)}
.logo-card img{width:150px;margin:0 auto 14px;border-radius:32px}
.logo-card b{font-family:var(--serif);font-size:38px;color:var(--night);display:block;direction:ltr}
.logo-card small{color:var(--muted);font-size:13px;font-weight:600}
.logo-card .btn{margin-top:26px}
@media (max-width:980px){.contact .wrap{grid-template-columns:1fr}}
@media (max-width:720px){.logo-card{padding:34px 20px}}

footer{background:#0b2236;color:rgba(255,255,255,.65);padding:30px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.wa{position:fixed;left:18px;bottom:18px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waping 2.8s ease-out infinite}
@keyframes waping{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}
.wa:hover{transform:scale(1.08)}
.wa svg{width:31px;height:31px;fill:#fff}

/* reveal on scroll (content stays visible without JS) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.16s}.stagger.in>*:nth-child(4){transition-delay:.24s}.stagger.in>*:nth-child(5){transition-delay:.32s}.stagger.in>*:nth-child(6){transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
.plate .head,.candle .fl,.candle .glow,.chai svg,.hero-card .ph span,.hud .dot,.btn-primary::after,.btn[href^="order.html"],.btn[href^="order.html"]::after,.btn.send,.btn.send::after{animation:none!important}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}
  .sheet{max-width:none}.js .reveal,.js .stagger>*{opacity:1;transform:none}
}
@media (max-width:560px){.art-photo .tag.t2{left:8px;top:auto;bottom:-16px}.art-bg .hero-art{min-height:200px}.art-bg .tag.t2{bottom:-30px;left:8px}}