/* Home page: the Catchd showcase (7 Nov 2026). Squared What the AI buttons, fern pattern, a real-looking notification. */
.sm-home{position:relative;overflow:hidden;background:#12172e;color:#e9edf8;padding:clamp(64px,8vw,110px) 0;background-image:radial-gradient(60% 60% at 90% 10%,#3b3f8a55,transparent 70%),url(fern/fern-tile.svg);background-size:auto,520px 520px}
.sm-home-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.sm-home .eyebrow{color:#d3fc6c;letter-spacing:.14em}
.sm-home h2{font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.035em;margin:14px 0 18px;color:#f4f5ff}
.sm-home h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:#c7bfff;letter-spacing:-.02em}
.sm-home p.sm-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#cdd4ea;max-width:600px;margin:0}
.sm-home ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px}
.sm-home li{position:relative;padding-left:26px;color:#cdd4ea}
.sm-home li::before{content:'✓';position:absolute;left:0;color:#d3fc6c;font-weight:800}
.sm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sm-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;border-radius:5px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent}
.sm-btn-hot{background:#ef9f84;color:#22192a}.sm-btn-hot:hover{background:#f6b49d}
.sm-btn-ghost{color:#e9edf8;border-color:#bbc5ea70}.sm-btn-ghost:hover{background:#ffffff12}
.sm-phone{position:relative;justify-self:center;width:min(100%,300px);aspect-ratio:9/18.5;border-radius:42px;background:radial-gradient(120% 70% at 30% 0%,#4b4f9a,#1b2045 60%,#0d1024);border:12px solid #05070f;padding:54px 14px 0;transform:rotate(3deg)}
.sm-phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#05070f}
.sm-time{text-align:center;color:#fff;font-weight:300;font-size:58px;letter-spacing:-.03em;line-height:1;margin-bottom:28px}
.sm-note{background:#f2f3f8ee;color:#1d2238;border-radius:16px;padding:12px 13px;font-size:12.5px;line-height:1.35;margin-bottom:8px}
.sm-note b{font-size:12px}.sm-note span{float:right;font-size:11px;color:#6b7590}
.sm-note p{margin:3px 0 2px;font-weight:700;font-size:13px}.sm-note small{display:block;font-size:12px;color:#454d66}
.sm-pill{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:#d3fc6c;color:#1b2b1d;font-weight:800;border-radius:5px;padding:7px 14px;font-variant-numeric:tabular-nums}
.sm-meta{font-size:13px;color:#98a2c4;margin-top:14px}
@media (max-width:820px){.sm-home-grid{grid-template-columns:1fr}.sm-phone{transform:none;width:min(78%,280px)}.sm-ctas .sm-btn{width:100%;justify-content:space-between;box-sizing:border-box}}
/* "Start a project" band at the end of the home page */
.sm-start{background:#d3fc6c;color:#1b2b1d;padding:clamp(56px,7vw,96px) 0}
.sm-start-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.sm-start .eyebrow{color:#2f4a1f}
.sm-start h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;letter-spacing:-.03em;margin:10px 0 12px}
.sm-start h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:#3e4f1f}
.sm-start p{margin:0;max-width:560px;color:#2f3a24}
.sm-start .sm-btn-hot{background:#1b2140;color:#f4f4ff}.sm-start .sm-btn-hot:hover{background:#272f56}

/* Catchd wordmark (7 Nov, Marc liked the lettering on the logo boards): lowercase Manrope ExtraBold, tight. */
.sm-wordmark{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(64px,8vw,120px);line-height:.9;letter-spacing:-.055em;color:#f4f5ff;margin:0 0 18px;text-transform:lowercase}
.sm-wordmark small{display:block;font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#d3fc6c;margin-top:12px;opacity:.95}
.sm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Catchd logo D (Marc, 7 Nov): the reply-loop S beside the lettering */
.sm-wordmark{display:flex;align-items:flex-start;gap:.14em}
.sm-wordmark .sm-mark{height:.9em;width:auto;flex:none;margin-top:.02em}
.sm-wordmark>span{display:block}

/* Catchd orbit (7 Nov): like the Okayd orbit. Logo in the middle, real Catchd moments circling,
   lime dots fly in (enquiries) and lavender dots fly out (replies). Still for reduced motion. */
.sm-orbit{position:relative;display:block;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center;border-radius:22px;overflow:hidden;
 background:radial-gradient(60% 60% at 50% 50%,#2a3166,#161b36 70%);border:1px solid #c3c9ec2a;text-decoration:none;color:#e9edf8;isolation:isolate}
.sm-orbit-cap{position:absolute;left:22px;top:20px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#a9b3d3}
.sm-orbit-bottom{position:absolute;right:22px;bottom:18px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#d3fc6c}
.sm-orbit-bottom i{font-style:normal;display:inline-block;transition:transform .25s}
.sm-orbit:hover .sm-orbit-bottom i{transform:translate(3px,-3px)}
.sm-rings{position:absolute;inset:0;display:block}
.sm-rings::before,.sm-rings::after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sm-rings::before{width:72%;height:72%;border:1.5px dashed #c7bfff40}
.sm-rings::after{width:44%;height:44%;border:1px solid #c7bfff2a}
.sm-orbit-logo{position:absolute;left:50%;top:50%;width:26%;height:auto;transform:translate(-50%,-50%);border-radius:22%;box-shadow:0 0 0 10px #12172e80,0 30px 60px -20px #000c;animation:smBeat 2.4s ease-in-out infinite;z-index:3}
@keyframes smBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}12%{transform:translate(-50%,-50%) scale(1.06)}24%{transform:translate(-50%,-50%) scale(1)}}
.sm-spin{position:absolute;inset:0;display:block;animation:smSpin 60s linear infinite;z-index:2}
.sm-chip-at{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(min(36%,200px))}
.sm-orbit .sm-chip-at{transform:rotate(var(--a)) translateX(calc(var(--r,1) * 36cqw))}
.sm-orbit{container-type:inline-size}
.sm-chip{position:absolute;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));white-space:nowrap}
.sm-chip>*{display:none}
.sm-chip{font-size:clamp(10px,2.5cqw,13px);font-weight:800;padding:6px 10px;border-radius:5px;background:#f2f3f8;color:#1d2238;box-shadow:0 10px 24px -12px #000c;animation:smUpright 60s linear infinite}
.sm-chip-lime{background:#d3fc6c;color:#1b2b1d}.sm-chip-out{background:#c8c6ff;color:#252943}
@keyframes smSpin{to{transform:rotate(360deg)}}
@keyframes smUpright{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg))}}
.sm-flow{position:absolute;inset:0;display:block;z-index:1}
.sm-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0;animation:smIn 5.4s cubic-bezier(.5,0,.6,1) infinite;animation-delay:var(--d)}
.sm-dot-in{background:#d3fc6c;box-shadow:0 0 12px #d3fc6c}
.sm-dot-out{background:#c7bfff;box-shadow:0 0 12px #c7bfff;animation-name:smOut}
@keyframes smIn{0%{opacity:0;transform:rotate(var(--a)) translateX(48cqw)}10%{opacity:1}55%{opacity:1;transform:rotate(var(--a)) translateX(12cqw)}62%,100%{opacity:0;transform:rotate(var(--a)) translateX(10cqw)}}
@keyframes smOut{0%{opacity:0;transform:rotate(var(--a)) translateX(12cqw)}8%{opacity:1}52%{opacity:1}62%,100%{opacity:0;transform:rotate(var(--a)) translateX(48cqw)}}
@media (prefers-reduced-motion:reduce){.sm-spin,.sm-chip,.sm-orbit-logo,.sm-dot{animation:none}.sm-dot{display:none}}
@media (max-width:820px){.sm-orbit{max-width:420px;margin-top:10px}}
/* keep the circling labels clear of the corner captions */
.sm-orbit-cap,.sm-orbit-bottom{z-index:4}
.sm-orbit .sm-chip-at{transform:rotate(var(--a)) translateX(32cqw)}
.sm-rings::before{width:64%;height:64%}
.sm-rings::after{width:40%;height:40%}
@media (max-width:820px){.sm-orbit .sm-chip-at{transform:rotate(var(--a)) translateX(30cqw)}.sm-rings::before{width:60%;height:60%}.sm-chip{font-size:3cqw;padding:5px 8px}}