:root{--t:#00d3d6;--td:#04898b;--tl:#e6f7f7;--ink:#122e30;
--tex:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .5  0 0 0 0 .45  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
--hatch:repeating-linear-gradient(45deg,#00000014 0 1px,transparent 1px 5px)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:#fff var(--tex);color:var(--ink);line-height:2;overflow-x:hidden}
a{text-decoration:none;color:inherit}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* background video + layers */
.bgvid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4;background:#d3f8f9}
.veil{position:fixed;inset:0;z-index:-3;background:linear-gradient(90deg,#ffffff00 0%,#ffffff66 55%,#ffffffb0 100%),var(--tex);transition:background .4s}
body.late .veil{background:#ffffffd9}
.sketch{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:-2;pointer-events:none;
 -webkit-backdrop-filter:grayscale(1) contrast(1.5) brightness(1.15);backdrop-filter:grayscale(1) contrast(1.5) brightness(1.15);
 background:var(--hatch);-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}
.bar{position:fixed;top:0;right:0;left:0;height:4px;z-index:30}
.bar i{display:block;height:100%;width:0;background:var(--t);border-radius:0 4px 4px 0}

/* vertical side nav (icons) */
.side{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #00d3d61f;border-radius:40px;box-shadow:0 8px 28px #00d3d633}
.side a{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--td);transition:transform .25s,background .25s}
.side a:hover{transform:scale(1.1);background:var(--tl)}
.side .logo{background:var(--t);color:#fff;margin-bottom:6px}
.side .logo:hover{background:var(--td)}
.side .cta{background:var(--t);color:#fff;margin-top:6px}
.side a[data-tip]::after{content:attr(data-tip);position:absolute;left:54px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--td);color:#fff;font-size:.78rem;padding:0 12px;border-radius:20px;opacity:0;pointer-events:none;transition:.2s}
.side a:hover::after{opacity:1}

/* story */
.story{height:500vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:40px 6vw 30px}
.texts{position:relative;width:min(460px,100%);height:300px}
.card{position:absolute;inset:0 0 auto 0;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #00d3d633;border-radius:28px;padding:30px;box-shadow:0 14px 40px #00d3d63a;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s;pointer-events:none}
.card.active{opacity:1;transform:none;pointer-events:auto}
.card.active:hover{transform:scale(1.1)}
.tag{display:inline-block;background:var(--tl);color:var(--td);font-size:.8rem;padding:2px 14px;border-radius:20px;margin-bottom:10px}
h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.5}
h1 em{color:var(--t);font-style:normal}
h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--td)}

/* sections */
.plain{padding:90px 6vw 90px calc(6vw + 76px);text-align:center;background:var(--tex),#ffffffe0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.plain:nth-of-type(even){background:var(--tex),#e6f7f7ea}
.title{display:inline-block;font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--td);margin-bottom:8px;transition:transform .3s}
.title.big{display:block;font-size:clamp(2rem,5vw,3.4rem)}
.sub{opacity:.75;margin:0 auto 30px;max-width:640px;transition:transform .3s}
.title:hover,.sub:hover{transform:scale(1.1)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:30px}
.cards.five{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.box{background:#fff;border:1px solid #00d3d633;border-radius:24px;padding:26px;box-shadow:0 10px 30px #00d3d61f;transition:transform .3s,box-shadow .3s}
.box:hover{transform:scale(1.1);box-shadow:0 18px 44px #00d3d644;position:relative;z-index:2}
.box h3{color:var(--t)}
.box b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--t);color:#fff;margin-bottom:8px}
.wide{max-width:560px;margin:30px auto 0}
.info{margin-top:14px;color:var(--td);font-weight:700}
.more{display:inline-block;margin-top:34px;background:var(--t);color:#fff;padding:6px 26px;border-radius:30px;transition:transform .3s}
.more:hover{transform:scale(1.1)}
footer{margin-top:50px;opacity:.5;font-size:.85rem}

/* sketch photos: B/W until hover */
.shot{position:relative;border-radius:24px;overflow:hidden;border:5px solid #fff;box-shadow:0 12px 34px #00d3d633;aspect-ratio:1/1;
 background-color:hsl(var(--h,170) 45% 70%);background-image:var(--img),linear-gradient(135deg,hsl(var(--h,170) 50% 80%),hsl(var(--h,170) 55% 45%));background-size:cover;background-position:center;
 filter:grayscale(1) contrast(1.35) brightness(1.08);transition:filter .6s,transform .4s,box-shadow .4s;cursor:pointer}
.shot::before{content:"";position:absolute;inset:0;background:var(--hatch),repeating-linear-gradient(-45deg,#00000010 0 1px,transparent 1px 7px);mix-blend-mode:multiply;transition:opacity .6s}
.shot figcaption{position:absolute;bottom:10px;right:10px;background:#ffffffe0;color:var(--td);font-size:.8rem;padding:0 14px;border-radius:20px}
.shot:hover,.shot.in{filter:none}
.shot:hover::before,.shot.in::before{opacity:0}
.shot:hover{transform:scale(1.1);z-index:3;box-shadow:0 20px 50px #00d3d655}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:18px;grid-auto-flow:dense}
.masonry .shot{aspect-ratio:auto}
.masonry .tall{grid-row:span 2}
.masonry .span2{grid-column:span 2}

/* before/after */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.cmp{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;border:6px solid #fff;box-shadow:0 14px 40px #00d3d633;--p:50%}
.img{position:absolute;inset:0;background-size:cover;background-position:center}
.after{background-image:var(--b),linear-gradient(135deg,#5ee8ea,#00d3d6)}
.before{background-image:var(--a),linear-gradient(135deg,#a8f1f3,#00b5b8);clip-path:inset(0 0 0 calc(100% - var(--p)))}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3}
.line{position:absolute;top:0;bottom:0;right:var(--p);width:3px;background:#fff;z-index:2;box-shadow:0 0 10px #0006}
.line::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--t);color:#fff;display:grid;place-items:center}
.cmp span{position:absolute;bottom:12px;z-index:2;background:#ffffffdd;color:var(--td);padding:0 14px;border-radius:20px;font-size:.85rem}
.l1{right:12px}.l2{left:12px}

/* mobile */
@media(max-width:800px){
 .side{left:50%;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;padding:6px 10px;gap:2px;width:max-content;max-width:94vw}
 .side a{width:40px;height:40px}
 .side .logo{margin:0 4px 0 0}.side .cta{margin:0 0 0 4px}
 .side a[data-tip]::after{display:none}
 .sticky{align-items:flex-start;padding:24px 5vw 90px}
 .texts{height:250px;width:100%;margin-top:6vh}
 .card{padding:20px;border-radius:24px}
 .card.active:hover{transform:none}
 .veil{background:linear-gradient(180deg,#ffffff00 40%,#ffffffb0 100%),var(--tex)}
 .plain{padding:70px 5vw 110px}
 .masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px}
 .strip{grid-template-columns:repeat(2,1fr)}
 .box:hover,.shot:hover,.title:hover,.sub:hover,.more:hover{transform:none}
}
@media(hover:none){.box:hover,.shot:hover{transform:none}}

/* draggable infinite gallery */
.dgrid{position:relative;height:100vh;overflow:hidden;cursor:grab;touch-action:none;background:var(--tex),#f2fbfb;user-select:none;-webkit-user-select:none}
.dgrid.drag{cursor:grabbing}
.dworld{position:absolute;inset:0}
.dtile{position:absolute;left:0;top:0;will-change:transform}
.dtile .shot{width:100%;height:100%;aspect-ratio:auto;border-radius:22px;border-width:5px;pointer-events:auto}
.dgrid.drag .shot{transform:none}
.dhead{position:absolute;top:22px;right:50%;transform:translateX(50%);z-index:5;text-align:center;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #00d3d633;border-radius:28px;padding:6px 30px;box-shadow:0 10px 30px #00d3d633;pointer-events:none;width:max-content;max-width:90vw}
.dhead h1{font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.6;color:var(--td)}
.dhead p{font-size:.85rem;opacity:.75;line-height:1.7;padding-bottom:4px}
.dhint{position:absolute;bottom:20px;right:50%;transform:translateX(50%);z-index:5;background:var(--t);color:#fff;padding:2px 22px;border-radius:30px;font-size:.85rem;transition:opacity .5s;pointer-events:none}
.dhint.off{opacity:0}
.dgrid::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 10px #f2fbfb}
@media(max-width:800px){.dhead{top:16px;padding:4px 18px}.dhint{bottom:136px}}

/* hero links */

.hl{background:var(--t);color:#fff;padding:2px 22px;border-radius:30px;font-size:.92rem;transition:transform .3s}
.hl.ghost{background:#fff;color:var(--td);border:1.5px solid var(--t)}
.hl:hover{transform:scale(1.1)}
/* typing */
.typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--t);margin-inline-start:3px;vertical-align:-.12em;animation:blink .7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* gallery page */
body.gpage{overflow:hidden;height:100vh}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#112b2dd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
.lb.open{opacity:1;pointer-events:auto}
.lbfig{position:relative;border-radius:30px;border:6px solid #fff;overflow:hidden;box-shadow:0 30px 80px #0008;background-size:cover;background-position:center;transform:scale(.7);transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
.lb.open .lbfig{transform:scale(1)}
.lbfig figcaption{position:absolute;bottom:14px;right:50%;transform:translateX(50%);background:#ffffffe6;color:var(--td);padding:2px 22px;border-radius:30px}
.lbx{position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;border:none;background:#fff;color:var(--td);font-size:1.2rem;cursor:pointer;z-index:2;transition:transform .3s}
.lbx:hover{transform:scale(1.1)}
.dgrid{height:100vh}

/* fixed hero links */
.fixlinks{position:fixed;bottom:26px;left:0;right:0;z-index:35;display:flex;justify-content:center;align-items:center;gap:14px;pointer-events:none;transition:opacity .4s,transform .4s}
.fixlinks.hide{opacity:0;transform:translateY(30px)}
.fixlinks.hide .hl{pointer-events:none}
.fixlinks .hl{pointer-events:auto;display:inline-block;padding:6px 28px;font-size:1rem;box-shadow:0 10px 30px #00d3d655;transform:translate(var(--mx,0),var(--my,0)) scale(var(--s,1));transition:transform .25s ease-out,background .3s}
.fixlinks .hl:hover{--s:1.1}
@media(max-width:800px){.fixlinks{bottom:84px;gap:8px}.fixlinks .hl{padding:4px 18px;font-size:.9rem}}
.lbfig{width:min(92vw,1000px);height:min(78vh,680px)}
@media(min-width:801px){.fixlinks #hlContact{position:absolute;right:6vw;bottom:0}}

/* ===== home: left sticky video + right column ===== */
body.home{background:var(--tex),#f4fbfb}
.layout{display:flex;flex-direction:row;align-items:flex-start;gap:0;min-height:100vh}
.vside{order:2;width:min(34vw,460px);flex:none;padding-left:84px}
.col{order:1;flex:1;min-width:0}
body.home .plain{padding:70px 4vw 70px 4vw;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.home .plain:nth-of-type(even){background:#e6f7f7aa}
body.home .plain.first{padding-top:90px}
.vstick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 0}
.vframe{height:calc(100vh - 110px);aspect-ratio:9/16;max-width:100%;border-radius:32px;overflow:hidden;border:6px solid #fff;box-shadow:0 20px 60px #00d3d655;background:#c6f6f7}
.vframe video{width:100%;height:100%;object-fit:cover;display:block;background:#c6f6f7}
.vlinks{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.vlinks .hl{display:inline-block;padding:4px 22px;font-size:.95rem;box-shadow:0 8px 24px #00d3d655;transform:translate(var(--mx,0),var(--my,0)) scale(var(--s,1));transition:transform .25s ease-out}
.vlinks .hl:hover{--s:1.1}
.hero{max-width:560px;margin:0 auto;text-align:right}
.hero h1{margin:4px 0}
.cards.one{grid-template-columns:1fr;max-width:560px;margin:26px auto 0;text-align:right}
body.home .gal,body.home .strip{grid-template-columns:1fr}
body.home .cards,body.home .cards.five{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
body.home .cards .box{text-align:right}
body.home .strip{grid-template-columns:repeat(2,1fr)}
body.home .gal{max-width:560px;margin:0 auto}
@media(max-width:800px){
 .layout{flex-direction:column}
 .vside{order:0;width:100%;padding:0;position:sticky;top:0;z-index:30;background:linear-gradient(#f4fbfbf5 85%,#f4fbfb00)}
 .vstick{position:static;height:auto;flex-direction:row;justify-content:center;gap:12px;padding:10px 4vw 12px}
 .vframe{height:38vh;border-width:4px;border-radius:22px}
 .vlinks{flex-direction:column;align-items:stretch;gap:8px}
 .vlinks .hl{text-align:center;font-size:.85rem;padding:4px 14px}
 body.home .plain{padding:50px 5vw 50px}
 body.home .plain.first{padding-top:30px}
 .col{order:1}
}
.layout{align-items:stretch}
@media(max-width:800px){.vside{background:#f4fbfb;box-shadow:0 10px 24px #00d3d62a;border-radius:0 0 24px 24px}}

/* ===== v3: full-bleed video on the left ===== */
body.home{background:var(--tex),#f6fbfb}
.layout{display:block;min-height:100vh}
.vside{position:fixed;left:0;top:0;bottom:0;width:44vw;max-width:none;padding:0;order:0;z-index:1}
.vstick{position:static;height:100%;padding:0;display:block}
.vframe{position:relative;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden}
.vframe video{width:100%;height:100%;object-fit:cover;object-position:left center;filter:brightness(1.07) contrast(1.02);
 -webkit-mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%)}
.vlinks{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;flex-direction:row;gap:12px;justify-content:center;padding:0 24px 0 90px}
.vlinks .hl{box-shadow:0 10px 28px #00d3d666}
.col{margin-left:44vw;position:relative;z-index:2}
body.home .plain:nth-of-type(even){background:#e6f7f7cc}
.shotlink{display:block;border-radius:24px}
.shotlink .shot{cursor:pointer}
@media(max-width:800px){
 .vside{position:sticky;top:0;left:auto;bottom:auto;width:100%;height:42vh;z-index:30;background:#f6fbfb;box-shadow:0 8px 22px #00d3d62a;border-radius:0 0 24px 24px;overflow:hidden}
 .vframe video{object-position:center center;-webkit-mask-image:none;mask-image:none;filter:brightness(1.05)}
 .vlinks{bottom:10px;padding:0 12px;gap:8px}
 .vlinks .hl{padding:2px 14px;font-size:.82rem}
 .col{margin-left:0}
 .layout{display:flex;flex-direction:column}
}

/* blog */
body.blogpage{background:var(--tex),#f6fbfb}
.blogmain,.post{max-width:1000px;margin:0 auto;padding:90px 5vw 70px calc(5vw + 70px);text-align:center}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:20px;text-align:right}
.bcard{display:block;padding:14px 14px 20px}
.bimg{aspect-ratio:16/10;border-radius:18px;margin-bottom:12px;filter:grayscale(1) contrast(1.3);transition:filter .5s;border-width:3px}
.bcard:hover .bimg{filter:none}
.bcard h3{font-size:1.05rem;line-height:1.8;margin:6px 0}
.bcard p{font-size:.9rem;opacity:.8}
.rm{display:inline-block;margin-top:8px;color:var(--t);font-weight:700}
.post{max-width:780px;text-align:right}
.post .back{display:inline-block;color:var(--td);margin-bottom:14px}
.pcover{aspect-ratio:16/8;border-radius:28px;margin-bottom:18px}
.post h1{font-size:clamp(1.5rem,3.5vw,2.3rem);color:var(--td);margin:8px 0 18px;line-height:1.7}
.pbody{background:#fff;border:1px solid #00d3d633;border-radius:26px;padding:10px 28px 22px;box-shadow:0 10px 30px #00d3d61f}
.pbody h2{font-size:1.2rem;margin-top:16px}
@media(max-width:800px){.blogmain,.post{padding:50px 5vw 110px}}

/* ===== v4: fonts, logo, splash, mobile intro, new sections ===== */
body{font-family:Vazir,Tahoma,sans-serif;line-height:2}
h1,h2,.title,.dhead h1{font-family:Vazir,Vazir,serif;font-weight:800;line-height:1.9}
h1{font-size:clamp(2.3rem,5vw,3.8rem)}
h2,.title{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.title.big{font-size:clamp(2.3rem,5.5vw,4rem)}
.dhead h1{font-size:clamp(1.5rem,3.4vw,2.2rem)}
h3{font-weight:700}
input,select,textarea,button{font:inherit}

.side .logo{width:54px;height:54px;background:#fff;border:1.5px solid #00d3d62e;padding:3px;margin-bottom:6px;color:inherit}
.side .logo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s}
.side .logo:hover{background:#fff}
.side .logo:hover img{transform:rotate(360deg)}
.side .logo+a{margin-top:0}

/* splash */
.splash{display:none}
html.sp .splash{position:fixed;inset:0;z-index:999;background:#fff;display:grid;place-items:center;transition:opacity .8s ease,visibility .8s}
html.sp .splash.out{opacity:0;visibility:hidden}
.sp-in{text-align:center}
.sp-in img{width:min(52vw,230px);height:auto;display:block;margin:0 auto;clip-path:circle(0% at 50% 50%);animation:ink 1.5s cubic-bezier(.3,.7,.2,1) .15s forwards}
.sp-in p{margin-top:14px;font-family:Vazir,sans-serif;font-size:1.3rem;color:var(--td);opacity:0;animation:fin .8s ease 1.2s forwards;letter-spacing:.02em}
@keyframes ink{0%{clip-path:circle(0% at 50% 50%);transform:scale(.85) rotate(-12deg)}100%{clip-path:circle(75% at 50% 50%);transform:none}}
@keyframes fin{to{opacity:1}}

/* watermark in hero */
#hero{position:relative;overflow:hidden}
.wm{position:absolute;width:min(520px,90%);left:50%;top:50%;margin:-260px 0 0 -260px;opacity:.07;pointer-events:none;animation:spin 120s linear infinite;z-index:0}
@media(max-width:800px){.wm{width:340px;margin:-170px 0 0 -170px}}
#hero>*:not(.wm){position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* trust */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:560px;margin:18px auto}
.st{text-align:center;padding:16px 8px}
.st b{display:block;width:auto;height:auto;border-radius:0;background:none;margin:0;font-family:Vazir,sans-serif;font-size:2.4rem;color:var(--t);line-height:1.6}
.st span{font-size:.9rem;opacity:.8}
.trustc{margin-top:8px}

/* order form */
.formbox{max-width:560px;margin:18px auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:right;padding:22px}
.formbox label{display:flex;flex-direction:column;font-size:.85rem;font-weight:500;color:var(--td)}
.formbox .full{grid-column:1/-1}
.formbox input,.formbox select,.formbox textarea{margin-top:4px;border:1.5px solid #00d3d63a;border-radius:14px;padding:6px 12px;background:#fff;color:var(--ink);outline:none;transition:border .2s,box-shadow .2s;font-size:.95rem;width:100%}
.formbox input:focus,.formbox select:focus,.formbox textarea:focus{border-color:var(--t);box-shadow:0 0 0 4px #00d3d61f}
.fbtns{display:flex;gap:10px;flex-wrap:wrap}
.fbtns .hl{border:0;cursor:pointer;padding:4px 22px;display:inline-block}
.fbtns .hl.ghost{border:1.5px solid var(--t)}
.fnote{font-size:.78rem;opacity:.65;line-height:1.8}
@media(max-width:560px){.formbox{grid-template-columns:1fr}}
.stampwrap{height:150px;position:relative;margin-top:10px}
.stamp{position:absolute;left:50%;top:50%;width:120px;margin:-60px 0 0 -60px;opacity:0;transform:scale(2.2) rotate(-25deg);mix-blend-mode:multiply}
.stamp.on{animation:stamp .9s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-25deg)}55%{opacity:1;transform:scale(.92) rotate(-6deg)}100%{opacity:.9;transform:scale(1) rotate(-8deg)}}
.flogo{width:54px;opacity:.85;margin-bottom:4px}

/* whatsapp */
.wa{position:fixed;right:18px;bottom:20px;z-index:45;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px #25d36677;transition:transform .25s}
.wa:hover{transform:scale(1.1)}
.wa svg{width:28px;height:28px}
@media(max-width:800px){.wa{bottom:76px;right:12px;width:46px;height:46px;padding-bottom:env(safe-area-inset-bottom)}.wa svg{width:24px;height:24px}}

/* gallery header fade on first touch (mobile) */
.dhead,.dhint{transition:opacity 1.6s ease}
.dhead.fade,.dhint.fade{opacity:0;pointer-events:none}

/* scroll hint over the video */
.shint{position:absolute;left:0;right:0;text-align:center;bottom:150px;z-index:3;color:#04898b;font-size:.85rem;font-weight:700;display:none}
.shint i{display:block;width:14px;height:14px;margin:6px auto 0;border-right:2.5px solid var(--t);border-bottom:2.5px solid var(--t);transform:rotate(45deg);animation:bob 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px) rotate(45deg)}}

/* ===== mobile: full-screen intro video that shrinks while content rises ===== */
@media(max-width:800px){
 .vside{background:transparent;box-shadow:none;border-radius:0;overflow:visible;height:42vh}
 .vframe{position:absolute;top:0;left:0;right:0;height:100vh;background:#f6fbfb;border-radius:0 0 26px 26px;box-shadow:0 10px 28px #00d3d63a}
 .col{padding-top:58vh}
 .vlinks{bottom:140px}
 .shint{display:block}
 .stats{grid-template-columns:repeat(2,1fr)}
}

/* ===== v5 ===== */
h1,h2,.title,.dhead h1,.st b{font-family:Vazir,sans-serif;font-weight:800;letter-spacing:0}
h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.7}
h2,.title{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.8}
.title.big{font-size:clamp(2rem,5vw,3.4rem)}
.sp-in p{font-family:Vazir,sans-serif;font-weight:700}
.shot figcaption,.lbfig figcaption{display:none}
.wm{display:none}
/* roaming logo behind the text */
.roam{position:fixed;left:0;top:0;width:300px;height:300px;margin:-150px 0 0 -150px;opacity:.09;pointer-events:none;z-index:1;will-change:transform}
.roam img{width:100%;height:100%;display:block;animation:spin 60s linear infinite}
@media(max-width:800px){.roam{width:220px;height:220px;margin:-110px 0 0 -110px;opacity:.1}}
body.home .plain,body.home .plain:nth-of-type(even){background:transparent}
body.home .vside{z-index:0}
.col{z-index:2}
/* old-camera viewfinder frame on hover */
.shot::after{content:"";position:absolute;inset:12px;pointer-events:none;opacity:0;transform:scale(1.07);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.2);z-index:4;
 background:
  linear-gradient(#fff,#fff) 0 0/26px 3px,linear-gradient(#fff,#fff) 0 0/3px 26px,
  linear-gradient(#fff,#fff) 100% 0/26px 3px,linear-gradient(#fff,#fff) 100% 0/3px 26px,
  linear-gradient(#fff,#fff) 0 100%/26px 3px,linear-gradient(#fff,#fff) 0 100%/3px 26px,
  linear-gradient(#fff,#fff) 100% 100%/26px 3px,linear-gradient(#fff,#fff) 100% 100%/3px 26px,
  linear-gradient(#fff,#fff) 50% 50%/22px 2px,linear-gradient(#fff,#fff) 50% 50%/2px 22px;
 background-repeat:no-repeat;filter:drop-shadow(0 0 3px #0008)}
.shot:hover::after,.shot.in::after{opacity:.95;transform:scale(1)}
.shot:hover,.shot.in{outline:1px solid #ffffffaa;outline-offset:-5px}
.bimg::after{inset:8px}

/* v6: on mobile the page text slides UNDER the shrunken video */
@media(max-width:800px){ body.home .vside{z-index:30} .vframe{background:#f6fbfb} }

/* ===== order page ===== */
body.orderpage{background:var(--tex),#f6fbfb}
.ordermain{max-width:900px;margin:0 auto;padding:80px 20px 60px 110px;text-align:center}
.swrap{overflow-x:auto;padding:6px}
.stage{position:relative;width:100%;max-width:820px;margin:14px auto;aspect-ratio:629.52/876.24;container-type:inline-size;background:#fff url(plan.jpg) center/100% 100% no-repeat;border-radius:18px;box-shadow:0 18px 50px #00d3d644;direction:rtl}
.stage .tf,.stage .tn{position:absolute;background:transparent;border:0;border-radius:8px;color:#1b2a6b;font-family:Vazir,sans-serif;font-weight:500;font-size:2.45cqw;outline:none;transition:background .2s,box-shadow .2s;padding:0 2px}
.stage .tf{transform:translate(-50%,-50%);height:3.3%;line-height:1}
.stage .tn{resize:none;line-height:3.44cqw;font-weight:400;padding:.6cqw 0 0;overflow:auto;background-image:none}
.stage .tf:hover,.stage .tn:hover{background:#ffffff55}
.stage .tf:focus,.stage .tn:focus{background:#ffffffaa;box-shadow:0 0 0 .35cqw #00d3d688}
.stage .dot,.stage .tooth{position:absolute;transform:translate(-50%,-50%);width:3.6%;aspect-ratio:1;display:grid;place-items:center;cursor:pointer}
.stage .tooth{width:2.9%}
.stage input[type=checkbox],.stage input[type=radio]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.stage .dot i{width:66%;height:66%;border-radius:50%;display:block;transition:background .2s,box-shadow .2s,transform .2s}
.stage .dot:hover i{box-shadow:0 0 0 .5cqw #1b2a6b55}
.stage .dot input:checked+i{background:#1b2a6b;box-shadow:0 0 0 .4cqw #ffffffaa}
.stage .dot input:checked+i::after{content:"";display:block;width:34%;height:58%;margin:7% auto 0;border:solid #fff;border-width:0 .55cqw .55cqw 0;transform:translateY(8%) rotate(40deg)}
.stage .dot input:focus-visible+i,.stage .tooth input:focus-visible+i{box-shadow:0 0 0 .6cqw #00d3d6}
.stage .tooth i{width:100%;height:100%;border-radius:50%;display:block;transition:background .2s,box-shadow .2s}
.stage .tooth:hover i{background:#1b2a6b1f}
.stage .tooth input:checked+i{background:#1b2a6b24;box-shadow:inset 0 0 0 .4cqw #1b2a6b}
.shintm{display:none;font-size:.8rem;opacity:.7}
.obox{background:#ffffffee;border:1px solid #00d3d633;border-radius:26px;padding:18px 22px 22px;margin:18px auto;max-width:820px;box-shadow:0 10px 30px #00d3d61f;text-align:right}
.obox h2{font-size:1.3rem;margin-bottom:2px}
.sub2{font-size:.9rem;opacity:.75}
.upl{display:inline-block;margin-top:10px;cursor:pointer}
.upl input{position:absolute;opacity:0;width:1px;height:1px}
.upl span{display:inline-block;background:var(--tl);color:var(--td);border:1.5px dashed var(--t);border-radius:20px;padding:6px 26px;font-weight:700;transition:transform .2s,background .2s}
.upl:hover span{transform:scale(1.04);background:#cdf7f8}
.upl input:focus-visible+span{outline:3px solid var(--t)}
.flist{list-style:none;margin:10px 0 0;padding:0;font-size:.85rem;direction:ltr;text-align:left}
.cph{display:flex;flex-direction:column;font-size:.85rem;font-weight:500;color:var(--td);margin-top:12px;max-width:300px}
.cph input{margin-top:4px;border:1.5px solid #00d3d63a;border-radius:14px;padding:6px 12px;background:#fff;outline:none;font:inherit}
.cph input:focus{border-color:var(--t);box-shadow:0 0 0 4px #00d3d61f}
.obtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.obtns .hl{border:0;cursor:pointer;display:inline-block;padding:4px 20px;font-size:.92rem}
.obtns .hl.ghost{border:1.5px solid var(--t)}
.obtns .hl.dim{opacity:.55}
.omsg{display:none;margin-top:14px;padding:8px 16px;border-radius:16px;background:#e2fdfd;color:#00b5b8;font-size:.88rem;line-height:1.9}
.omsg.show{display:block}.omsg.ok{background:var(--tl);color:var(--td)}
#printarea{display:none}
@media(max-width:800px){
 .ordermain{padding:44px 10px 110px}
 .stage{min-width:640px}
 .shintm{display:block}
}
@media print{
 @page{size:629.52pt 876.24pt;margin:0}
 body.orderpage>*{display:none!important}
 body.orderpage>#printarea{display:block!important}
 #printarea img{width:100%;height:auto;display:block}
}

/* ===== fix-pack (بدون حذف هیچ بخش): اعتبارسنجی، خطای حجم، تداخل موبایل ===== */
.fhint{display:block;font-size:.75rem;opacity:.65;font-weight:400;margin-top:2px;line-height:1.8}
.flist li.over{color:#b3261e;font-weight:700}
.formbox input.bad,.cph input.bad{border-color:#b3261e;box-shadow:0 0 0 4px #b3261e22}
.omsg.err{background:#fdecea;color:#7a1f1a}

/* ===== v7: dark/light, loader, lang, uploads ===== */
html[data-theme="dark"]{
 --t:#00d3d6;--td:#5ee8ea;--tl:#153537;--ink:#e7fdfe;
 --tex:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .5  0 0 0 0 .45  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html[data-theme="dark"] body{background:#0c1d1e var(--tex);color:var(--ink)}
html[data-theme="dark"] .plain{background:#0e2426e6}
html[data-theme="dark"] .plain:nth-of-type(even){background:#0f2628e6}
html[data-theme="dark"] body.home .plain,body.home .plain{background:transparent}
html[data-theme="dark"] body.home .plain:nth-of-type(even){background:#0f2628b8}
html[data-theme="dark"] .box{background:#0f2729;border-color:#00d3d640;box-shadow:0 10px 30px #00000059}
html[data-theme="dark"] h2{color:var(--td)}
html[data-theme="dark"] .formbox input,html[data-theme="dark"] .formbox select,html[data-theme="dark"] .formbox textarea,
html[data-theme="dark"] .cph input{background:#0c1f21;color:var(--ink);border-color:#00d3d64d}
html[data-theme="dark"] .side{background:#0f2729d9;border-color:#00d3d633}
html[data-theme="dark"] .veil{background:#0c1d1ed9}
html[data-theme="dark"] body.blogpage,html[data-theme="dark"] body.orderpage,html[data-theme="dark"] body.gpage{background:#0c1d1e var(--tex)}
html[data-theme="dark"] .blogmain,html[data-theme="dark"] .post{color:#e7fdfe}
html[data-theme="dark"] .pbody{background:#0f2729;border-color:#00d3d640}
html[data-theme="dark"] .obox{background:#0f2729ee;border-color:#00d3d640}
html[data-theme="dark"] .stage{box-shadow:0 18px 50px #00000073}
html[data-theme="dark"] .dgrid{background:#0e2426 var(--tex)}
html[data-theme="dark"] .dgrid::after{box-shadow:inset 0 0 90px 10px #0e2426}
html[data-theme="dark"] .dhead{background:#0f2729e6;border-color:#00d3d633}
html[data-theme="dark"] .dhead p{opacity:.8}
html[data-theme="dark"] .cmp span{background:#0f2729e6;color:var(--td)}
html[data-theme="dark"] .shot{border-color:#0f2729}
html[data-theme="dark"] .shot::after{filter:drop-shadow(0 0 3px #0008)}
html[data-theme="dark"] .bimg{border-color:#0f2729}
html[data-theme="dark"] .vlinks .hl,html[data-theme="dark"] .more{box-shadow:0 8px 24px #00000073}
html[data-theme="dark"] .fbtns .hl.ghost{background:transparent;color:var(--td)}
html[data-theme="dark"] .stamp{mix-blend-mode:screen;filter:invert(1) hue-rotate(150deg)}
html[data-theme="dark"] .flogo{filter:invert(1) hue-rotate(150deg);opacity:.7}
html[data-theme="dark"] footer{opacity:.55}
html[data-theme="dark"] .vside{background:#0c1d1e}
@media(max-width:800px){html[data-theme="dark"] .vside{background:#0c1d1e;box-shadow:0 10px 24px #0006}html[data-theme="dark"] .vframe{background:#0c1d1e}}


/* new loader splash: logo (teal) + loader + Loading Smiles... */
.splash{display:none}
html.sp .splash{position:fixed;inset:0;z-index:999;background:#fff;display:grid;place-items:center;transition:opacity .8s ease,visibility .8s}
html.sp .splash.out{opacity:0;visibility:hidden}
.sp-in{text-align:center}
html[data-theme="dark"] html.sp .splash,html.sp html[data-theme="dark"] .splash{background:#0c1d1e}
html[data-theme="dark"] .splash{background:#0c1d1e!important}
.sp-in p{margin-top:0;font-family:Vazir,sans-serif;font-weight:700;font-size:1.25rem;color:var(--td);letter-spacing:.03em;direction:ltr;opacity:0;animation:fin .8s ease .9s forwards}
html[data-theme="dark"] html[data-theme="dark"] 
/* contact section without form */
.cta-wrap{margin-top:10px}
html[dir="ltr"] .hero,html[dir="ltr"] .cards.one,html[dir="ltr"] body.home .cards .box{text-align:left}
html[dir="ltr"] .post{text-align:left}

/* user uploads (blog submissions) */
.up-wait{grid-column:1/-1;border:1.5px dashed #00d3d659;border-radius:22px;padding:18px;background:#ffffffaa}
html[data-theme="dark"] .up-wait{background:#0f2729aa}
.up-wait h3{color:var(--td)}
.up-wait .bimg{filter:grayscale(1) contrast(1.3)}
.up-wait .bimg:hover{filter:none}

/* ===== fixes: splash logo, dark video, i18n ===== */
html[data-theme="dark"] .vframe video,html[data-theme="dark"] #vid,html[data-theme="dark"] #stage{filter:brightness(.72) contrast(1.05) saturate(.95);background-color:#0c1d1e}
html[data-theme="dark"] .vframe{background:#0c1d1e}
html[data-theme="dark"] .splash{background:#0c1d1e!important}
.sp-in p{font-family:Vazir,Tahoma,sans-serif}
html[data-theme="dark"] .shint{color:#e7fdfe;text-shadow:0 1px 6px #000a}

/* ===== splash: smiley loader ===== */
.sp-in .smile{display:block;width:min(40vw,150px);height:auto;margin:0 auto 6px;overflow:visible;
 --a:hsl(173,80%,40%);--b:hsl(190,85%,34%)}
html[data-theme="dark"] .sp-in .smile{--a:hsl(168,75%,55%);--b:hsl(188,85%,50%)}
.smile .sm-a{fill:var(--a)}.smile .sm-as{stroke:var(--a)}
.smile .sm-b{fill:var(--b)}.smile .sm-bs{stroke:var(--b)}
.loader__eye1,.loader__eye2,.loader__mouth1,.loader__mouth2{animation:eye1 3s ease-in-out infinite}
.loader__eye1,.loader__eye2{transform-origin:64px 64px}
.loader__eye2{animation-name:eye2}
.loader__mouth1{animation-name:mouth1}
.loader__mouth2{animation-name:mouth2;visibility:hidden}
@keyframes eye1{from{transform:rotate(-260deg) translate(0,-56px)}50%,60%{animation-timing-function:cubic-bezier(.17,0,.58,1);transform:rotate(-40deg) translate(0,-56px) scale(1)}to{transform:rotate(225deg) translate(0,-56px) scale(.35)}}
@keyframes eye2{from{transform:rotate(-260deg) translate(0,-56px)}50%{transform:rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1)}52.5%{transform:rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1,0)}55%,70%{animation-timing-function:cubic-bezier(0,0,.28,1);transform:rotate(40deg) translate(0,-56px) rotate(-40deg) scale(1)}to{transform:rotate(150deg) translate(0,-56px) scale(.4)}}
@keyframes mouth1{from{animation-timing-function:ease-in;stroke-dasharray:0 351.86;stroke-dashoffset:0}25%{animation-timing-function:ease-out;stroke-dasharray:175.93 351.86;stroke-dashoffset:0}50%{animation-timing-function:steps(1,start);stroke-dasharray:175.93 351.86;stroke-dashoffset:-175.93;visibility:visible}75%,to{visibility:hidden}}
@keyframes mouth2{from{animation-timing-function:steps(1,end);visibility:hidden}50%{animation-timing-function:ease-in-out;visibility:visible;stroke-dashoffset:0}to{stroke-dashoffset:-351.86}}
.sp-in p{opacity:1;animation:none;margin-top:4px}

/* ===== day / night + language switches (pill with knob) ===== */
.topctl{position:fixed;top:12px;left:64px;z-index:46;display:flex;flex-direction:row-reverse;direction:ltr;gap:10px;transition:opacity .35s ease,transform .35s ease}
.topctl.away{opacity:0;transform:translateY(-18px);pointer-events:none}
.tgl{direction:ltr;position:relative;flex:none;width:118px;height:40px;padding:0;border:0;border-radius:40px;cursor:pointer;color:#fff;font-family:Vazir,Tahoma,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.02em;background:#00b5b8;box-shadow:inset 0 2px 5px #0003,0 6px 16px #0003;transition:background .4s ease,transform .2s;-webkit-tap-highlight-color:transparent}
.tgl:hover{transform:scale(1.04)}
.tgl:focus-visible{outline:3px solid var(--td);outline-offset:3px}
.tgl .tl{position:absolute;inset:0;display:grid;place-items:center;padding:0 44px 0 12px;white-space:nowrap;line-height:1;transition:padding .4s ease}
.tgl .tk{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px #0004;transition:right .4s cubic-bezier(.6,-.2,.3,1.2),transform .4s}
.tgl .tl>*{grid-area:1/1}
.tgl svg{width:21px;height:21px;grid-area:1/1;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* theme: day (default) */
#themeBtn .ln,#themeBtn .i-moon{display:none}
#themeBtn .i-sun{stroke:#00b5b8;stroke-width:2}
#themeBtn .i-sun circle{fill:#00b5b8}
html[data-theme="dark"] #themeBtn{background:#16233f}
html[data-theme="dark"] #themeBtn .ld,html[data-theme="dark"] #themeBtn .i-sun{display:none}
html[data-theme="dark"] #themeBtn .ln,html[data-theme="dark"] #themeBtn .i-moon{display:block}
html[data-theme="dark"] #themeBtn .tk{right:calc(100% - 36px)}
html[data-theme="dark"] #themeBtn .tl{padding:0 12px 0 44px}
#themeBtn .i-moon{fill:#b9bdc9;stroke:#b9bdc9;stroke-width:1}
/* language: fa (default) */
.lg{background:#00d3d6}
.lg .le,.lg .ke{display:none}
.lg .tk b{font-size:.78rem;color:#00d3d6;line-height:1;grid-area:1/1}
html[data-lang="en"] .lg{background:#3b46b5}
html[data-lang="en"] .lg .lf,html[data-lang="en"] .lg .kf{display:none}
html[data-lang="en"] .lg .le,html[data-lang="en"] .lg .ke{display:block}
html[data-lang="en"] .lg .tk{right:calc(100% - 36px)}
html[data-lang="en"] .lg .tl{padding:0 12px 0 44px}
html[data-lang="en"] .lg .tk b{color:#3b46b5}
@media(max-width:800px){.topctl{left:auto;right:10px;top:10px;gap:8px}.tgl{width:104px;height:36px;font-size:.66rem}.tgl .tk{width:28px;height:28px;top:4px}.tgl svg{width:18px;height:18px}html[data-theme="dark"] #themeBtn .tk,html[data-lang="en"] .lg .tk{right:calc(100% - 32px)}.tgl .tl{padding:0 38px 0 8px}html[data-theme="dark"] #themeBtn .tl,html[data-lang="en"] .lg .tl{padding:0 8px 0 38px}}

/* ===== site footer ===== */
footer.sitefoot{opacity:1;margin:60px 0 0;font-size:.88rem;line-height:1.9;text-align:right;color:#c4f6f7;background:linear-gradient(135deg,#04898b 0%,#193f41 55%,#122d2f 100%);padding:54px 5vw 22px;position:relative;z-index:3;overflow:hidden}
body.blogpage footer.sitefoot,body.orderpage footer.sitefoot{padding-left:calc(5vw + 70px)}
body.home footer.sitefoot{margin:0;padding:50px 4vw 22px}
html[data-theme="dark"] footer.sitefoot{background:linear-gradient(135deg,#133133 0%,#0e2324 55%,#091819 100%)}
.sf-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
body.home .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-col h4{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:16px;line-height:1.5}
.sf-col h4 .fi{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid #5ee8ea;display:grid;place-items:center}
.sf-col h4 .fi svg{width:16px;height:16px;fill:none;stroke:#5ee8ea;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sf-line{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;color:#b1f3f4}
.sf-line svg{flex:none;width:15px;height:15px;margin-top:7px;fill:none;stroke:#5ee8ea;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-line a{color:#5ee8ea}.sf-line a:hover{color:#fff}
.ltr{direction:ltr;unicode-bidi:embed}
.sf-mail{display:flex;margin-top:14px;border:1.5px solid #5ee8ea;border-radius:14px;overflow:hidden;background:#ffffff14}
.sf-mail input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;padding:6px 12px;font:inherit;font-size:.85rem;text-align:right}
.sf-mail input::placeholder{color:#84ecee}
.sf-mail button{flex:none;width:44px;border:0;background:#5ee8ea;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.sf-mail button:hover{background:#fff}
.sf-mail button svg{width:17px;height:17px;fill:none;stroke:#193f41;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .sf-mail button svg{transform:scaleX(-1)}
.sf-msg{display:none;margin-top:8px;font-size:.8rem;color:#fecaca}.sf-msg.show{display:block}.sf-msg.ok{color:#99f4f6}
.fpost{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:#c4f6f7}
.fpost img{flex:none;width:62px;height:52px;object-fit:cover;border-radius:8px;border:1px solid #5ee8ea33}
.fpost b{display:block;font-weight:500;font-size:.84rem;line-height:1.7;color:#e7fdfe}
.fpost small{display:block;font-size:.72rem;color:#73e9eb;margin-top:2px}
.fpost:hover b{color:#5ee8ea}
.sf-links{list-style:none}
.sf-links li{margin-bottom:6px}
.sf-links a{color:#b1f3f4;transition:color .2s,padding .2s}
.sf-links a:hover{color:#5ee8ea;padding-right:6px}
html[dir="ltr"] .sf-links a:hover{padding-right:0;padding-left:6px}
.sf-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sf-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;transition:transform .25s,opacity .25s}
.sf-gal a:hover img{transform:scale(1.08)}
.sf-bottom{max-width:1100px;margin:34px auto 0;padding-top:18px;border-top:1px solid #5ee8ea33;display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-size:.78rem;color:#73e9eb}
html[dir="ltr"] footer.sitefoot{text-align:left}
html[dir="ltr"] .sf-mail input{text-align:left}
html[dir="ltr"] .sf-mail{flex-direction:row}
html[dir="ltr"] .sf-mail button svg{transform:none}
@media(max-width:1000px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){footer.sitefoot,body.blogpage footer.sitefoot,body.orderpage footer.sitefoot,body.home footer.sitefoot{padding:40px 6vw 110px}}
@media(max-width:520px){.sf-grid{grid-template-columns:1fr}}

/* submit form: upload box */
.upbox{border:1.5px dashed #00d3d659;border-radius:18px;padding:14px 16px;text-align:center;background:#00d3d60d}
.upbox .uph{display:block;font-weight:700;color:var(--td);font-size:.9rem}
.upbox .upl{display:inline-block;margin-top:6px}
.upbox .upn{display:block;opacity:.7;font-size:.76rem;margin-top:2px}
.upbox .flist{direction:rtl;text-align:right}
html[dir="ltr"] .upbox .flist{direction:ltr;text-align:left}
.flist .frm{margin-inline-start:10px;border:0;background:#b3261e1a;color:#b3261e;width:22px;height:22px;border-radius:50%;cursor:pointer;line-height:1}
.formbox textarea{resize:vertical;min-height:150px;font-family:inherit;line-height:1.9}
.formbox label>span:first-child{display:block}
html[data-theme="dark"] .upbox{background:#00d3d60d;border-color:#00d3d659}

/* =====================================================================
   V4 EXPERIMENT — refined look: warm cream + turquoise brand + champagne
   (this block overrides everything above; delete it to go back)
   ===================================================================== */
:root{
 --t:#00d3d6;            /* brand turquoise: buttons, small accents */
 --td:#04898b;           /* deep turquoise: headings, text accents */
 --tl:#e0fafb;
 --ink:#1c2f30;
 --gold:#00b5b8;         /* champagne */
 --gold-l:#9ff0f1;
 --cream:#f1fafa;
 --cream2:#dbf9fa;
 --line:#c0f5f6;
}
body{background:var(--cream)}
body.home,body.blogpage,body.orderpage,body.gpage{background:var(--cream)}
.veil,.sketch{display:none}
.bgvid{display:none}

/* sections: calm cream / white rhythm, no noise, no blur */
.plain,body.home .plain{background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}
.plain:nth-of-type(even),body.home .plain:nth-of-type(even){background:#fff}
body.home .plain{padding:96px 4vw}
.plain{padding-top:96px;padding-bottom:96px}
body.home .plain.first{padding-top:96px}

/* titles: bigger, deep turquoise, little gold rule */
.title{display:block;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--td);font-weight:800;margin-bottom:12px;line-height:1.5}
.title::after{content:"";display:block;width:54px;height:3px;border-radius:3px;margin:12px auto 0;background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.sub{opacity:1;color:#5d6e70;font-size:.98rem;margin-bottom:44px}
.title:hover,.sub:hover{transform:none}
h1{color:#153537}
h1 em{color:var(--t)}
h2{color:var(--td)}

/* cards: quiet, flat, thin warm border */
.box{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px #1c2f3008,0 12px 32px -14px #1c2f3026}
.plain:nth-of-type(even) .box{background:var(--cream)}
.box:hover{transform:translateY(-5px);box-shadow:0 2px 4px #1c2f3008,0 22px 40px -16px #04898b44;border-color:var(--gold-l)}
.box h3{color:var(--td)}
.box b{background:#fff;color:var(--gold);border:1.5px solid var(--gold-l);font-weight:700}
.st b{border:0;background:none;color:var(--td)}
.st{padding:22px 10px}
.card{background:#fffffff2;border:1px solid var(--line);border-radius:22px;box-shadow:0 22px 50px -20px #0f272955}
.card.active:hover{transform:none}
.tag{background:#fff;border:1px solid var(--gold-l);color:#00b5b8;font-weight:500}
.hero .tag,.box .tag{background:var(--cream)}

/* buttons: turquoise stays only here */
.more,.vlinks .hl,.fbtns .hl,button.hl,a.hl{background:var(--t);color:#fff;border-radius:12px;box-shadow:0 8px 20px -8px #00d3d6aa;transition:transform .25s,box-shadow .25s,background .25s}
.more:hover{transform:translateY(-2px);background:var(--td)}
.fbtns .hl.ghost{background:transparent;color:var(--td);border:1.5px solid var(--td);box-shadow:none}
.bar i{background:linear-gradient(90deg,var(--t),var(--gold))}

/* phone frame + side nav: quieter */
.vframe{border:0;border-radius:28px;box-shadow:0 30px 60px -24px #0f272966,0 0 0 1px var(--line),0 0 0 9px #fff,0 0 0 10px var(--line)}
.side{background:#ffffffee;border:1px solid var(--line);box-shadow:0 14px 30px -14px #0f272944}
.side a{color:var(--td)}
.side a:hover{background:var(--cream2)}
.side .logo{background:#fff;border:1px solid var(--line)}
.side .cta{background:var(--t)}
.roam{opacity:.05}

/* day / language switches: calm glass pills */
.tgl,#themeBtn,html[data-theme="dark"] #themeBtn,.lg,html[data-lang="en"] .lg{
 background:#ffffffb8;color:var(--ink);border:1px solid #1c2f3014;box-shadow:0 8px 22px -10px #0f272955;
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:600;width:112px;height:38px}
html[data-theme="dark"] #themeBtn{background:#0f2729b8;color:#e8f6f6;border-color:#ffffff1a}
.tgl .tk{width:28px;height:28px;top:4px;right:4px;box-shadow:0 2px 8px #0f272944;background:#fff}
html[data-theme="dark"] #themeBtn .tk{right:calc(100% - 32px)}
html[data-lang="en"] .lg .tk{right:calc(100% - 32px)}
.tgl .tl{padding:0 38px 0 10px}
html[data-theme="dark"] #themeBtn .tl,html[data-lang="en"] .lg .tl{padding:0 10px 0 38px}
.tgl svg{width:17px;height:17px}
#themeBtn .i-sun{stroke:var(--gold);stroke-width:2}
#themeBtn .i-sun circle{fill:var(--gold)}
#themeBtn .i-moon{fill:#00d3d6;stroke:#00d3d6}
.lg .tk b,html[data-lang="en"] .lg .tk b{color:var(--td);font-size:.72rem}

/* footer: deep turquoise-ink, champagne headings, no neon */
footer.sitefoot,body.home footer.sitefoot,html[data-theme="dark"] footer.sitefoot{background:#0f2729;color:#94eef0}
footer.sitefoot::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--t),var(--gold),var(--t))}
.sf-col h4{color:#fff;font-weight:700}
.sf-col h4 .fi{border-color:var(--gold)}
.sf-col h4 .fi svg,.sf-line svg{stroke:var(--gold)}
.sf-line{color:#94eef0}
.sf-line a,.sf-links a{color:#94eef0}
.sf-line a:hover,.sf-links a:hover{color:var(--gold-l)}
.sf-mail{border-color:#ffffff33;background:#ffffff0d}
.sf-mail button{background:var(--gold)}.sf-mail button:hover{background:var(--gold-l)}
.sf-mail button svg{stroke:#0f2729}
.fpost,.fpost b{color:#d7f9f9}
.fpost small{color:#00d3d6}
.fpost img{border-color:#ffffff22}
.fpost:hover b{color:var(--gold-l)}
.sf-bottom{border-top-color:#ffffff1f;color:#00d3d6}

/* forms */
.formbox input,.formbox select,.formbox textarea,.cph input{border:1px solid var(--line);border-radius:12px;background:#fff}
.formbox input:focus,.formbox textarea:focus,.formbox select:focus{outline:none;border-color:var(--t);box-shadow:0 0 0 4px #00d3d622}
.upbox{background:var(--cream);border-color:var(--gold-l)}

/* ---- dark: deep turquoise-ink instead of green ---- */
html[data-theme="dark"]{--t:#00d3d6;--td:#87ecee;--tl:#153638;--ink:#e8f3f3;--gold:#61e6e8;--gold-l:#00b5b8;--cream:#0c1d1e;--cream2:#102a2c;--line:#1e3e40}
html[data-theme="dark"] body,html[data-theme="dark"] body.home,html[data-theme="dark"] body.blogpage,html[data-theme="dark"] body.orderpage,html[data-theme="dark"] body.gpage{background:var(--cream)}
html[data-theme="dark"] .plain,html[data-theme="dark"] body.home .plain{background:var(--cream)}
html[data-theme="dark"] .plain:nth-of-type(even),html[data-theme="dark"] body.home .plain:nth-of-type(even){background:#0f2526}
html[data-theme="dark"] .box,html[data-theme="dark"] .card{background:#112b2d;border-color:var(--line);box-shadow:0 14px 34px -16px #000a}
html[data-theme="dark"] .plain:nth-of-type(even) .box{background:#0c1d1e}
html[data-theme="dark"] .box b{background:transparent;border-color:var(--gold-l)}
html[data-theme="dark"] h1{color:#fff}
html[data-theme="dark"] .sub{color:#00d3d6}
html[data-theme="dark"] .tag,html[data-theme="dark"] .hero .tag{background:#0c1d1e;color:var(--gold);border-color:var(--gold-l)}
html[data-theme="dark"] .side,html[data-theme="dark"] .dhead,html[data-theme="dark"] .pbody,html[data-theme="dark"] .obox{background:#0f2526ee;border-color:var(--line)}
html[data-theme="dark"] .side .logo{background:#0c1d1e}
html[data-theme="dark"] .formbox input,html[data-theme="dark"] .formbox select,html[data-theme="dark"] .formbox textarea,html[data-theme="dark"] .cph input{background:#0c1d1e;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .vframe{box-shadow:0 30px 60px -24px #000c,0 0 0 1px var(--line),0 0 0 9px #0f2526,0 0 0 10px var(--line)}
html[data-theme="dark"] .vside,html[data-theme="dark"] .dgrid{background:var(--cream)}
html[data-theme="dark"] .more,html[data-theme="dark"] .fbtns .hl,html[data-theme="dark"] a.hl{color:#091616}
html[data-theme="dark"] html[data-lang] .lg{background:#0f2729b8}
html[data-theme="dark"] .lg,html[data-theme="dark"][data-lang="en"] .lg{background:#0f2729b8;color:#e8f6f6;border-color:#ffffff1a}
html[data-theme="dark"] .sp,html[data-theme="dark"] .splash{background:#0c1d1e}
html[data-theme="dark"] .side .logo{background:#defafa}
.tgl,#themeBtn,.lg,html[data-lang="en"] .lg{background:#ffffffe6}
html[data-theme="dark"] #themeBtn,html[data-theme="dark"] .lg,html[data-theme="dark"][data-lang="en"] .lg{background:#0f2729d9}
html[data-theme="dark"] footer.sitefoot{opacity:1}

/* =====================================================================
   V4.1 — gallery cleanup, order orb, mobile burger, video magnifier
   ===================================================================== */
/* gallery: no sketch effect (full-colour photos) */
body.gpage .shot::before{display:none}

/* gallery: title box -> round order button */
.dhead{overflow:hidden}
.dhead h1,.dhead p{transition:opacity .3s ease}
.dorder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;opacity:0;pointer-events:none;transition:opacity .4s ease .45s;text-align:center;line-height:1.3}
.dorder svg{width:24px;height:24px}
.dorder span{font-size:.7rem;font-weight:700}
.dhead.orb{pointer-events:auto;cursor:pointer;background:var(--t);border-color:transparent;border-radius:50%;padding:0;box-shadow:0 14px 30px -8px #00d3d6cc;
 transition:left .9s cubic-bezier(.65,0,.25,1),top .9s cubic-bezier(.65,0,.25,1),width .9s cubic-bezier(.65,0,.25,1),height .9s cubic-bezier(.65,0,.25,1),border-radius .9s,background .5s,padding .9s,box-shadow .5s!important}
.dhead.orb h1,.dhead.orb p{opacity:0}
.dhead.orb .dorder{opacity:1;pointer-events:auto}
.dhead.orb:hover{background:var(--td);box-shadow:0 18px 36px -8px #04898bcc}
.dhead.orb.done{position:fixed;left:18px;right:auto;top:auto;bottom:22px;width:76px;height:76px;transform:none;max-width:none;transition:background .3s,box-shadow .3s!important;animation:orbpop .5s ease}
@keyframes orbpop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
html[data-theme="dark"] .dhead.orb{background:var(--t)}
html[data-theme="dark"] .dorder{color:#091616}
@media(max-width:800px){.dhead.orb.done{left:14px;bottom:calc(84px + env(safe-area-inset-bottom))}}

/* mobile: bottom bar folds into a burger icon */
.burger{display:none}
@media(max-width:800px){
 .side{transform-origin:50% 100%;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .35s ease}
 .side.mini{transform:translateX(-50%) scale(.15);opacity:0;pointer-events:none}
 .burger{display:grid;place-items:center;position:fixed;z-index:41;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));width:52px;height:52px;margin-left:-26px;border-radius:50%;border:1px solid var(--line);background:#ffffffee;color:var(--td);box-shadow:0 14px 30px -12px #0f272966;cursor:pointer;
  opacity:0;transform:scale(.3);pointer-events:none;transition:opacity .35s ease .15s,transform .45s cubic-bezier(.3,1.4,.5,1) .15s;-webkit-tap-highlight-color:transparent}
 .burger.on{opacity:1;transform:scale(1);pointer-events:auto}
 .burger svg{width:24px;height:24px;stroke-width:2.2}
 html[data-theme="dark"] .burger{background:#0f2526ee;color:var(--td)}
}

/* home video: dental-mirror cursor that opens into a loupe */
.vzoom{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%)}
.vframe video{-webkit-mask-image:none;mask-image:none}
@media(hover:hover){.vframe{cursor:none}.vframe .vlinks a,.vframe .vlinks{cursor:pointer}}
@media(max-width:800px){.vzoom{-webkit-mask-image:none;mask-image:none}}
.mlens{position:fixed;left:0;top:0;z-index:70;pointer-events:none;direction:ltr;opacity:0;transition:opacity .25s ease;will-change:transform}
.mlens.on{opacity:1}
.mlens.on.away{opacity:0}
.mhead{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;overflow:hidden;background:#d4f8f9;
 border:3px solid #fff;box-shadow:0 0 0 1.5px #00b5b8,0 10px 28px -6px #0f2729aa,0 0 24px #00d3d666,inset 0 0 18px #04898b55;
 transition:width .6s cubic-bezier(.3,1.5,.45,1),height .6s cubic-bezier(.3,1.5,.45,1),margin .6s cubic-bezier(.3,1.5,.45,1),box-shadow .4s}
.mlens.open .mhead{box-shadow:0 0 0 2px #00b5b8,0 22px 50px -10px #0f2729cc,0 0 46px #00d3d6aa,inset 0 0 30px #04898b77}
.mhead canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;filter:contrast(1.9) saturate(2.4) brightness(.97)}
.mscan{position:absolute;left:0;right:0;height:34%;top:-34%;z-index:2;background:linear-gradient(to bottom,transparent,#7ff3f555 70%,#7ff3f5cc 98%,#fff 100%);border-bottom:1.5px solid #fff;opacity:0;pointer-events:none}
.mlens.open .mscan{opacity:1;animation:mscan 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes mscan{0%{top:-34%}55%,100%{top:100%}}
.mshine{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,#ffffffbb 48%,#fff9 52%,transparent 65%);transform:translateX(-120%);animation:mshine 2.8s ease-in-out infinite}
.mlens.open .mshine{animation-duration:1.8s}
@keyframes mshine{0%,35%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.mglow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffffffaa 0,#ffffff00 38%),radial-gradient(circle at 50% 50%,transparent 62%,#04898b44 100%)}
.mh{position:absolute;left:0;top:0;transform:rotate(48deg);transform-origin:0 0}
.mhandle{position:absolute;left:calc(var(--d,46px)/2 + 2px);top:-5px;width:74px;height:10px;border-radius:6px;background:linear-gradient(#f2f8f8,#60e6e8 55%,#6b7c82);box-shadow:0 4px 8px #0f272955;transition:left .6s cubic-bezier(.3,1.5,.45,1)}
.mlens .mh{--d:46px}
.mlens.open .mh{--d:var(--D)}
.mhandle::after{content:"";position:absolute;right:-2px;top:-1px;width:26px;height:12px;border-radius:6px;background:linear-gradient(#00d3d6,#04898b)}
.msp{position:absolute;left:0;top:0;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px currentColor)}
.mrip{position:absolute;left:0;top:0;border-radius:50%;border:2px solid #7ff3f5;box-shadow:0 0 18px #7ff3f5}
.mtip{position:absolute;left:34px;top:-48px;white-space:nowrap;background:var(--t);color:#fff;font-size:.78rem;padding:1px 12px;border-radius:20px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;box-shadow:0 6px 14px -4px #00d3d699}
.mtip.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mshine{animation:none}}

/* contact anchor from the side bar */
#fcontact{scroll-margin-top:24px}
@media(max-width:800px){#fcontact{scroll-margin-top:calc(42vh + 18px)}}
#fcontact:target .sf-line{animation:fpulse 1.4s ease 2}
@keyframes fpulse{0%,100%{background:transparent}40%{background:#5ee8ea33;box-shadow:0 0 0 6px #5ee8ea33;border-radius:10px}}

/* =====================================================================
   V5 EXPERIMENT — creative effects + spacing (delete this block and the fx.js tag to revert to V4.2)
   ===================================================================== */

/* 1. order stamp */
.fxst{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:#0f272999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;cursor:pointer}
.fxst.on{opacity:1}
.fxpaper{position:relative;width:min(86vw,340px);padding:34px 28px 120px;background:#fffdf8;border-radius:6px;text-align:center;box-shadow:0 30px 70px -10px #000a;transform:rotate(-2deg) translateY(30px);opacity:0;
 background-image:repeating-linear-gradient(transparent 0 31px,#00d3d622 31px 32px)}
.fxst.on .fxpaper{animation:fxpaper .55s cubic-bezier(.2,.9,.3,1.2) forwards,fxshake .35s .56s ease-out}
.fxpaper h3{font-size:1.25rem;color:#04898b;margin-bottom:6px}
.fxpaper p{font-size:.9rem;color:#00d3d6;line-height:1.9}
.fxl{display:block;height:7px;border-radius:4px;background:#c5f6f7;margin:10px auto 0}
.fxl.a{width:70%;margin-top:22px}.fxl.b{width:55%}.fxl.c{width:80%}.fxl.d{width:40%}
.fxseal{position:absolute;left:50%;bottom:16px;width:104px;margin-left:-52px;opacity:0;mix-blend-mode:multiply;filter:drop-shadow(0 0 1px #04898b)}
.fxst.on .fxseal{animation:fxseal .5s .5s cubic-bezier(.2,.9,.3,1.3) forwards}
.fxring{position:absolute;left:50%;bottom:68px;width:60px;height:60px;margin-left:-30px;border-radius:50%;border:3px solid #00d3d6;opacity:0}
.fxst.on .fxring{animation:fxring .8s .62s ease-out}
@keyframes fxpaper{to{transform:rotate(-2deg);opacity:1}}
@keyframes fxshake{0%,100%{transform:rotate(-2deg)}30%{transform:rotate(-2deg) translateY(6px)}60%{transform:rotate(-2.6deg) translateY(-2px)}}
@keyframes fxseal{0%{opacity:0;transform:scale(2.6) rotate(-35deg)}70%{opacity:.95;transform:scale(.94) rotate(-12deg)}100%{opacity:.92;transform:scale(1) rotate(-12deg)}}
@keyframes fxring{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(5)}}
html[data-theme="dark"] .fxseal{mix-blend-mode:normal;filter:none;background:#fff;border-radius:50%;padding:4px}

/* 2. before/after streak + hint */
.cmp .fxsh{position:absolute;top:-10%;bottom:-10%;right:var(--p);width:120px;margin-right:-60px;z-index:2;pointer-events:none;opacity:0;transform:skewX(-14deg);transition:opacity .35s;
 background:linear-gradient(90deg,transparent,#ffffff55 40%,#ffffffcc 50%,#ffffff55 60%,transparent);mix-blend-mode:soft-light}
.cmp.mv .fxsh{opacity:1}
.cmp.hint .line::after{animation:fxpulse 1s ease-in-out infinite}
@keyframes fxpulse{0%,100%{box-shadow:0 0 0 0 #00d3d6aa}50%{box-shadow:0 0 0 12px #00d3d600}}

/* 3. stats keys */
.st{position:relative;overflow:hidden}
.st::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--t),var(--gold));transform:scaleX(0);transition:transform .6s .25s}
.st.pre{opacity:.3;transform:translateY(8px)}
.st{transition:opacity .4s,transform .4s,box-shadow .4s}
.st.press{animation:fxkey .55s ease-out}
.st.press::after{transform:scaleX(1)}
@keyframes fxkey{0%{transform:translateY(8px)}35%{transform:translateY(5px) scale(.97);box-shadow:inset 0 0 0 2px #00d3d6aa,0 0 28px #00d3d666}100%{transform:none}}

/* 4. spotlight + tilt */
.box{position:relative}
.box::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),#00d3d626,transparent 65%)}
@media(hover:hover){
 .box:hover::before{opacity:1}
 .box{transition:transform .18s ease-out,box-shadow .3s,border-color .3s}
 .box:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}

/* 5. titles: word reveal + drawn gold line */
.title.fx .fw{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(7px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),filter .6s;transition-delay:calc(var(--i)*110ms)}
.title.fx.in .fw{opacity:1;transform:none;filter:none}
.title.fx::after{transform:scaleX(0);transform-origin:100% 50%;transition:transform .9s cubic-bezier(.6,0,.2,1) .35s}
html[dir="ltr"] .title.fx::after{transform-origin:0 50%}
.title.fx.in::after{transform:scaleX(1)}

/* 6. theme wave (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* 7. lightbox page-turn + twinkle */
.lb{perspective:1500px}
.lb.open .lbfig{animation:fxflip .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:100% 50%}
@keyframes fxflip{0%{transform:rotateY(-78deg) scale(.8);opacity:0;filter:brightness(.4)}60%{opacity:1}100%{transform:none;filter:none}}
.fxspark{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;z-index:3;background:#fff;pointer-events:none;opacity:0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #fff);animation:fxtw 1.4s ease-in-out infinite}
@keyframes fxtw{0%,100%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1.1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* 8. splash smile line */
.sp-line{display:block;width:min(56vw,230px);margin:14px auto 0;overflow:visible}
.sp-line path{fill:none;stroke-linecap:round}
.sp-line .tr{stroke:#00d3d626;stroke-width:5}
.sp-line .dr{stroke:#00d3d6;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1}
.sp-line .st4{fill:#00b5b8;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
html.sp .sp-line .dr{animation:fxdraw 3.3s cubic-bezier(.45,.05,.4,1) forwards}
html.sp .sp-line .st4{animation:fxstar .7s 3.2s ease-out forwards}
@keyframes fxdraw{to{stroke-dashoffset:0}}
@keyframes fxstar{0%{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1.5) rotate(90deg)}100%{opacity:1;transform:scale(1) rotate(180deg)}}
html[data-theme="dark"] .sp-line .dr{stroke:#00d3d6}

/* footer: one column on phones + call button */
.sf-callbtn{display:none;margin-inline-start:10px;padding:1px 16px;border-radius:20px;background:var(--t);color:#fff!important;font-weight:700;font-size:.82rem;text-decoration:none!important}
@media(max-width:800px){
 body.home .sf-grid,.sf-grid{grid-template-columns:1fr;gap:34px}
 .sf-callbtn{display:inline-block}
 .sf-line{flex-wrap:wrap}
 footer.sitefoot{line-height:2.1}
 .fpost b{font-size:.95rem}
}

/* home: shorter video strip on phones */
@media(max-width:800px){
 body.home .vside{height:30vh}
 #fcontact{scroll-margin-top:calc(30vh + 18px)}
}

/* home: "why us" cards in two columns with an icon on top */
body.home .cards.trustc{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;gap:16px}
body.home .cards.trustc .box,html[dir="ltr"] body.home .cards.trustc .box{text-align:center;padding:24px 16px}
.trustc .box:last-child{grid-column:1/-1}
.trustc .ic{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;margin:0 auto 12px;background:#00d3d61a;color:var(--td);border:1px solid var(--gold-l)}
.trustc .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trustc h3{font-size:1rem;margin-bottom:6px}
.trustc p{font-size:.88rem;line-height:1.9}
@media(max-width:520px){body.home .cards.trustc{gap:12px}.trustc .box{padding:20px 12px!important}.trustc h3{font-size:.92rem}.trustc p{font-size:.82rem}}

/* tighter section rhythm (~20 %) */
@media(min-width:801px){
 body.home .plain{padding-top:76px;padding-bottom:76px}
 body.home .plain.first{padding-top:80px}
 .plain{padding-top:78px;padding-bottom:78px}
 .title::after{margin-top:10px}
}
@media(max-width:800px){body.home .plain{padding-top:42px;padding-bottom:42px}}

/* video: gallery link moves to the top edge (desktop) */
@media(min-width:801px){.vlinks{bottom:auto;top:22px}}

/* home: floating round order button */
.fxorb{position:fixed;left:18px;bottom:22px;z-index:44;width:72px;height:72px;border-radius:50%;background:var(--t);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;
 box-shadow:0 14px 30px -8px #00d3d6cc;opacity:0;transform:scale(.4) translateY(30px);pointer-events:none;transition:opacity .35s,transform .5s cubic-bezier(.3,1.5,.5,1),background .3s}
.fxorb.on{opacity:1;transform:none;pointer-events:auto}
.fxorb:hover{background:var(--td)}
.fxorb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fxorb span{font-size:.66rem;font-weight:700;line-height:1.3}
.fxorb.on::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--t);animation:fxorb 2.6s ease-out infinite;pointer-events:none}
@keyframes fxorb{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
html[data-theme="dark"] .fxorb{color:#091616}
@media(max-width:800px){.fxorb{left:14px;bottom:calc(86px + env(safe-area-inset-bottom));width:60px;height:60px}.fxorb svg{width:20px;height:20px}.fxorb span{font-size:.58rem}}

@media(prefers-reduced-motion:reduce){.fxorb.on::after,.sp-line .dr{animation:none}.sp-line .dr{stroke-dashoffset:0}}
@media(min-width:801px){.vlinks{left:auto;right:26px;padding:0}}
body.home .stats{max-width:680px}

/* =====================================================================
   V6 — mobile hamburger (top-left), no floating order button on mobile,
        plan zoom, footer SMS box, AI editor
   ===================================================================== */
.burger{display:none}
@media(max-width:800px){
 /* the menu becomes a drop-down panel that grows out of the burger */
 .side{left:10px;right:auto;top:64px;bottom:auto;transform:scale(.2);transform-origin:0 0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;width:max-content;max-width:78vw;border-radius:22px;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .25s ease;z-index:60}
 .side.open{transform:none;opacity:1;pointer-events:auto}
 .side a{width:auto;height:44px;display:flex;align-items:center;gap:12px;padding:0 14px 0 10px;border-radius:14px;justify-content:flex-start}
 .side a svg{width:22px;height:22px;flex:none}
 .side .logo{margin:0;padding:0 10px}.side .logo img{width:30px;height:30px}
 .side .cta{margin:0}
 .side a[data-tip]::after{display:inline;position:static;transform:none;opacity:1;background:none;color:inherit;padding:0;font-size:.92rem;font-weight:700;pointer-events:auto}
 .burger{display:grid;place-items:center;position:fixed;z-index:61;left:10px;top:10px;bottom:auto;margin:0;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#ffffffee;color:var(--td);box-shadow:0 10px 24px -10px #0f272977;cursor:pointer;opacity:1;transform:none;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:background .25s}
 .burger svg{width:24px;height:24px;stroke-width:2.2;grid-area:1/1;transition:transform .3s,opacity .2s}
 .burger .b2{opacity:0;transform:rotate(-90deg)}
 .burger.x .b1{opacity:0;transform:rotate(90deg)}
 .burger.x .b2{opacity:1;transform:none}
 .burger.x{background:var(--t);color:#fff}
 html[data-theme="dark"] .burger{background:#0f2526ee}
 html[data-theme="dark"] .burger.x{background:var(--t);color:#091616}
 /* no floating order buttons on mobile (the order link stays inside the menu) */
 .fxorb,.dorder,.dhead.orb.done{display:none!important}
 .wa{bottom:calc(16px + env(safe-area-inset-bottom))}
 .blogmain,.post{padding-bottom:70px}
 .fixlinks{bottom:24px}
}

/* plan form on mobile: whole sheet by default, zoom with + / − / pinch */
.zbar{display:none}
@media(max-width:800px){
 .zbar{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px auto 10px;position:sticky;top:8px;z-index:30;width:max-content;padding:6px 8px;border-radius:30px;background:#ffffffe8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 10px 24px -12px #0f272966}
 .zbar button{height:38px;min-width:38px;padding:0 12px;border-radius:19px;border:1px solid var(--line);background:#fff;color:var(--td);font:700 1.15rem/1 inherit;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .zbar .zfit{font-size:.82rem}.zbar .zfit svg{width:16px;height:16px;stroke-width:2.2}
 .zbar .zfit.on{background:var(--t);color:#fff;border-color:var(--t)}
 .swrap{overflow:auto;touch-action:pan-x pan-y;padding:4px;-webkit-overflow-scrolling:touch}
 .swrap .stage{min-width:0;max-width:none;width:calc(var(--z,1)*100%)}
 .shintm{display:block;margin-top:6px}
}
html[data-theme="dark"] .zbar{background:#0f2526ee}
html[data-theme="dark"] .zbar button{background:#122e30;color:var(--td)}

/* footer: SMS box */
.sf-sms{margin-top:10px}
.sf-sms input{direction:ltr;text-align:right}
html[dir="ltr"] .sf-sms input{text-align:left}
.sf-note{margin:8px 0 0;font-size:.72rem;line-height:1.8;color:#73e9eb;opacity:.85}

/* ===== AI editor (blog submit page) ===== */
.aiwrap{margin-top:-4px;text-align:right}
.aibar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aibtnw{position:relative;display:inline-block}
.aibtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:24px;cursor:pointer;font:700 .95rem inherit;font-family:inherit;color:#fff;background:linear-gradient(120deg,var(--t),#00d3d6 55%,var(--gold));background-size:200% 100%;box-shadow:0 12px 26px -12px #00d3d6cc;transition:background-position .5s,transform .2s,box-shadow .2s}
.aibtn:hover{background-position:100% 0;transform:translateY(-1px)}
.aibtn svg{width:20px;height:20px;stroke-width:2}
.aibtn:disabled{opacity:.7;cursor:progress}
.aibtn.busy svg{animation:aispin 1s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.aitip{position:absolute;z-index:20;right:0;bottom:calc(100% + 12px);width:min(320px,80vw);padding:12px 14px;border-radius:16px;background:var(--td,#04898b);color:#fff;font-size:.82rem;line-height:1.9;text-align:right;box-shadow:0 18px 40px -14px #0f2729aa;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s}
.aitip .aih{display:block;margin-bottom:2px;color:#99f4f6;font-size:.86rem;font-weight:800}.aitip .aib{display:block}
.aiwrap .aih{font-weight:800;color:var(--td);font-size:.92rem}.aitip .aih{color:#99f4f6}
.aitip::after{content:"";position:absolute;right:26px;top:100%;border:7px solid transparent;border-top-color:var(--td,#04898b)}
.aibtnw:hover .aitip,.aibtn:focus-visible+.aitip{opacity:1;transform:none}
.aimodes{display:flex;flex-wrap:wrap;gap:6px}
.aimode{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line);background:#fff;color:var(--td);font:600 .8rem inherit;font-family:inherit;cursor:pointer;transition:.2s}
.aimode.on{background:var(--cream2,#e6f6f6);border-color:var(--t);color:var(--td);box-shadow:0 0 0 3px #00d3d622}
.aidesc{margin:8px 2px 0;font-size:.78rem;opacity:.7}
.aistat{display:none;margin:8px 0 0;font-size:.84rem;color:var(--td)}.aistat.show{display:block}.aistat.bad{color:#b3261e}
.aistat .aisec{margin-inline-start:6px}
.airesult{margin-top:12px;padding:14px;border-radius:20px;border:1px solid var(--line);background:#ffffffcc}
.airesult[hidden]{display:none}
.aiout{width:100%;margin-top:8px;font:inherit;font-size:.9rem;line-height:2;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:inherit;resize:vertical}
.aiacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.aiacts .hl{height:40px;padding:0 20px;font-size:.88rem}
.aisec{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--td);font:600 .8rem inherit;font-family:inherit;cursor:pointer}
.aiseo,.ainotes{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.84rem}
.aiseo dl{margin:6px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px}
.aiseo dt{font-weight:700;color:var(--td)}.aiseo dd{margin:0;line-height:1.9}.aiseo dd i{opacity:.55;font-style:normal;font-size:.74rem}
.aikw{display:inline-block;margin:0 0 4px 6px;padding:1px 10px;border-radius:12px;background:var(--cream2,#e6f6f6);color:var(--td);font-size:.78rem}
.ainotes ul{margin:6px 0 0;padding:0 18px 0 0;line-height:2}
@media(max-width:560px){.aiseo dl{grid-template-columns:1fr}.aiseo dt{margin-top:4px}.aitip{right:auto;left:0}.aitip::after{right:auto;left:26px}}
html[data-theme="dark"] .aimode,html[data-theme="dark"] .aisec{background:#122e30;color:var(--td)}
html[data-theme="dark"] .airesult{background:#0f2526cc}
html[data-theme="dark"] .aiout{background:#0c1d1e}
html[data-theme="dark"] .aimode.on{background:#183c3e}

@media(max-width:800px){.dhead{max-width:calc(100vw - 150px);padding-left:14px;padding-right:14px}}
@media(max-width:800px){.dhead p{display:none}.dhead{max-width:calc(100vw - 140px)}}

/* ===== V6 · faq (سؤالات متداول) — remove this block + #faq section to drop it ===== */
.faq{max-width:860px;margin:30px auto 0;text-align:right;display:grid;gap:12px}
.qa{background:#fff;border:1px solid #00d3d633;border-radius:20px;box-shadow:0 8px 24px #00d3d61a;transition:box-shadow .3s,border-color .3s}
.qa[open]{box-shadow:0 14px 36px #00d3d633;border-color:var(--gold,#00b5b8)}
.qa summary{list-style:none;cursor:pointer;position:relative;padding:16px 22px;padding-inline-end:58px;font-weight:700;color:var(--td,#04898b);line-height:1.9}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;inset-inline-end:18px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--tl,#e6f7f7);color:var(--t,#00d3d6);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .3s,background .3s,color .3s}
.qa[open] summary::after{content:"–";background:var(--t,#00d3d6);color:#fff;transform:rotate(180deg)}
.qa-a{padding:0 22px 18px;line-height:2.1;opacity:.88;animation:qaIn .35s ease}
.qa-a a{color:var(--t,#00d3d6);text-decoration:underline;text-underline-offset:4px}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:.88;transform:none}}
/* ===== V6 · consult form ===== */
.cform{max-width:760px;margin:30px auto 0;text-align:right;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.cform:hover{transform:none}
.cform label{display:flex;flex-direction:column;gap:6px;font-size:.92rem;font-weight:700;color:var(--td,#04898b)}
.cform .full{grid-column:1/-1}
.cform input,.cform select,.cform textarea{font:inherit;font-weight:400;color:inherit;background:#fff;border:1.5px solid #00d3d640;border-radius:14px;padding:10px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--t,#00d3d6);box-shadow:0 0 0 4px #00d3d622}
.cform textarea{resize:vertical;min-height:84px}
.cform .hp{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.cform .cact{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cform .more{margin:0;border:0;cursor:pointer;font:inherit;font-weight:700}
.cform .more[disabled]{opacity:.55;pointer-events:none}
.cmsg{margin:0;font-size:.92rem;opacity:0;transition:opacity .3s;color:#b3261e}
.cmsg.show{opacity:1}.cmsg.ok{color:#04898b}
.hpposts{text-align:right}
.sf-col h4 a{color:inherit}
/* ===== V6 · splash (click on empty area) + cornerflip (click a box corner) ===== */
.fxlayer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.fxp{position:absolute;left:0;top:0;will-change:transform,opacity;font-style:normal;line-height:1}
.fxcorner{cursor:alias}
.fxspin{animation:fxspinY .9s cubic-bezier(.45,.05,.25,1)}
.fxspinx{animation:fxspinX .9s cubic-bezier(.45,.05,.25,1)}
@keyframes fxspinY{from{transform:perspective(900px) rotateY(0)}to{transform:perspective(900px) rotateY(360deg)}}
@keyframes fxspinX{from{transform:perspective(900px) rotateX(0)}to{transform:perspective(900px) rotateX(360deg)}}
.box.fxspin:hover{animation-name:fxspinYh}.box.fxspinx:hover{animation-name:fxspinXh}
@keyframes fxspinYh{from{transform:perspective(900px) rotateY(0) scale(1.1)}to{transform:perspective(900px) rotateY(360deg) scale(1.1)}}
@keyframes fxspinXh{from{transform:perspective(900px) rotateX(0) scale(1.1)}to{transform:perspective(900px) rotateX(360deg) scale(1.1)}}
@media(hover:none){.box.fxspin:hover{animation-name:fxspinY}.box.fxspinx:hover{animation-name:fxspinX}}
@media(max-width:700px){.cform{grid-template-columns:1fr;padding:20px}.qa summary{padding:14px 16px;padding-inline-end:54px}.qa-a{padding:0 16px 16px}}
html[data-theme="dark"] .qa{background:#0f2729;border-color:#00d3d640;box-shadow:0 8px 24px #00000059}
html[data-theme="dark"] .qa summary{color:#bcf5f6}
html[data-theme="dark"] .qa summary::after{background:#183c3e;color:#5ee8ea}
html[data-theme="dark"] .qa[open] summary::after{background:#00d3d6;color:#fff}
html[data-theme="dark"] .cform label{color:#bcf5f6}
html[data-theme="dark"] .cform input,html[data-theme="dark"] .cform select,html[data-theme="dark"] .cform textarea{background:#0c1d1e;border-color:#00d3d655;color:#e6f7f7}
html[data-theme="dark"] .cmsg.ok{color:#5ee8ea}
/* ===== V6 · home articles: compact horizontal cards ===== */
body.home .hpposts{max-width:640px;gap:16px}
.hpposts .bcard{display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:18px;row-gap:2px;align-items:start;padding:12px;text-align:right}
.hpposts .bcard .bimg{grid-column:1;grid-row:1/5;margin:0;width:100%;height:auto;aspect-ratio:1/1;align-self:start}
.hpposts .bcard>:not(.bimg){grid-column:2}
.hpposts .bcard .tag{justify-self:start;margin-top:4px}
.hpposts .bcard h3{margin:2px 0;font-size:1rem}
.hpposts .bcard p{margin:0;font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hpposts .bcard .rm{align-self:end;font-size:.9rem;color:var(--t,#00d3d6);font-weight:700}
html[dir="ltr"] .hpposts .bcard{text-align:left}
@media(max-width:520px){.hpposts .bcard{grid-template-columns:104px 1fr;column-gap:12px}.hpposts .bcard p{display:none}}

/* ===== V10 · toggles · dock · timeline · team · expanding cards · tools ===== */
:root{--c1:#00d3d6;--c2:#04898b;--gold:#00b5b8;--deep:#0f2729}

/* ---- video frame (the scroll-scrubbed hero video) ---- */
.vframe{background:#ebf4f4}
.vframe video{-webkit-mask-image:none!important;mask-image:none!important;object-position:center center;filter:none}
@media(hover:hover){.vframe{cursor:auto}}

/* ---- theme + language buttons (animated, icon only) ---- */
.topctl{flex-direction:row;direction:ltr;gap:8px}
@media(min-width:801px){.topctl{left:14px;right:auto;top:14px}}
@media(max-width:800px){.topctl{left:auto;right:10px;top:10px}}
.ibtn{position:relative;width:42px;height:42px;padding:0;border-radius:12px;border:1px solid #04898b30;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--c2);display:grid;place-items:center;cursor:pointer;overflow:hidden;box-shadow:0 4px 14px #0f272922;transition:transform .2s,box-shadow .25s,border-color .25s,background .25s}
.ibtn:hover{transform:translateY(-1px);border-color:#00d3d688;box-shadow:0 8px 22px #00d3d633}
.ibtn:active{transform:scale(.94)}
.ibtn:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
.ibtn svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.ibtn .i-moon{opacity:0;transform:rotate(-90deg) scale(.2)}
html[data-theme="dark"] .ibtn .i-sun{opacity:0;transform:rotate(90deg) scale(.2)}
html[data-theme="dark"] .ibtn .i-moon{opacity:1;transform:none}
.ibtn:hover .i-sun{transform:rotate(45deg)}
.ibtn .lt{grid-area:1/1;font-family:Vazir,Tahoma,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.02em;transition:transform .45s cubic-bezier(.34,1.3,.64,1),opacity .3s}
.ibtn .to-fa{opacity:0;transform:translateY(130%)}
html[data-lang="en"] .ibtn .to-en{opacity:0;transform:translateY(-130%)}
html[data-lang="en"] .ibtn .to-fa{opacity:1;transform:none}
html[data-theme="dark"] .ibtn{background:#0f2729dd;border-color:#00d3d640;color:#7ff3f5}

/* ---- dock (toolbar with one sliding tooltip) ---- */

/* ---- timeline beside the hero video (scroll beam) ---- */
.tl{position:absolute;z-index:5;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:min(290px,42vh);padding:16px 14px;border-radius:20px;background:#ffffff94;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #ffffffb8;box-shadow:0 8px 28px #0f27292e}
.tl-track{position:absolute;top:calc(16px + 9px);bottom:calc(16px + 9px);inset-inline-start:calc(14px + 6px);width:2px;border-radius:2px;background:linear-gradient(#00d3d622,#00d3d640,#00d3d622)}
.tl-beam{position:absolute;top:0;inset-inline:0;height:0;border-radius:2px;background:linear-gradient(#00b5b8,#00d3d6);box-shadow:0 0 10px #00d3d699}
.tl-node{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:18px;padding:0;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.tl-dot{display:block;width:14px;height:14px;flex:none;border-radius:50%;background:#fff;border:2px solid #00d3d666;transition:background .3s,border-color .3s,transform .3s,box-shadow .3s}
.tl-node:hover .tl-dot{transform:scale(1.2)}
.tl-node.done .tl-dot{background:var(--c1);border-color:var(--c1)}
.tl-node.on .tl-dot{background:var(--c1);border-color:#fff;transform:scale(1.25);box-shadow:0 0 0 4px #00d3d655}
.tl-lab{font-size:.8rem;font-weight:600;color:#0f2729aA;white-space:nowrap;transition:color .3s,transform .3s}
.tl-node.on .tl-lab{color:var(--c2);font-weight:800;transform:translateX(-2px)}
html[dir="ltr"] .tl-node.on .tl-lab{transform:translateX(2px)}
.tl-node:focus-visible{outline:2px solid var(--c1);outline-offset:4px;border-radius:8px}
@media(max-width:800px){
 .tl{right:8px;height:104px;padding:12px 10px}
 .tl-track{top:calc(12px + 9px);bottom:calc(12px + 9px);inset-inline-start:calc(10px + 6px)}
 .tl-lab{position:absolute;inset-inline-start:calc(100% + 8px);padding:0 10px;border-radius:12px;background:#fffffff0;box-shadow:0 4px 12px #0f272933;opacity:0;pointer-events:none;line-height:24px;font-size:.74rem}
 .tl-node.on .tl-lab{opacity:1;transform:none}
}
html[data-theme="dark"] .tl{background:#0c1d1e99;border-color:#00d3d633}
html[data-theme="dark"] .tl-dot{background:#0c1d1e}
html[data-theme="dark"] .tl-node.done .tl-dot,html[data-theme="dark"] .tl-node.on .tl-dot{background:var(--c1)}
html[data-theme="dark"] .tl-node.on .tl-dot{border-color:#0c1d1e}
html[data-theme="dark"] .tl-lab{color:#bcf5f6aa}
html[data-theme="dark"] .tl-node.on .tl-lab{color:#7ff3f5}
@media(max-width:800px){html[data-theme="dark"] .tl-lab{background:#0f2729f5}}

/* ---- team showcase ---- */
.team{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:clamp(18px,3vw,40px);margin:26px auto 40px;max-width:760px;text-align:start}
.tm-photos{display:flex;gap:8px;flex:none;direction:ltr}
.tm-col{display:flex;flex-direction:column;gap:8px}
.tm-ph{flex:none;overflow:hidden;border-radius:14px;cursor:pointer;background:#c6f6f7;transition:opacity .4s;box-shadow:0 6px 18px #0f272922}
.tm-col.c1 .tm-ph{width:clamp(78px,9vw,126px);height:clamp(84px,9.7vw,136px)}
.tm-col.c2{margin-top:clamp(28px,3.5vw,52px)}
.tm-col.c2 .tm-ph{width:clamp(86px,10.2vw,142px);height:clamp(92px,10.9vw,152px)}
.tm-col.c3{margin-top:clamp(14px,1.8vw,26px)}
.tm-col.c3 .tm-ph{width:clamp(80px,9.6vw,134px);height:clamp(86px,10.3vw,144px)}
.tm-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.8);transition:filter .5s,transform .6s}
.tm-ph.act img{filter:none;transform:scale(1.05)}
.team.hov .tm-ph:not(.act){opacity:.6}
.tm-list{flex:1;display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px);padding-top:6px;min-width:0}
.tm-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;outline:none;transition:opacity .3s}
.team.hov .tm-row:not(.act){opacity:.5}
.tm-bar{flex:none;width:16px;height:12px;margin-top:8px;border-radius:5px;background:#00d3d640;transition:width .3s,background .3s}
.tm-row.act .tm-bar,.tm-row:focus-visible .tm-bar{width:24px;background:var(--c1)}
.tm-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;line-height:1.9;color:var(--c2)}
.tm-role{font-size:.78rem;opacity:.7;line-height:1.6;margin-top:-2px}
.tm-soc{display:inline-flex;gap:2px;opacity:0;transform:translateX(-8px);pointer-events:none;transition:opacity .2s,transform .2s}
html[dir="rtl"] .tm-soc{transform:translateX(8px)}
.tm-row.act .tm-soc,.tm-row:focus-within .tm-soc{opacity:1;transform:none;pointer-events:auto}
.tm-soc a{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--c2);transition:background .15s,transform .15s}
.tm-soc a:hover{background:#00d3d622;transform:scale(1.12)}
.tm-soc svg{width:14px;height:14px}
.tsub{display:block;margin-top:28px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
@media(max-width:640px){
 .team{flex-direction:column;align-items:center;gap:22px}
 .tm-list{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:12px 10px}
 .tm-soc{opacity:1;transform:none;pointer-events:auto}
}
html[data-theme="dark"] .tm-name{color:#7ff3f5}
html[data-theme="dark"] .tm-ph{background:#0f2729}
html[data-theme="dark"] .tm-soc a{color:#7ff3f5}

/* ---- expanding cards (home gallery) ---- */
.xc{display:flex;gap:10px;height:clamp(340px,52vh,440px);margin:6px 0 28px;text-align:start}
.xc-card{position:relative;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;cursor:pointer;background:#0f2729 var(--img) center/cover no-repeat;filter:grayscale(.9) brightness(.78);transition:flex-grow .65s cubic-bezier(.3,.7,.2,1),filter .5s,box-shadow .5s;outline:none;-webkit-tap-highlight-color:transparent}
.xc-card.on{flex-grow:6;filter:none;box-shadow:0 18px 44px #00d3d655}
.xc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0f2729ee 0%,#0f272966 38%,transparent 66%);opacity:.9;pointer-events:none}
.xc-card:focus-visible{box-shadow:0 0 0 3px #00d3d6}
.xc-vt{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;color:#fff;font-weight:700;font-size:.92rem;white-space:nowrap;text-shadow:0 2px 8px #000a;transition:opacity .3s}
.xc-card.on .xc-vt{opacity:0}
.xc-ico{position:absolute;z-index:3;inset-inline-start:14px;bottom:14px;width:42px;height:42px;border-radius:50%;background:#ffffffee;color:var(--c2);display:grid;place-items:center;box-shadow:0 6px 16px #0006}
.xc-ico svg{width:20px;height:20px}
.xc-body{position:absolute;z-index:3;inset-inline:0;bottom:0;padding:16px 70px 16px 16px;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s;pointer-events:none}
html[dir="ltr"] .xc-body{padding:16px 16px 16px 70px}
.xc-body h3{color:#fff;font-size:1.1rem;margin-bottom:2px;line-height:1.7}
.xc-body p{font-size:.84rem;line-height:1.8;opacity:.92;max-width:34ch}
.xc-more{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;color:#fff;background:#00d3d6cc;padding:0 14px;border-radius:20px;line-height:28px}
.xc-card.on .xc-body{opacity:1;transform:none;transition-delay:.25s;pointer-events:auto}
@media(max-width:800px){
 .xc{flex-direction:column;height:auto}
 .xc-card{flex:none;height:62px;transition:height .55s cubic-bezier(.3,.7,.2,1),filter .5s,box-shadow .5s}
 .xc-card.on{height:290px}
 .xc-vt{writing-mode:horizontal-tb;left:18px;right:70px;transform:translateY(-50%);text-align:start;inset-inline-start:18px}
 .xc-ico{bottom:auto;top:10px;width:40px;height:40px}
 .xc-card.on .xc-ico{bottom:14px;top:auto}
}
html[data-theme="dark"] .xc-card.on{box-shadow:0 18px 44px #000a}

/* ---- tools (home section + tools page) ---- */
.eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#00b5b8;margin-bottom:6px}
#tools{text-align:start}
#tools .title,.thead .title{display:block;font-size:clamp(1.9rem,4.2vw,2.9rem);text-align:start}
#tools .title:hover,#tools .sub:hover{transform:none}
#tools .sub,.thead .sub{margin:0 0 6px;max-width:560px;text-align:start}
#tools .more{margin-top:22px;display:inline-block}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.tcard{display:block;text-align:start;background:#fff;border:1px solid #0f27291c;border-radius:18px;padding:24px 26px 26px;min-height:172px;transition:transform .28s,box-shadow .28s,border-color .28s}
.tcard:hover,.tcard:focus-visible{transform:translateY(-4px);box-shadow:0 16px 38px #00d3d62e;border-color:#00d3d677;outline:none}
.tico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eff6f6;border:1px solid #0f272914;margin-bottom:24px;transition:transform .3s}
.tcard:hover .tico{transform:rotate(-6deg) scale(1.06)}
.tico svg{width:20px;height:20px;stroke-width:1.8}
.tico.c1{color:#00b5b8}.tico.c2{color:#00d3d6}.tico.c3{color:#04898b}.tico.c4{color:#00d3d6}
.tcard h3{font-size:.98rem;font-weight:800;color:#0b1c1e;margin-bottom:2px;line-height:1.8}
.tcard p{font-size:.86rem;color:#5b6b69;line-height:1.95}
@media(max-width:560px){.tgrid{grid-template-columns:1fr}.tcard{min-height:0}}
html[data-theme="dark"] .tcard{background:#0f2729;border-color:#00d3d633}
html[data-theme="dark"] .tcard h3{color:#e7fdfe}
html[data-theme="dark"] .tcard p{color:#76eaec}
html[data-theme="dark"] .tico{background:#0c1d1e;border-color:#00d3d62a}
html[data-theme="dark"] .eyebrow{color:#71e9eb}

/* ---- before/after: the "before" photo is black & white ---- */
.cmp .img.before{filter:grayscale(1) contrast(1.06)}

/* ---- page chrome without the old side strip ---- */
@media(max-width:800px){.blogmain,.post{padding-left:5vw}}

/* ---- tool pages ---- */
body.toolpage{background:var(--tex),#f6fbfb;color:var(--ink)}
.tmain{max-width:1020px;margin:0 auto;padding:84px 5vw 40px;text-align:start}
.thead{margin:6px 0 22px}
.thead .title{margin-bottom:4px}
.tback{display:inline-block;font-size:.85rem;font-weight:700;color:var(--c2);background:#00d3d61a;border-radius:20px;padding:0 14px;line-height:30px;transition:background .2s,transform .2s}
.tback:hover{background:#00d3d633;transform:translateX(3px)}
html[dir="rtl"] .tback:hover{transform:translateX(-3px)}
.tpanel{background:#fff;border:1px solid #0f27291c;border-radius:18px;padding:22px 24px;box-shadow:0 10px 30px #0f27290d}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media(max-width:800px){.two{grid-template-columns:1fr}.tmain{padding:64px 5vw 30px}}
.tnote{margin:18px 0 0;font-size:.82rem;line-height:1.95;opacity:.72;max-width:70ch}
.tcta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 8px}
.tcta .more{margin:0;display:inline-block;padding:2px 24px}
.more.ghost{background:transparent;color:var(--c2);border:1.5px solid #00d3d688;box-shadow:none}
.more.ghost:hover{background:#00d3d61a}
.tf label,.tfl{display:block;margin-bottom:16px}
.tf label>span:first-child,.tfl>span{display:block;font-weight:800;font-size:.88rem;margin-bottom:6px;color:var(--c2)}
.tf select,.tf input[type=date],.stepper input{width:100%;height:46px;border:1px solid #0f27292e;border-radius:12px;padding:0 12px;font:inherit;background:#fff;color:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.tf select:focus,.tf input:focus{border-color:var(--c1);box-shadow:0 0 0 3px #00d3d62e}
.stepper{display:flex;gap:8px;align-items:center}
.stepper input{text-align:center;font-weight:800;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper button{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid #0f27292e;background:#fff;color:var(--c2);font-size:1.3rem;cursor:pointer;line-height:1;transition:background .2s,transform .15s}
.stepper button:hover{background:#00d3d61a}.stepper button:active{transform:scale(.92)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{margin:0;flex:1 1 0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block!important;text-align:center;margin:0!important;height:44px;line-height:44px;border:1px solid #0f27292e;border-radius:12px;cursor:pointer;font-weight:700!important;color:inherit!important;transition:background .2s,border-color .2s,color .2s}
.seg input:checked+span{background:var(--c1);border-color:var(--c1);color:#fff!important}
.seg input:focus-visible+span{outline:3px solid #00d3d655}
.tf .chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:6px 0 0}
.tf .chk input{width:20px;height:20px;accent-color:#00d3d6;margin-top:6px;flex:none}
.tf .chk span{font-weight:600!important;color:inherit!important;margin:0!important}
.p-tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.p-tbl td{padding:9px 0;border-bottom:1px dashed #0f272922}
.p-tbl td:last-child{text-align:end;font-weight:700;white-space:nowrap}
.p-tbl .neg{color:#00d3d6}
.p-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#00d3d6,#04898b);color:#fff}
.p-total b{font-size:1.5rem}.p-total small{font-size:.8rem;font-weight:500;opacity:.85}
.d-big{padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#00d3d6,#04898b);color:#fff;margin-bottom:16px}
.d-big span,.d-big small{display:block;font-size:.82rem;opacity:.85}.d-big b{display:block;font-size:1.25rem;line-height:1.7}
.d-steps{list-style:none;position:relative;padding:0;margin:0}
.d-steps li{position:relative;display:flex;gap:14px;padding-bottom:16px}
.d-steps li::before{content:"";position:absolute;inset-inline-start:6px;top:16px;bottom:-2px;width:2px;background:linear-gradient(#00d3d6,#00d3d633)}
.d-steps li:last-child::before{display:none}
.d-steps i{flex:none;width:14px;height:14px;margin-top:6px;border-radius:50%;background:#fff;border:3px solid var(--c1);position:relative;z-index:1}
.d-steps li:last-child i{background:var(--gold);border-color:var(--gold)}
.d-steps b{display:block;font-size:.92rem}.d-steps span{font-size:.8rem;opacity:.7}
.sh-groups{display:grid;gap:12px}
.shade{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:800px){.shade{grid-template-columns:1fr}}
.sh-group{background:#fff;border:1px solid #0f27291c;border-radius:16px;padding:14px 16px}
.sh-group h3{font-size:.85rem;color:var(--c2);margin-bottom:8px;line-height:1.6}
.sh-row{display:flex;flex-wrap:wrap;gap:8px}
.sh-sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:62px;padding:6px 4px;border-radius:12px;border:1.5px solid transparent;background:none;cursor:pointer;font:inherit;color:inherit;transition:transform .2s,border-color .2s,background .2s}
.sh-sw i{display:block;width:44px;height:50px;border-radius:12px 12px 22px 22px;background:linear-gradient(#ffffff55,transparent 40%),var(--c);box-shadow:inset 0 -6px 10px #0000001a,0 2px 6px #0f272922}
.sh-sw span{font-size:.78rem;font-weight:800;direction:ltr}
.sh-sw:hover{transform:translateY(-3px)}
.sh-sw.a{border-color:var(--c1);background:#00d3d614}
.sh-sw.b{border-color:var(--gold);background:#00b5b818}
.sh-sw.a.b{border-color:var(--c1)}
.sh-sw.a::after,.sh-sw.b::after{position:absolute;top:-6px;inset-inline-end:-4px;width:18px;height:18px;border-radius:50%;font-size:.65rem;font-weight:800;line-height:18px;text-align:center;color:#fff}
.sh-sw.a::after{content:"A";background:var(--c1)}
.sh-sw.b::after{content:"B";background:var(--gold)}
.sh-sw.a.b::after{content:"A·B"; width:28px;border-radius:9px;background:var(--c1)}
.sh-panel{position:sticky;top:20px}
.sh-slots{display:flex;gap:8px;margin-bottom:12px}
.sh-slot{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:12px;border:1.5px solid #0f27292a;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,background .2s}
.sh-slot em{font-style:normal;font-weight:800;color:var(--c2)}
.sh-slot i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #0003}
.sh-slot b{margin-inline-start:auto;direction:ltr;font-size:.9rem}
.sh-slot.on{border-color:var(--c1);background:#00d3d614}
.sh-slot:nth-child(2).on{border-color:var(--gold);background:#00b5b818}
.sh-teeth{display:flex;justify-content:center;gap:16px;padding:14px 0 6px;background:radial-gradient(circle at 50% 40%,#f2f8f8,#d7f9f9);border-radius:14px}
.sh-teeth figure{margin:0;text-align:center;opacity:.8;transition:transform .3s,opacity .3s}
.sh-teeth figure.on{opacity:1;transform:translateY(-4px) scale(1.04)}
.sh-teeth .tooth{width:min(110px,26vw);height:auto;display:block;filter:drop-shadow(0 8px 10px #0f272933)}
.sh-teeth figcaption{font-weight:800;direction:ltr;font-size:.9rem;margin-top:4px}
.sh-info{margin:14px 0;font-size:.88rem;line-height:1.95}.sh-info p{margin:0 0 6px}.sh-diff{opacity:.75;font-size:.82rem}
.sh-copy{margin:0;display:block;width:100%;text-align:center;cursor:pointer;border:0}
.ck-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ck-prog{flex:1 1 180px;height:10px;border-radius:10px;background:#00d3d622;overflow:hidden}
.ck-prog i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#00b5b8,#00d3d6);transition:width .4s}
#ckCnt{color:var(--c2);min-width:56px}
.ck-btns{display:flex;gap:8px}
.chip{height:34px;padding:0 14px;border-radius:20px;border:1px solid #0f27292a;background:#fff;color:var(--c2);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .2s}
.chip:hover{background:#00d3d61a}
.ck-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;align-items:start}
.ck-g h3{font-size:.95rem;color:var(--c2);margin-bottom:6px}
.ck{display:flex;gap:12px;align-items:flex-start;padding:9px 0;cursor:pointer;border-bottom:1px dashed #0f27291c;font-size:.9rem;line-height:1.9}
.ck:last-child{border-bottom:0}
.ck input{position:absolute;opacity:0;pointer-events:none}
.ck i{flex:none;width:22px;height:22px;margin-top:5px;border-radius:7px;border:2px solid #00d3d688;background:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s}
.ck i::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .2s}
.ck input:checked+i{background:var(--c1);border-color:var(--c1)}
.ck input:checked+i::after{transform:rotate(45deg) scale(1)}
.ck input:focus-visible+i{outline:3px solid #00d3d655}
.ck.ok span{opacity:.55;text-decoration:line-through;text-decoration-color:#00d3d688}
@media print{.dock,.topctl,.tback,.tcta,.ck-btns,footer.sitefoot{display:none!important}body.toolpage{background:#fff}.tpanel{box-shadow:none}}
html[data-theme="dark"] body.toolpage{background:#0c1d1e var(--tex)}
html[data-theme="dark"] .tpanel,html[data-theme="dark"] .sh-group,html[data-theme="dark"] .tf select,html[data-theme="dark"] .tf input[type=date],html[data-theme="dark"] .stepper input,html[data-theme="dark"] .stepper button,html[data-theme="dark"] .sh-slot,html[data-theme="dark"] .chip,html[data-theme="dark"] .ck i{background:#0f2729;border-color:#00d3d633;color:#e7fdfe}
html[data-theme="dark"] .tf label>span:first-child,html[data-theme="dark"] .tfl>span,html[data-theme="dark"] .sh-group h3,html[data-theme="dark"] .ck-g h3,html[data-theme="dark"] .sh-slot em{color:#7ff3f5}
html[data-theme="dark"] .sh-teeth{background:radial-gradient(circle at 50% 40%,#163032,#0c1d1e)}
html[data-theme="dark"] .seg span{border-color:#00d3d633}
html[data-theme="dark"] .tback,html[data-theme="dark"] .more.ghost{color:#7ff3f5}
html[data-theme="dark"] .ck input:checked+i{background:var(--c1)}

/* ---- V10: the new icon buttons win over the old pill switches ---- */
#themeBtn.ibtn,#langBtn.ibtn,html[data-theme="dark"] #themeBtn.ibtn,html[data-lang="en"] #langBtn.ibtn,html[data-theme="dark"] #langBtn.ibtn{width:42px;height:42px;border-radius:12px;padding:0;font-weight:800;border:1px solid #04898b30;background:#ffffffd9;color:var(--c2);box-shadow:0 4px 14px #0f272922;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme="dark"] #themeBtn.ibtn,html[data-theme="dark"] #langBtn.ibtn,html[data-theme="dark"][data-lang="en"] #langBtn.ibtn{background:#0f2729dd;border-color:#00d3d640;color:#7ff3f5}
#themeBtn.ibtn .i-sun,#themeBtn.ibtn .i-moon{display:block!important;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
#themeBtn.ibtn .i-sun circle{fill:none}
#themeBtn.ibtn .i-sun{color:#00b5b8}
html[data-theme="dark"] #themeBtn.ibtn .i-moon{color:#7ff3f5}
@media(max-width:800px){#themeBtn.ibtn,#langBtn.ibtn{width:40px;height:40px}}
html[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;font-family:inherit;font-weight:700;font-size:.82rem}
#ckCnt{white-space:nowrap}
#tools .title::after,.thead .title::after{margin-inline:0}

/* =====================================================================
   V11 · palette of the reference dashboard · vertical dock · page timeline
   · cards without icons · new footer
   ===================================================================== */
:root{--t:#02D6D7;--td:#031011;--tl:#E7F5F5;--ink:#031011;--gold:#02D6D7;--gold-l:#CCE4E3;--cream:#F8FDFD;--cream2:#F4F9F9;--line:#CCE4E3;--c1:#02D6D7;--c2:#031011;--deep:#031011}
html[data-theme="dark"]{--c1:#02D6D7;--c2:#8fe3e6;--deep:#e6fffb}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body,body.home,body.blogpage,body.orderpage,body.gpage,body.toolpage{background-color:var(--cream)}
.sub,.tcard p,.tnote{color:#4f6264}
html[data-theme="dark"] .sub,html[data-theme="dark"] .tcard p,html[data-theme="dark"] .tnote{color:#a9c4c6}

/* ---- the old order orb and the video timeline are gone ---- */
.fxorb,.tl{display:none!important}

/* ---- dock: back on the left edge, same look ---- */
@media(min-width:801px){
 .blogmain,.post{padding-left:calc(5vw + 70px)}
 .tmain{padding-left:calc(5vw + 70px)}
}
.topctl{z-index:51}
@media(min-width:801px){.topctl{left:14px;top:14px}}


/* ---- timeline for the whole page (right side) ---- */
.tlx{--tlr:36px}
.tlx-s{position:relative}
@media(min-width:801px){body.home .tlx .plain.tlx-s{padding-right:calc(var(--tlr) + 176px)}}
.tlx-line{position:absolute;right:var(--tlr);width:2px;margin-right:-1px;z-index:1;pointer-events:none;border-radius:2px;
 background:linear-gradient(to bottom,transparent 0,#CCE4E3 6%,#CCE4E3 94%,transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.tlx-beam{position:absolute;top:0;left:0;right:0;height:0;border-radius:2px;opacity:0;background:linear-gradient(to top,#02D6D7 0%,#02D6D7 10%,#02d6d700 100%);box-shadow:0 0 12px #02d6d799}
.tlx-rail{position:absolute;top:0;bottom:0;right:0;width:calc(var(--tlr) + 176px);padding-top:74px;pointer-events:none;z-index:3}
.tlx-stick{position:sticky;top:116px;display:flex;align-items:flex-start;gap:12px;margin-right:calc(var(--tlr) - 10px)}
.tlx-dot{flex:none;width:20px;height:20px;border-radius:50%;background:var(--cream);display:grid;place-items:center;margin-top:5px}
.tlx-dot::after{content:"";width:11px;height:11px;border-radius:50%;background:#E7F5F5;border:1.5px solid #CCE4E3;transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.tlx-dot.done::after{background:#02D6D7;border-color:#02D6D7;box-shadow:0 0 0 4px #02d6d733}
.tlx-t{pointer-events:auto;max-width:150px;font-size:1.08rem;font-weight:800;line-height:1.7;color:#8da0a2;text-align:start;transition:color .3s}
.tlx-t:hover{color:var(--ink)}
.tlx-t.on{color:var(--ink)}
.tlx-t.on+*{}
html[data-theme="dark"] .tlx-t{color:#5f7a7d}html[data-theme="dark"] .tlx-t.on,html[data-theme="dark"] .tlx-t:hover{color:#e8f3f3}
html[data-theme="dark"] .tlx-dot::after{background:#10282c;border-color:#1e3b40}
html[data-theme="dark"] .tlx-line{background:linear-gradient(to bottom,transparent 0,#1e3b40 6%,#1e3b40 94%,transparent 100%)}
@media(max-width:1100px) and (min-width:801px){.tlx-t{max-width:110px;font-size:.92rem}.tlx-rail{width:calc(var(--tlr) + 136px)}body.home .tlx .plain.tlx-s{padding-right:calc(var(--tlr) + 140px)}}
@media(max-width:800px){
 .tlx{--tlr:14px}
 .tlx-t{display:none}
 .tlx-rail{width:34px}
 body.home .tlx .plain.tlx-s{padding-right:calc(5vw + 30px)}
 .tlx-stick{top:calc(42vh + 26px)}
}

/* ---- gallery cards: no icons, no link line, any number of photos ---- */
.xc{overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#02D6D7 transparent;overscroll-behavior-x:contain}
.xc::-webkit-scrollbar{height:6px}.xc::-webkit-scrollbar-thumb{background:#02D6D7;border-radius:6px}
.xc-card{display:block;color:#fff;min-width:68px}
.xc-card.on{min-width:300px}
.xc-ico,.xc-more{display:none!important}
.xc-body,html[dir="ltr"] .xc-body{padding:16px 18px}
@media(max-width:800px){
 .xc{overflow:visible;padding-bottom:0}
 .xc-card,.xc-card.on{min-width:0}
}

/* ---- footer ---- */
.ftr{position:relative;z-index:3;background:#fff;color:var(--ink);border-top:1px solid #E1E6E6;padding:58px 5vw 26px;text-align:start;overflow:hidden}
body:not(.home) .ftr{margin-top:60px}
@media(min-width:801px){body:not(.home) .ftr{padding-left:calc(5vw + 70px)}}
.ftr-in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.2fr .9fr 1.1fr 1fr;gap:36px 38px}
.ftr-col{min-width:0;position:relative}
.ftr-col h4{font-size:1.05rem;font-weight:800;margin:0 0 14px;line-height:1.7;color:var(--ink)}
.ftr-col h4.ftr-big{font-size:1.85rem;line-height:1.55;margin-bottom:12px}
.ftr-news::before{content:"";position:absolute;inset-inline-start:-50px;top:-40px;width:250px;height:250px;background:radial-gradient(circle,#02d6d733,transparent 66%);pointer-events:none;z-index:-1}
.ftr-p{color:#5b6b6d;font-size:.93rem;line-height:1.95;margin:0 0 16px}
.ftr-mail{display:flex;align-items:center;gap:6px;height:46px;padding:0 5px 0 5px;border:1px solid #CCE4E3;border-radius:10px;background:#fff;max-width:320px;transition:border-color .2s,box-shadow .2s}
.ftr-mail:focus-within{border-color:#02D6D7;box-shadow:0 0 0 3px #02d6d733}
.ftr-mail input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.88rem;padding:0 8px;color:inherit}
.ftr-mail button{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#031011;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.ftr-mail button:hover{background:#038c8f;transform:scale(1.07)}
.ftr-mail button svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ftr-sms{margin-top:10px}
.ftr-news .sf-msg{max-width:320px;color:#b3261e}.ftr-news .sf-msg.ok{color:#038c8f}
.ftr-note{font-size:.72rem;line-height:1.8;color:#7b8a8c;margin:8px 0 0;max-width:320px}
.ftr-links,.ftr-team{list-style:none;margin:0;padding:0}
.ftr-links li{margin-bottom:9px}
.ftr-links a{font-size:.92rem;color:var(--ink);transition:color .2s,padding .2s}
.ftr-links a:hover{color:#038c8f;padding-inline-start:5px}
.ftr-line{font-size:.9rem;line-height:1.8;margin:0 0 9px;color:var(--ink)}
.ftr-line a{color:var(--ink);transition:color .2s}.ftr-line a:hover{color:#038c8f}
.ftr-ig{display:grid;place-items:center;width:38px;height:38px;margin-top:14px;border-radius:50%;border:1px solid #d6dcdc;color:var(--ink);transition:background .2s,border-color .2s,transform .2s}
.ftr-ig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ftr-ig:hover{background:#02D6D7;border-color:#02D6D7;transform:translateY(-2px)}
.ftr-team li{margin-bottom:9px}
.ftr-team a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;line-height:1.7}
.ftr-team b{font-size:.92rem;font-weight:700;color:var(--ink)}
.ftr-team small{font-size:.74rem;color:#6a7c7e}
.ftr-team a:hover b{color:#038c8f}
.ftr-tgl{display:flex;align-items:center;gap:9px;margin-top:18px;padding:4px 0;background:none;border:0;cursor:pointer;color:var(--ink);direction:ltr}
.ftr-tgl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ftr-tgl .sw{position:relative;width:44px;height:24px;border-radius:14px;background:#031011;display:block;transition:background .3s}
.ftr-tgl .sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] .ftr-tgl .sw{background:#02D6D7}
html[data-theme="dark"] .ftr-tgl .sw i{transform:translateX(20px);background:#031011}
.ftr-tgl:focus-visible{outline:3px solid #02d6d788;outline-offset:3px;border-radius:12px}
.ftr-bottom{max-width:1040px;margin:38px auto 0;padding-top:20px;border-top:1px solid #E1E6E6;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px;font-size:.84rem;color:#5b6b6d}
.ftr-bl a{margin-inline-start:18px;color:var(--ink);transition:color .2s}.ftr-bl a:hover{color:#038c8f}
.ftr .sf-callbtn{display:none}
@media(max-width:1000px){.ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.ftr{padding:44px 6vw 110px}.ftr .sf-callbtn{display:inline-block;margin-inline-start:10px;padding:0 14px;border-radius:20px;background:#02D6D7;color:#031011;font-weight:700;font-size:.8rem}}
@media(max-width:560px){.ftr-in{grid-template-columns:1fr}.ftr-col h4.ftr-big{font-size:1.6rem}}
html[data-theme="dark"] .ftr{background:#0a1d20;border-top-color:#1e3b40}
html[data-theme="dark"] .ftr-mail{background:#10282c;border-color:#1e3b40}
html[data-theme="dark"] .ftr-mail button{background:#02D6D7}html[data-theme="dark"] .ftr-mail button svg{stroke:#031011}
html[data-theme="dark"] .ftr-p,html[data-theme="dark"] .ftr-bottom,html[data-theme="dark"] .ftr-team small,html[data-theme="dark"] .ftr-note{color:#9bb8ba}
html[data-theme="dark"] .ftr-bottom{border-top-color:#1e3b40}
html[data-theme="dark"] .ftr-ig{border-color:#1e3b40}
html[data-theme="dark"] .ftr-news .sf-msg.ok{color:#02D6D7}

/* ---- text on cyan is near-black (as the "Set Goal"/bars in the reference), not white ---- */
.more,a.hl,button.hl,.vlinks .hl,.fbtns .hl,.aibtn,.seg input:checked+span,.burger.x,.sf-callbtn,.tcta .more{color:#031011!important}
.more.ghost{color:#031011!important;background:transparent}
.p-total,.d-big{background:linear-gradient(135deg,#02D6D7,#7be9ea);color:#031011}
.d-big span,.d-big small{opacity:.8}
.sh-sw.a::after,.sh-sw.b::after{color:#031011}
.sh-sw.b::after{background:#8fe3e6}.sh-sw.b{border-color:#8fe3e6;background:#8fe3e61f}
.sh-slot:nth-child(2).on{border-color:#8fe3e6;background:#8fe3e61f}
.ck i::after{border-color:#031011}
.tcard:hover,.tcard:focus-visible{border-color:#02D6D7;box-shadow:0 16px 38px #02d6d733}
.tico.c1,.tico.c2,.tico.c3,.tico.c4{color:#038c8f}
.eyebrow{color:#038c8f}
html[data-theme="dark"] .more,html[data-theme="dark"] a.hl,html[data-theme="dark"] button.hl,html[data-theme="dark"] .tcta .more{color:#031011!important}
html[data-theme="dark"] .more.ghost{color:#8fe3e6!important;border-color:#02d6d788}
html[data-theme="dark"] .eyebrow{color:#8fe3e6}
.ibtn{border-color:#CCE4E3}
#themeBtn.ibtn .i-sun{color:#038c8f}
.box,.tcard,.tpanel,.sh-group{border-color:#CCE4E3}

/* ---- V11 fixes ---- */
footer.ftr,html[data-theme="dark"] footer.ftr{opacity:1;margin-top:0;font-size:inherit}
body:not(.home) footer.ftr{margin-top:60px}
.xc-card{min-width:52px}
.xc-card.on{min-width:250px}
@media(min-width:801px) and (max-width:1560px){
 .team{flex-direction:column;align-items:center;gap:26px;max-width:100%}
 .tm-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;width:100%;padding-top:0}
 .tm-name{font-size:.98rem}
}
html[dir="ltr"] .tlx-stick{flex-direction:row-reverse}
html[dir="ltr"] .tlx-t{text-align:end}

/* ===== V12: scroll-pinned team + gallery ===== */
body.home .plain.pinsec{padding-top:0!important;padding-bottom:0!important}
.pin-in{position:sticky;top:var(--pin-top,0px);min-height:calc(100vh - var(--pin-top,0px));display:flex;flex-direction:column;justify-content:center;padding:64px 0 48px;box-sizing:border-box}
.pin-in>.title{margin-bottom:6px}
.pin-sp{pointer-events:none}
/* team rows: tag + title + full text */
.tm-tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#038c8f;line-height:1.6}
html[data-theme="dark"] .tm-tag{color:#7be9ea}
.tm-role{font-size:.86rem;opacity:.78;line-height:1.95;margin-top:0;max-width:44ch}
.tm-name{font-size:1.08rem;line-height:1.8}
.team{max-width:820px}
.tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph{width:clamp(96px,11vw,150px);height:clamp(112px,13vw,176px)}
.tm-col.c2{margin-top:clamp(22px,3vw,44px)}
.tm-list{gap:clamp(10px,1.3vw,16px)}
@media(min-width:801px) and (max-width:1560px){.tm-list{display:flex;flex-direction:column}.team{flex-direction:row;align-items:flex-start}}
@media(max-width:800px){
 .pin-in{padding:18px 0 14px}
 .team{flex-direction:column;align-items:center;gap:14px;margin:10px auto 0}
 .tm-photos{gap:6px}.tm-col{gap:6px}
 .tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph{width:26vw;height:19vh;max-height:150px;border-radius:12px}
 .tm-col.c2{margin-top:18px}
 .tm-list{display:flex;flex-direction:column;gap:4px;width:100%}
 .tm-row{padding:2px 0}
 .tm-name{font-size:1rem;line-height:1.6}
 .tm-role{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .4s,opacity .3s;font-size:.84rem;line-height:1.8}
 .tm-row.act .tm-role{max-height:9em;opacity:.85}
 .tm-tag{font-size:.68rem;line-height:1.4}
 .tm-photos{direction:ltr}
}
/* gallery cards */
@media(max-width:800px){
 #gallery .xc{height:auto;max-height:calc(100vh - 30vh - 170px);overflow:hidden;padding-bottom:0;margin-bottom:12px}
 #gallery .xc-card{height:54px}
 #gallery .xc-card.on{height:230px}
}
@media(min-width:801px){#gallery .xc{height:clamp(320px,50vh,420px)}}
/* team rows: only the active row shows its full text, so the whole block fits one screen */
.tm-role{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .45s,opacity .3s;max-width:none}
.tm-row.act .tm-role{max-height:12em;opacity:.85}
.team.hov .tm-row:not(.act){opacity:.55}
.tm-name{font-size:1.02rem;line-height:1.7}
.tm-row{padding:3px 0}
.tm-list{gap:6px}
@media(min-width:801px){
 .team{gap:clamp(14px,2.4vw,30px);margin:18px auto 10px}
 .tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph{width:clamp(86px,9vw,124px);height:clamp(100px,11vw,150px)}
}
@media(max-width:800px){
 .tm-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:340px}
 .tm-col,.tm-col.c2{display:contents;margin:0}
 .tm-ph[data-id="1"]{order:1}.tm-ph[data-id="2"]{order:2}.tm-ph[data-id="3"]{order:3}.tm-ph[data-id="4"]{order:4}
 .tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph{width:100%;height:13vh;max-height:120px}
 .team{gap:10px}
 .tm-list{padding-bottom:84px}
 #gallery .xc{position:relative;max-height:calc(70vh - 250px);margin-bottom:6px}
 #gallery .sub{display:none}
 #gallery .more{margin-bottom:84px}
 #gallery .pin-in{padding-bottom:0}
}
@media(max-width:800px){#gallery .xc-card.on{height:min(230px,calc(70vh - 270px))}}

/* ===== V13: six-member team + seamless video edge ===== */
.tm-photos{gap:8px}
.tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph,.tm-col.c3 .tm-ph{width:clamp(72px,7.4vw,104px);height:clamp(86px,9.2vw,128px)}
.tm-col.c2{margin-top:clamp(22px,2.8vw,40px)}
.tm-col.c3{margin-top:clamp(8px,1vw,14px)}
.tm-list{gap:4px}
.tm-row{padding:3px 0}
.tm-tag{font-size:.72rem}
@media(min-width:801px){
 .team{max-width:900px;gap:clamp(18px,2.4vw,34px);margin:16px auto 10px}
 .tm-role{max-width:40ch}
 .vframe{border-radius:0!important;box-shadow:none!important;background:transparent!important;border:0!important}
 .vframe video{background:transparent!important;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 58%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.22) 91%,transparent 100%)!important;
  mask-image:linear-gradient(to right,#000 0%,#000 58%,rgba(0,0,0,.86) 68%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.22) 91%,transparent 100%)!important}
 .vside{background:transparent!important;box-shadow:none!important}
}
@media(max-width:800px){
 #team .title{font-size:1.45rem;margin:0 0 6px}
 #team .title+*{margin-top:0}
 .tm-row>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;width:100%}
 .tm-row .tm-name{order:-1;font-size:1rem;line-height:1.7}
 .tm-row .tm-tag{font-size:.7rem}
 .tm-row .tm-role{flex:0 0 100%;font-size:.84rem;line-height:1.8}
 .tm-bar{margin-top:10px}
}

/* ===== V14: floating dock (vertical on desktop, horizontal on phones) ===== */
.dock{position:fixed;width:max-content;z-index:50;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;direction:ltr;align-items:center;justify-content:flex-end;max-width:96vw;color:var(--c2)}
.dock:not([data-ready]){padding:6px;gap:4px;border-radius:20px;background:#ffffffd6;border:1px solid #CCE4E3}
.dk-pill{position:relative;z-index:2;display:flex;align-items:center;padding:5px;border-radius:999px;background:#ffffffe6;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid #CCE4E3;box-shadow:0 12px 34px #0f272926,0 1px 0 #fff inset}
.dk-clip{display:grid;grid-template-columns:1fr;opacity:1;transition:grid-template-columns .5s cubic-bezier(.22,1,.36,1),grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .2s}
.dk-strip{min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;gap:4px;padding-right:4px;justify-content:flex-end}
.dock.collapsed .dk-clip{grid-template-columns:0fr;opacity:0}
.dock.collapsed .dk-strip{padding:0}
.dk-i,.dk-tgl{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--c2);background:transparent;border:0;padding:0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .2s}
.dk-i svg,.dk-tgl svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dk-i:hover,.dk-tgl:hover,.dk-i:focus-visible,.dk-tgl:focus-visible{background:#02d6d726}
.dk-i.on{background:#02d6d733;color:#027a7c}
.dk-i.on::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#02D6D7;left:3px;top:50%;margin-top:-2px}
.dk-i.logo{background:#fff;border:1.5px solid #02d6d73d;padding:3px;overflow:hidden}
.dk-i.logo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .6s}
.dk-i.logo:hover img{transform:rotate(360deg)}
.dk-i.logo.on::after{display:none}
.dk-i.cta{background:#02D6D7;color:#031011}
.dk-i.cta:hover{background:#6fe8e9}
.dk-i.cta.on::after{background:#031011}
.dk-tgl svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.dock.collapsed .dk-tgl svg{transform:rotate(90deg)}
.dk-rail{position:absolute;z-index:3;pointer-events:none;bottom:calc(100% + 12px);left:0}
.dk-bar{display:flex;flex-direction:row;align-items:flex-start;width:max-content;border-radius:10px;background:var(--deep);color:#fff;box-shadow:0 10px 26px #0f272955;opacity:0;clip-path:inset(0 100% 0 0 round 10px);transition:transform .38s cubic-bezier(.22,1,.36,1),clip-path .38s cubic-bezier(.22,1,.36,1),opacity .18s;will-change:transform,clip-path}
.dk-bar.show{opacity:1}
.dk-bar.snap{transition:opacity .18s}
.dk-seg{flex:none;height:32px;display:flex;align-items:center;padding:0 12px;white-space:nowrap;font-size:.8rem;font-weight:600;line-height:1;letter-spacing:-.01em}
.dk-lbl{display:block}
@media(min-width:801px){
 .dock{left:14px;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;justify-content:flex-end;align-items:flex-start}
 .dk-pill{flex-direction:column}
 .dk-clip{grid-template-columns:none;grid-template-rows:1fr}
 .dk-strip{flex-direction:column;justify-content:flex-end;padding:0 0 4px}
 .dock.collapsed .dk-clip{grid-template-columns:none;grid-template-rows:0fr}
 .dk-rail{bottom:auto;left:calc(100% + 12px);top:0}
 .dk-bar{flex-direction:column;clip-path:inset(0 100% 0 0 round 10px)}
}
@media(max-width:800px){.dk-i,.dk-tgl{width:38px;height:38px}.dk-pill{padding:5px}.dk-strip{gap:3px}}
@media(hover:none){.dk-rail{display:none}}
html[data-theme="dark"] .dk-pill{background:#0f2729e6;border-color:#02d6d733;box-shadow:0 12px 34px #0009}
html[data-theme="dark"] .dk-i,html[data-theme="dark"] .dk-tgl{color:#7ff3f5}
html[data-theme="dark"] .dk-i.on{color:#02D6D7}
html[data-theme="dark"] .dk-i.logo{background:#e7fdfe}
html[data-theme="dark"] .dk-i.cta{background:#02D6D7;color:#031011}
html[data-theme="dark"] .dk-bar{background:#e7fdfe;color:#0f2729}
@media(prefers-reduced-motion:reduce){.dk-clip,.dk-bar{transition:none}}

/* ===== V14: footer + timeline are always English (LTR) ===== */
footer.ftr{direction:ltr;text-align:left}
footer.ftr .ftr-bottom{direction:ltr}
html[dir="rtl"] .tlx-t{direction:ltr;text-align:right;letter-spacing:.01em}
#team .title{letter-spacing:.16em;font-weight:900}

/* ===== V14: team photos — three staggered columns (desktop and phone) ===== */
.team{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:clamp(18px,2.2vw,30px);max-width:100%;width:100%;margin:16px 0 10px}
.tm-photos{display:flex;flex-direction:row;gap:8px;direction:ltr;flex:none;width:auto;max-width:none}
.tm-col,.tm-col.c2,.tm-col.c3{display:flex;flex-direction:column;gap:8px;margin-top:0}
.tm-col.c2{margin-top:clamp(30px,4.2vh,44px)}
.tm-col.c3{margin-top:clamp(12px,1.8vh,20px)}
.tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph,.tm-col.c3 .tm-ph{width:clamp(70px,7.2vw,102px);height:clamp(92px,15vh,150px);border-radius:14px}
.tm-photos{margin-top:clamp(6px,2vh,26px)}
.tm-list{display:flex;flex-direction:column;flex:1;min-width:0;width:auto;padding:0;gap:4px}
.tm-role{max-width:none}
.tm-ph[data-id]{order:0}
@media(max-width:800px){
 .team{flex-direction:column;align-items:center;gap:12px;margin:8px auto 0}
 .tm-photos{gap:6px}
 .tm-col,.tm-col.c2,.tm-col.c3{gap:6px}
 .tm-col.c2{margin-top:clamp(18px,3.4vh,30px)}
 .tm-col.c3{margin-top:clamp(8px,1.5vh,14px)}
 .tm-col.c1 .tm-ph,.tm-col.c2 .tm-ph,.tm-col.c3 .tm-ph{width:clamp(66px,21vw,92px);height:clamp(54px,8.6vh,84px);border-radius:12px}
 .tm-photos{margin-top:0}
 .tm-col.c2{margin-top:clamp(14px,2.6vh,24px)}
 .tm-col.c3{margin-top:clamp(6px,1.2vh,12px)}
 .tm-list{width:100%;padding-bottom:84px;gap:0}
 .tm-row{padding:1px 0}
 .tm-row .tm-name{line-height:1.5}
 .tm-row .tm-role{line-height:1.7}
}

/* ================= V15 ================= */
/* OriginButton (vanilla port): a circle grows from the pointer and fills the button */
.ob{isolation:isolate;overflow:hidden;--ox:50%;--oy:50%;--od:0px}
.ob::before{content:"";position:absolute;z-index:-1;left:var(--ox);top:var(--oy);width:var(--od);height:var(--od);border-radius:50%;background:#031011;transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.ob.ob-on::before{transform:translate(-50%,-50%) scale(1)}
html body .ob{transition:color .3s cubic-bezier(.16,1,.3,1),transform .25s,box-shadow .25s}
html body .ob.ob-on{color:#fff!important}
html[data-theme="dark"] .ob::before{background:#f2fdfd}
html[data-theme="dark"] body .ob.ob-on{color:#031011!important}
.ob:active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){.ob::before{transition:none}}

/* home section bands: a touch more blue on every other section */
.plain,body.home .plain{background:#f0fafa}
.plain:nth-of-type(even),body.home .plain:nth-of-type(even){background:#fff}
html[data-theme="dark"] .plain,html[data-theme="dark"] body.home .plain{background:#0c1d1e}
html[data-theme="dark"] .plain:nth-of-type(even),html[data-theme="dark"] body.home .plain:nth-of-type(even){background:#0f2526}

/* welcome: plain arrow cursor over photos and text (they are not links) */
.tm-ph,.tm-row,.team{cursor:default}
/* welcome: the content is anchored at the top so flipping rows never moves the title or photos */
#team .pin-in{justify-content:flex-start;padding-top:clamp(70px,13vh,140px)}
@media(max-width:800px){#team .pin-in{padding-top:18px}}

/* phones: no gallery link floating over the video */
@media(max-width:800px){.vlinks{display:none!important}}

/* gallery: grid-template transition (like the 5fr / 1fr expanding cards) */
#xc.xc{display:grid;gap:10px;height:clamp(320px,52vh,440px);overflow:hidden;padding:0;margin:6px 0 24px;grid-template-rows:1fr;transition:grid-template-columns .6s cubic-bezier(.22,.8,.24,1),grid-template-rows .6s cubic-bezier(.22,.8,.24,1)}
#xc .xc-card,#xc .xc-card.on{display:block;flex:none;min-width:0!important;min-height:0;height:auto!important;filter:none!important;background:#0f2729;transition:box-shadow .5s ease-out!important;will-change:auto}
#xc .xc-card::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat;filter:grayscale(1) brightness(.85);transform:scale(1.1);transition:filter .5s ease-out,transform .6s ease-out}
#xc .xc-card.on::before{filter:none;transform:scale(1)}
#xc .xc-card::after{z-index:1}
#xc .xc-body,html[dir="ltr"] #xc .xc-body{inset-inline:auto;inset-inline-start:0;width:min(300px,100%);padding:16px 18px;opacity:0;transform:translateY(10px);transition:opacity .35s ease-out,transform .45s ease-out}
#xc .xc-card.on .xc-body{opacity:1;transform:none;transition-delay:.18s}
#xc .xc-ic{display:block;width:24px;height:24px;margin-bottom:8px;fill:none;stroke:#fffffff0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#xc .xc-vt{z-index:2;transition:opacity .25s ease-out}
@media(max-width:800px){
 #xc.xc{height:calc(70vh - 150px);min-height:300px;gap:6px}
 #gallery .sub{display:none}
 #xc .xc-vt{font-size:.8rem;left:16px;right:16px}
 #xc .xc-body,html[dir="ltr"] #xc .xc-body{width:auto;inset-inline-end:0;padding:12px 16px}
 #xc .xc-ic{width:20px;height:20px;margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){#xc.xc{transition:none}#xc .xc-card::before{transition:none}}

/* recommended dentists (team strip) */
#dentists{text-align:center}
.dn-badge{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#02D6D7;color:#031011;margin-bottom:14px;box-shadow:0 12px 28px -10px #02d6d7aa}
.dn-badge svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dentists .title,#dentists .sub{text-align:center;margin-inline:auto}
.dn-wrap{position:relative;margin:22px 0 10px}
.dn{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 36px 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);outline:none;overscroll-behavior-x:contain}
.dn::-webkit-scrollbar{display:none}
.dn-c{position:relative;flex:none;width:clamp(170px,19vw,240px);aspect-ratio:3/4.1;border-radius:20px;overflow:hidden;scroll-snap-align:center;background:linear-gradient(160deg,#d7f6f6,#9fe9ea);color:#fff;text-decoration:none;box-shadow:0 10px 26px -14px #0f2729aa;transition:transform .45s cubic-bezier(.22,.8,.24,1),box-shadow .45s}
.dn-c:hover{transform:translateY(-6px);box-shadow:0 22px 40px -16px #0f2729cc}
.dn-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .6s}
.dn-c:hover img{filter:none;transform:scale(1.04)}
.dn-ico{position:absolute;inset:0;display:grid;place-items:center;color:#046467}
.dn-ico svg{width:34%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.dn-in{position:absolute;inset-inline:8px;bottom:8px;padding:10px 12px;border-radius:14px;background:#0f272999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:start}
.dn-in b{display:block;font-size:.98rem;line-height:1.6;color:#fff}
.dn-in small{display:block;font-size:.78rem;line-height:1.6;color:#ffffffb8}
.dn-nav{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-28px;border-radius:50%;border:1px solid #02d6d744;background:#ffffffee;color:#031011;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -8px #0f272966;transition:transform .2s,background .2s}
.dn-nav:first-child{left:0}.dn-nav:last-child{right:0}
.dn-nav:hover{background:#02D6D7;transform:scale(1.08)}
.dn-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center}
.dn-cta .more{margin:0}
html[data-theme="dark"] .dn-c{background:linear-gradient(160deg,#12393b,#0b2224)}
html[data-theme="dark"] .dn-ico{color:#02D6D7}
html[data-theme="dark"] .dn-nav{background:#0f2526ee;color:#e9ffff}
@media(max-width:800px){.dn{padding-inline:18px;gap:12px}.dn-nav{display:none}.dn-c{width:62vw;max-width:240px}}
@media(min-width:801px){body.home .tlx #dentists.plain{text-align:center}}

/* author chip (blog list + article) */
.auth{display:flex;align-items:center;gap:10px;margin:8px 0}
.auth .av{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#cce4e3;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#046467;overflow:hidden}
.auth .an{font-size:.86rem;font-weight:700;color:var(--td,#046467)}
.auth.lg .av{width:46px;height:46px}.auth.lg .an{font-size:.95rem}

/* optional avatar / social-link boxes on the submit page, courier box on the order page */
.avpick{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avpick .avp{width:64px;height:64px;border-radius:50%;background:#e6f7f7 center/cover no-repeat;border:1.5px dashed #02d6d799;display:grid;place-items:center;color:#046467}
.avpick .avp svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.avpick .avp.has svg{display:none}
.soc{margin-top:22px;padding:18px;border:1.5px dashed #02d6d799;border-radius:18px;background:#f0fafa}
html[data-theme="dark"] .soc{background:#0c1d1e}
.soc h3{margin:0 0 4px;font-size:1.05rem}
.soc .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.soc input[type=url]{flex:1 1 240px;min-width:0;height:46px;padding:0 14px;border-radius:12px;border:1px solid #0f27292e;background:#fff;direction:ltr;text-align:left;font:inherit}
.soc .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.soc .shots label{position:relative;display:block;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent}
.soc .shots label.on{border-color:#02D6D7}
.soc .shots img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.soc .shots input{position:absolute;top:8px;inset-inline-start:8px;width:18px;height:18px;accent-color:#02b8ba}
.soc .smsg{margin-top:8px;font-size:.88rem}
.cour .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.cour .cgrid .full{grid-column:1/-1}
.cour label.f{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600}
.cour input[type=text],.cour input[type=tel],.cour textarea{height:44px;padding:0 12px;border-radius:12px;border:1px solid #0f27292e;background:#fff;font:inherit;color:inherit}
.cour textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical}
.cour .chk{display:flex;gap:10px;align-items:center;margin-top:12px;cursor:pointer;font-weight:700}
.cour .chk input{width:20px;height:20px;accent-color:#02b8ba}
@media(max-width:600px){.cour .cgrid{grid-template-columns:1fr}}
.avpick>div{display:flex;flex-direction:column;align-items:flex-start}
.avpick .upl{display:inline-block}

/* ===== V16: treatment-plan page two-column (courier right, digital files left) ===== */
.ordermain{max-width:1180px}
.ogrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:start;margin:18px auto 0;max-width:1100px;text-align:right}
.ogrid .obox{max-width:none;margin:0 0 18px}
.ogrid .ocol{display:flex;flex-direction:column}
.ogrid .ocol .obox:last-child{margin-bottom:0}
.ogrid>.cour{position:sticky;top:20px}
.cour .obtns{margin-top:16px}
.cour .obtns .hl{width:100%;padding:10px 20px;font-size:1rem}
.cour input.bad,.cour textarea.bad{border-color:#d33;box-shadow:0 0 0 3px #d3333322}
.cour .obtns .hl:disabled{opacity:.6;cursor:wait}
@media(max-width:860px){.ogrid{grid-template-columns:1fr;gap:0}.ogrid>.cour{position:static}.ogrid .obox{margin-bottom:16px}}
/* footer contact highlight after clicking the Contact icon */
#fcontact{position:relative;border-radius:18px}
#fcontact.ftr-hl{animation:ftrhl 2.8s ease-out both}
#fcontact.ftr-hl::before{content:"";position:absolute;inset:-14px -16px;border-radius:22px;border:2px solid #02D6D7;background:#02D6D712;pointer-events:none;animation:ftrhl2 2.8s ease-out both}
@keyframes ftrhl2{0%{opacity:0;transform:scale(.94)}12%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0}}
@keyframes ftrhl{0%,100%{box-shadow:none}15%,60%{box-shadow:0 0 0 6px #02D6D733,0 14px 40px #02D6D744}}
#fcontact.ftr-hl h4{color:#02B8BA}
@media(prefers-reduced-motion:reduce){#fcontact.ftr-hl,#fcontact.ftr-hl::before{animation-duration:.01s}}

/* ===== V17 · order: plan + file send in ONE box, courier box on the right ===== */
.ordermain{max-width:1240px}
.ogrid{grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:22px}
.ogrid>.omain{padding:16px 22px 22px;margin:0}
.omain .swrap{padding:4px 0}
.omain .stage{margin:6px auto 4px;box-shadow:0 10px 34px #00d3d633}
.omain .osec{margin-top:18px;padding-top:18px;border-top:1px solid #00d3d62e}
.omain .osec:first-of-type{margin-top:14px}
.omain .osec h2{font-size:1.2rem}
.cour .cgrid{grid-template-columns:1fr}
.ogrid>.cour{top:90px}
@media(max-width:860px){.ogrid{grid-template-columns:1fr}.ogrid>.omain{padding:12px 12px 18px;margin:0}}
html[data-theme="dark"] .omain .osec{border-top-color:#00d3d640}

/* ===== V17 · timeline tip + dentists drift ===== */
.tlx-beam{background:#02D6D7;box-shadow:0 0 10px #02d6d7aa}
.tlx-beam::after{content:"";position:absolute;left:50%;bottom:-3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#02D6D7;box-shadow:0 0 0 4px #02d6d73a,0 0 14px #02D6D7}
.dn-wrap{overflow:hidden}
.dn{display:block;overflow:hidden;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.dn-track{display:flex;gap:12px;width:max-content;animation:dnDrift 120s linear infinite;will-change:transform}
.dn:hover .dn-track,.dn:focus-within .dn-track{animation-play-state:paused}
@keyframes dnDrift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.dn-c{width:clamp(96px,10.5vw,128px);aspect-ratio:3/4;border-radius:14px;scroll-snap-align:none;filter:grayscale(1);transition:filter .45s,transform .45s,box-shadow .45s}
.dn-c:hover{filter:none;transform:translateY(-4px)}
.dn-c img{filter:none}
.dn-in{inset-inline:5px;bottom:5px;padding:5px 7px;border-radius:10px}
.dn-in b{font-size:.74rem;line-height:1.5}
.dn-in small{font-size:.62rem;line-height:1.45}
@media(max-width:800px){.dn-c{width:27vw;max-width:120px}.dn-in b{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.dn{overflow-x:auto}.dn-track{animation:none}}
.dn{container-type:inline-size}
.dn-c{width:calc((100cqw - 72px)/7);max-width:none}
@media(max-width:800px){.dn-c{width:calc((100cqw - 24px)/3.6);max-width:none}}
.dn-track{gap:8px}
.dn-c{width:calc((100cqw - 48px)/7)}
.dn-c .dn-in{inset-inline:3px;bottom:3px;padding:3px 4px;border-radius:8px}
.dn-in b{font-size:.6rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.dn-in small{display:none}
.dn-c{border-radius:11px}
@media(max-width:800px){.dn-c{width:calc((100cqw - 16px)/3.6)}.dn-in b{font-size:.68rem}.dn-in small{display:block;font-size:.58rem}}

/* ===== V18 mobile hero: pinned while the steps play, then scrolls away and is removed (script.js) ===== */
@media(max-width:800px){
 html.mhero body.home .vside{position:relative!important;top:auto!important;height:var(--mh-run,260vh)!important;width:100%;z-index:3!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;padding:0}
 html.mhero body.home .vstick{position:sticky!important;top:0;height:var(--mh-h,100vh)!important;padding:0!important;display:block}
 html.mhero body.home .vframe{position:relative!important;top:auto;left:auto;right:auto;width:100%;height:100%!important;border-radius:0 0 26px 26px!important;box-shadow:0 12px 30px #00d3d633!important;background:#ebf4f4!important;overflow:hidden;contain:paint}
 html.mhero,html.mhero body{overflow-anchor:none}
 html.mhero #vcan{display:block;width:100%;height:100%}
 html.mhero body.home .vlinks{bottom:calc(96px + env(safe-area-inset-bottom))!important}
 html.mhero body.home .shint{bottom:150px!important}
 html.mhero body.home .col{padding-top:0!important;margin-top:0}
 html.mhero.mh-off body.home .vside{display:none!important}
 html.mhero #fcontact{scroll-margin-top:18px}
 html.mhero[data-theme="dark"] #vcan{filter:brightness(.72) contrast(1.05) saturate(.95)}
 html.mhero[data-theme="dark"] body.home .vframe{background:#0c1d1e!important}
}
/* V18: before/after are real <img> (indexable, with alt) */
.cmp img.img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:linear-gradient(135deg,#a8f1f3,#00b5b8)}

/* ===== v18: article typography (post.php) ===== */
.post{--a1:#04898b;--a2:#00b5b8;--abg:#f2fbfb}
html[data-theme="dark"] .post{--a1:#5ee8ea;--a2:#00d3d6;--abg:#123234}
.pbody{font-size:1.04rem;line-height:2.05;padding:18px 34px 30px}
.pbody>p:first-child{font-size:1.14rem;line-height:2;color:var(--a1);font-weight:500;margin-top:14px}
.pbody h2{position:relative;font-size:1.32rem;color:var(--a1);margin:38px 0 12px;padding-inline-start:16px;line-height:1.7}
.pbody h2::before{content:"";position:absolute;inset-inline-start:0;top:.3em;bottom:.3em;width:5px;border-radius:4px;background:linear-gradient(var(--t),var(--a1))}
.pbody h3{font-size:1.1rem;color:var(--a2);margin:26px 0 8px}
.pbody strong{font-weight:700;background:linear-gradient(transparent 62%,#00d3d633 62%);padding:0 2px}
.pbody a{color:var(--a1);font-weight:600;text-decoration:underline;text-decoration-color:#00d3d688;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.pbody a:hover{color:var(--t);text-decoration-color:var(--t)}
.pbody a[target=_blank]::after{content:" ↗";font-size:.8em}
.pbody ul,.pbody ol{padding-inline-start:0;margin:14px 0;list-style:none}
.pbody ul li{position:relative;padding-inline-start:26px;margin:8px 0}
.pbody ul li::before{content:"";position:absolute;inset-inline-start:6px;top:.85em;width:8px;height:8px;border-radius:50%;background:var(--t);box-shadow:0 0 0 4px #00d3d626}
.pbody ol{counter-reset:st}
.pbody ol li{position:relative;counter-increment:st;padding:12px 56px 12px 14px;margin:10px 0;background:var(--abg);border-radius:16px;border:1px solid #00d3d62e}
html[dir=ltr] .pbody ol li{padding:12px 14px 12px 56px}
.pbody ol li::before{content:counter(st);position:absolute;inset-inline-start:12px;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--t),var(--a1));color:#fff;font-weight:800;font-size:.95rem}
.pbody blockquote{margin:22px 0;padding:14px 22px;border-inline-start:4px solid var(--t);background:var(--abg);border-radius:14px;font-size:1.08rem;color:var(--a1)}
.pbody blockquote p{margin:4px 0}
.pbody .callout{position:relative;margin:24px 0;padding:16px 20px 14px;border-radius:18px;border:1px solid;background:var(--cb);border-color:var(--cl)}
.pbody .callout p{margin:4px 0}
.pbody .co-t{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:800;color:var(--cc);margin-bottom:4px}
.pbody .co-t::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--cc);-webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat}
.pbody .callout.tip{--cb:#e9fbfb;--cl:#9eeced;--cc:#04898b;--ci:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 21h6v-1H9zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/></svg>")}
.pbody .callout.warn{--cb:#fff6e8;--cl:#f3d29a;--cc:#b06a00;--ci:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/></svg>")}
.pbody .callout.note{--cb:#eef4ff;--cl:#bcd0f7;--cc:#2f5bb7;--ci:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/></svg>")}
.pbody .callout.sum{--cb:linear-gradient(135deg,#e6fbfb,#f5fffd);--cl:#00d3d6;--cc:#04898b;--ci:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");background:var(--cb)}
html[data-theme="dark"] .pbody .callout.tip{--cb:#10393b;--cl:#1f6466;--cc:#7cf0f2}
html[data-theme="dark"] .pbody .callout.warn{--cb:#3a2c12;--cl:#6b5020;--cc:#ffc266}
html[data-theme="dark"] .pbody .callout.note{--cb:#18263f;--cl:#2f4a78;--cc:#9cbcff}
html[data-theme="dark"] .pbody .callout.sum{--cb:linear-gradient(135deg,#0f3537,#122b2d);--cl:#1f6466;--cc:#7cf0f2}
.pbody figure{margin:26px 0;text-align:center}
.pbody figure img,.pbody>p img{max-width:100%;border-radius:20px;box-shadow:0 14px 34px -14px #04898b55}
.pbody figcaption{font-size:.85rem;opacity:.7;margin-top:8px}
.pbody hr{border:0;height:2px;margin:30px auto;width:40%;background:linear-gradient(90deg,transparent,var(--t),transparent)}
@media(max-width:800px){.pbody{padding:12px 18px 22px;font-size:1rem}.pbody h2{font-size:1.18rem}}
.pbody p{margin:0 0 14px}
.pbody .callout.sum ul{margin:6px 0 2px}
.pbody .callout.sum li{padding-inline-start:30px}
.pbody .callout.sum li::before{content:"✓";background:none;box-shadow:none;width:auto;height:auto;top:0;inset-inline-start:4px;color:var(--cc);font-weight:800}