/* razwanlatif.com redesign (Oct 2026). Look: "Clear Signal" (light editorial, cobalt + green). Layout: one 1200px column, hero split text/reel, cards in auto-fill grids. */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --ink:#101828; --muted:#526072; --line:#D8E0EB; --soft:#EDF1F7;
  --accent:#1F5FE0; --accent-ink:#FFFFFF; --green:#0B7F64; --hl:#246BFD; --star:#F5A524;
  --f-head:"Manrope",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --r:14px; --r-sm:10px; --wrap:1200px;
  --shadow:0 18px 40px -28px rgb(16 24 40 / .45);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0B1220;--surface:#121A2B;--ink:#EAF0FA;--muted:#9DAABE;--line:#24314A;--soft:#172238;--accent:#5B8CFF;--accent-ink:#0B1220;--green:#2CCB9E;--shadow:0 18px 40px -28px rgb(0 0 0 / .8);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1220;--surface:#121A2B;--ink:#EAF0FA;--muted:#9DAABE;--line:#24314A;--soft:#172238;--accent:#5B8CFF;--accent-ink:#0B1220;--green:#2CCB9E;--shadow:0 18px 40px -28px rgb(0 0 0 / .8);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{display:inline-block;font:600 12.5px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--f-head);text-decoration:none;border-radius:999px;padding:15px 24px;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s}
.btn-p{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px -14px var(--accent)}
.btn-p:hover{transform:translateY(-2px)}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-g:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{padding:11px 18px;font-size:14.5px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo .mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:800 14px/1 var(--f-head);letter-spacing:.02em}
.logo b{display:block;font:800 17px/1.1 var(--f-head);letter-spacing:-.01em}
.logo small{display:block;font:500 11px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.links{display:flex;gap:26px;margin-left:auto;font:500 15px/1 var(--f-body)}
.links a{text-decoration:none;color:var(--muted);padding:8px 0;border-bottom:2px solid transparent}
.links a:hover,.links a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.nav-r{display:flex;align-items:center;gap:12px}
.theme{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.theme .moon{display:none;fill:currentColor;stroke:none}
:root[data-theme="dark"] .theme .sun,:root[data-theme="dark"] .theme .rays{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme .sun,:root:not([data-theme="light"]) .theme .rays{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}}

/* hero */
.hero{padding-block:72px 40px}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero-l{display:grid;gap:22px;min-width:0}
.hello{font:600 15px/1.3 var(--f-body);color:var(--green)}
.avail{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:500 14px/1.2 var(--f-body);color:var(--muted);padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.avail .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.star{width:1em;height:1em;fill:var(--star);flex:none;vertical-align:-.12em}
h1{font-size:clamp(38px,5.4vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.035em}
h1 .l1{display:block}
h1 .l2{display:inline-block;color:var(--accent);position:relative;padding-bottom:10px}
h1 .l2::after{content:"";position:absolute;left:0;bottom:0;width:min(220px,60%);height:6px;border-radius:3px;background:var(--accent);transform-origin:left}
.sub{font-size:19px;line-height:1.55;color:var(--muted);max-width:56ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.reel{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--soft);cursor:pointer;box-shadow:var(--shadow);aspect-ratio:16/9}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.reel:hover img{transform:scale(1.03)}
.reel-tag{position:absolute;left:14px;bottom:14px;background:rgb(255 255 255 / .92);color:#101828;font:600 13px/1 var(--f-body);padding:8px 12px;border-radius:999px}
.play{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:rgb(255 255 255 / .95);display:grid;place-items:center;box-shadow:0 10px 30px -10px rgb(0 0 0 / .5);transition:transform .25s}
.play svg{width:22px;height:22px;fill:#101828;margin-left:3px}
.play.big{width:76px;height:76px}.play.big svg{width:30px;height:30px}
.reel:hover .play,.thumb:hover .play{transform:translate(-50%,-50%) scale(1.08)}
/* hero backdrop: two drifting colour glows + a faint timeline grid */
.hero{position:relative;isolation:isolate;padding-bottom:0}
.hero-bg{position:absolute;inset:0 0 70px;z-index:-1;overflow:hidden;background:linear-gradient(180deg,var(--soft),var(--bg))}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hero-bg .b1{width:520px;height:520px;right:4%;top:-120px;background:color-mix(in srgb,var(--accent) 45%,transparent);animation:drift1 18s ease-in-out infinite alternate}
.hero-bg .b2{width:420px;height:420px;left:-80px;bottom:-60px;background:color-mix(in srgb,var(--green) 35%,transparent);animation:drift2 22s ease-in-out infinite alternate}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(to right,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 30%,#000 30%,transparent 75%)}
.hero-bg .b3{width:360px;height:360px;left:38%;top:30%;background:color-mix(in srgb,#8B5CF6 22%,transparent);opacity:.4;animation:drift2 26s ease-in-out infinite alternate-reverse}
/* with JS the glows wander to random spots instead of the fixed drift */
.hero-bg.wander .blob{animation:none;transition:transform 11s cubic-bezier(.45,.05,.55,.95)}
/* playhead: a faint line sweeping across the grid like a timeline */
.hero-bg .head{position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent) 30%,color-mix(in srgb,var(--accent) 55%,transparent) 70%,transparent);opacity:.35;animation:sweep 16s linear infinite;box-shadow:0 0 24px 4px color-mix(in srgb,var(--accent) 25%,transparent)}
@keyframes drift1{to{transform:translate(-120px,80px) scale(1.15)}}
@keyframes drift2{to{transform:translate(140px,-40px) scale(.9)}}
@keyframes sweep{from{transform:translateX(-10vw)}to{transform:translateX(110vw)}}
.reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.reel-vid.on{opacity:1}
.play.big::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgb(255 255 255 / .8);animation:ring 2.4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ring{from{transform:scale(.9);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* proof: a raised card straddling the hero edge, big counting numbers */
.proof{list-style:none;margin:56px 0 0;padding:30px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px -36px rgb(16 24 40 / .45),0 2px 0 0 color-mix(in srgb,var(--accent) 60%,transparent) inset}
.proof li{display:grid;gap:4px;align-content:start;padding-left:24px;border-left:1px solid var(--line)}
.proof li:first-child{border-left:0;padding-left:0}
.proof .num{font:800 clamp(40px,4.6vw,56px)/1 var(--f-head);letter-spacing:-.04em;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--green)));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;margin-bottom:6px}
.proof strong{font:700 17px/1.25 var(--f-head);color:var(--ink)}
.proof .stars-row{display:flex;gap:2px;font-size:17px;padding:2px 0}
.proof span{font-size:14.5px;color:var(--muted)}
.proof span b{color:var(--ink)}

/* industries marquee */
.marquee{overflow:hidden;padding:30px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-in{display:flex;width:max-content;animation:slide 76s linear infinite}
.marquee-in span{font:700 15px/1 var(--f-head);color:var(--muted);white-space:nowrap;padding:0 26px;position:relative}
.marquee-in span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:72px}
.sec.alt{background:var(--surface);border-block:1px solid var(--line)}
.sec.tint{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--bg)),color-mix(in srgb,var(--green) 6%,var(--bg)));border-block:1px solid var(--line)}
/* always-dark band (testimonials) */
.band-dark{--ink:#EAF0FA;--muted:#9DAABE;--line:#24314A;--surface:#121A2B;--soft:#172238;--accent:#6E9BFF;--accent-ink:#0B1220;color:var(--ink);background:radial-gradient(900px 400px at 85% 0%,rgb(91 140 255 / .22),transparent 70%),radial-gradient(700px 360px at 0% 100%,rgb(44 203 158 / .14),transparent 70%),#0B1220}
.band-dark .rating b{color:#fff}
.band-dark .mid-cta{background:linear-gradient(90deg,#1A2540,#13213B);border:1px solid #2A3A5C}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 40px;margin-bottom:32px}
.sec-h h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;font-weight:800}
.sec-h p{color:var(--muted);max-width:52ch}

.icps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.icp{position:relative;display:grid;gap:10px;align-content:start;padding:26px 24px 56px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s}
.icp b{font:700 20px/1.3 var(--f-head);letter-spacing:-.01em}
.icp .arrow{position:absolute;left:24px;bottom:20px;font-size:22px;color:var(--accent);transition:transform .25s}
.icp:hover{transform:translateY(-4px);border-color:var(--accent)}
.icp:hover .arrow{transform:translateX(6px)}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.work-card{display:grid;gap:14px;align-content:start;min-width:0}
.thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--soft);cursor:pointer;aspect-ratio:16/9;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.work-card:hover .thumb{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgb(16 24 40 / .6)}
.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.thumb video.on{opacity:1}
.work-card .client{transition:letter-spacing .35s,color .35s}
.work-card:hover .client{letter-spacing:.1em}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.work-card.tall .thumb img{object-position:50% 30%}
.thumb:hover img{transform:scale(1.04)}
.thumb .play{opacity:0}
.thumb:hover .play,.thumb:focus-visible .play{opacity:1}
.dur{position:absolute;right:10px;bottom:10px;background:rgb(16 24 40 / .78);color:#fff;font:600 12px/1 var(--f-body);padding:6px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.wc-body{display:grid;gap:5px}
.client{font:600 12.5px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.wc-body h3{font-size:19px;line-height:1.25;font-weight:700}
.wc-body p{font-size:15px;color:var(--muted)}

.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;position:relative;--p:0}
.process::before{content:"";position:absolute;left:39px;right:39px;top:39px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--green));transform-origin:left;transform:scaleX(var(--p));z-index:0}
.process li{display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);position:relative}
.process .step{position:relative;z-index:1;box-shadow:0 0 0 6px var(--surface)}
.step{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 15px/1 var(--f-head)}
.process h3{font-size:18px;font-weight:700}
.process p{font-size:15px;color:var(--muted)}

.offer{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.offer li{padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:8px}
.offer h3{font-size:19px;font-weight:700}
.offer p{color:var(--muted);font-size:15.5px}

.rating{display:flex;align-items:center;gap:8px;font-size:15px}
.rating b{color:var(--ink)}
.featured{position:relative;margin:0 0 18px;padding:40px 44px 34px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));display:grid;gap:22px;overflow:hidden}
.featured .qmark{position:absolute;right:28px;top:-34px;font:800 220px/1 var(--f-head);color:var(--accent);opacity:.18;pointer-events:none}
.featured blockquote{margin:0;max-width:60ch}
.featured blockquote p{font:600 clamp(21px,2.3vw,28px)/1.4 var(--f-head);letter-spacing:-.01em}
.featured figcaption{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}
.featured figcaption>span:last-child{display:grid;gap:2px}
.featured figcaption b{color:var(--ink);font-size:16.5px}
.featured .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;padding:2px;background:linear-gradient(135deg,var(--accent),var(--green))}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{margin:0;padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:14px;align-content:start}
.quote .stars{display:flex;gap:2px;font-size:16px}
.quote blockquote{margin:0;font-size:16.5px;line-height:1.55}
.quote figcaption{display:grid;gap:2px;font-size:14px;color:var(--muted)}
.quote figcaption b{color:var(--ink);font-weight:600}
.mid-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;padding:20px 24px;border-radius:var(--r);background:var(--soft)}
.mid-cta p{font:700 19px/1.3 var(--f-head);margin-right:auto}
.faq-in{max-width:860px}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font:700 17px/1.35 var(--f-head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:18px;color:var(--muted)}
.faq summary::after{transition:transform .3s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .ans{overflow:hidden}
.price{font-size:16px;padding:10px 16px;border-radius:12px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(90deg,var(--accent),var(--green)) border-box}
.price b{color:var(--ink)}
/* headings rise word by word */
.js .split .w{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 55ms)}
.js .split.in .w{opacity:1;transform:none}

.about{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.about img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);aspect-ratio:400/496;object-fit:cover}
.about>div{display:grid;gap:14px;max-width:62ch}
.about h2{font-size:clamp(28px,3.4vw,40px);font-weight:800}
.about p{color:var(--muted)}

/* start */
.start{padding-block:80px;background:var(--surface);border-top:1px solid var(--line)}
.start-in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.start-l{display:grid;gap:18px;justify-items:start}
.start-l h2{font-size:clamp(30px,3.8vw,46px);line-height:1.06;font-weight:800}
.start-l p{color:var(--muted);max-width:46ch}
.mail{font-size:15px}
.brief{display:grid;gap:14px;padding:26px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brief label{display:grid;gap:6px;font:600 14px/1.2 var(--f-body)}
.brief input,.brief textarea,.brief select{width:100%;font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px}
.brief textarea{resize:vertical;min-height:110px}
.brief input:focus,.brief textarea:focus,.brief select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.brief .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Tally renders dark text only, so the form card stays light in both themes */
.brief.tally{display:block;background:#FFFFFF;padding:22px 24px 8px;border-color:#D8E0EB}
.brief.tally iframe{display:block;width:100%;border:0;min-height:520px}
.brief.tally a{color:#246BFD}
.form-note{font-size:15px;color:var(--green);min-height:1.4em}
.form-note.err{color:#D9364F}

/* footer */
.foot{padding-block:48px 28px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot-in p{margin-top:14px;color:var(--muted);font-size:15px;max-width:44ch}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.foot ul a{text-decoration:none;color:var(--muted)}
.foot ul a:hover{color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* player */
.player{padding:0;border:0;background:transparent;width:min(1100px,94vw);max-width:none;color:#F4F6FA}
.player::backdrop{background:rgb(6 9 16 / .86)}
.player-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font:600 15px/1.2 var(--f-body)}
.player-x{font:600 14px/1 var(--f-body);background:#F4F6FA;color:#101828;border:0;border-radius:8px;padding:9px 14px;cursor:pointer}
.player-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* motion: one orchestrated hero entrance, gentle card reveals */
.js .hero-l>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.js .hero-l>*:nth-child(2){animation-delay:.06s}.js .hero-l>*:nth-child(3){animation-delay:.12s}.js .hero-l>*:nth-child(4){animation-delay:.2s}.js .hero-l>*:nth-child(5){animation-delay:.26s}
.js h1 .l2::after{animation:draw .9s .45s cubic-bezier(.7,0,.2,1) both}
.js .hero-r{animation:rise .8s .15s cubic-bezier(.2,.8,.2,1) both}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal,.js .split .w{opacity:1;transform:none}.process{--p:1!important}}

/* responsive */
@media (max-width:1000px){
  .nav-in{flex-wrap:wrap;row-gap:0}
  .nav-r{margin-left:auto}
  .links{order:3;width:100%;margin:0;gap:22px;overflow-x:auto;scrollbar-width:none;font-size:14.5px;padding-bottom:4px}
  .links::-webkit-scrollbar{display:none}
  .links a{white-space:nowrap}
  .proof{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .proof li:nth-child(3){border-left:0;padding-left:0}
  .process::before{display:none}
  .quotes{grid-template-columns:1fr}
  .hero-in,.start-in{grid-template-columns:1fr;gap:36px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .icps{grid-template-columns:1fr}
  .about{grid-template-columns:200px 1fr;gap:28px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-block:40px 28px}
  .nav-in{min-height:64px;gap:12px}
  .logo small{display:none}
  .sec{padding-block:56px}
  .work-grid,.process,.offer,.f2{grid-template-columns:1fr}
  .proof{grid-template-columns:repeat(2,1fr);gap:22px 16px;padding:22px 20px}
  .proof li{border-left:0;padding-left:0}
  .proof strong{font-size:15.5px}
  .featured{padding:28px 22px 24px}
  .featured .qmark{font-size:150px;top:-20px;right:12px}
  .hero-bg .b1{width:320px;height:320px}
  .about{grid-template-columns:1fr}
  .about img{max-width:240px}
  .sub{font-size:17.5px}
  .btn{width:100%}.ctas{display:grid}.nav .btn{width:auto}
  .brief .btn{justify-self:stretch}
}

/* rating badges (2026-10-27) */
.rating-badges{display:flex;gap:12px;flex-wrap:wrap}
.rbadge{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.rb-score{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rb-body{display:flex;flex-direction:column;gap:4px;line-height:1.2}
.rb-stars{display:flex;gap:2px;font-size:14px}
.rb-top{font-size:14px;font-weight:600;color:var(--ink)}
.rb-sub{font-size:13px;color:var(--muted)}
@media (max-width:640px){.rating-badges{width:100%}.rbadge{flex:1 1 150px}}

.rb-word{font-size:24px}
.rb-sub .star{font-size:12px;vertical-align:-.1em}
.rb-medal{width:34px;height:34px;fill:var(--star);color:#0B1220;flex:none}
/* hero proof strip: moving brand gradient (2026-10-27; angle 41, 4.5 s, right to left, accent 95%, smooth, glow 24%) */
.proof{--ink:#FFFFFF;--muted:rgb(255 255 255 / .84);--line:rgb(255 255 255 / .26);position:relative;overflow:hidden;isolation:isolate;background:#1F5FE0;border:0;box-shadow:0 26px 54px -30px rgb(31 95 224 / .75)}
.proof::before{content:"";position:absolute;left:50%;top:50%;width:300%;height:900%;z-index:-2;transform:translate(-50%,-50%) rotate(41deg);background-image:linear-gradient(90deg,rgb(31 95 224) 0.00%,rgb(31 96 223) 4.17%,rgb(30 100 219) 8.33%,rgb(29 105 213) 12.50%,rgb(27 113 205) 16.67%,rgb(25 121 195) 20.83%,rgb(23 130 186) 25.00%,rgb(21 139 176) 29.17%,rgb(20 148 166) 33.33%,rgb(18 155 158) 37.50%,rgb(17 161 152) 41.67%,rgb(16 164 148) 45.83%,rgb(16 165 147) 50.00%,rgb(16 164 148) 54.17%,rgb(17 161 152) 58.33%,rgb(18 155 158) 62.50%,rgb(20 148 166) 66.67%,rgb(21 139 176) 70.83%,rgb(23 130 186) 75.00%,rgb(25 121 195) 79.17%,rgb(27 113 205) 83.33%,rgb(29 105 213) 87.50%,rgb(30 100 219) 91.67%,rgb(31 96 223) 95.83%,rgb(31 95 224) 100.00%);background-size:33.3333% 100%;background-repeat:repeat;animation:proofflow 4.5s linear infinite reverse}
.proof::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 180px at 85% 0%,rgb(255 255 255 / .24),transparent 70%)}
.proof .num{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFFFFF}
.proof span b{color:#FFFFFF}
@keyframes proofflow{from{background-position:0% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.proof::before{animation:none}}