/* ===== Service Hub+ — extras: services cards, service pages, portfolio ===== */
:root{--ac:#2DE2C5;--ac2:#00E5FF;--panel2:#131d2a}
.eyebrow-s{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);margin-bottom:14px;font-weight:500}
.ac-text{background:linear-gradient(100deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#ffffff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn-wa{background:#25D366;color:#04210f;box-shadow:0 0 28px rgba(37,211,102,.28)}
.btn-wa:hover{transform:translateY(-2px)}
.btn svg{width:17px;height:17px;fill:currentColor}

/* ---------- Services page cards (links) ---------- */
.svc-grid.five{grid-template-columns:repeat(6,1fr)}
.svc-grid.five .svc{grid-column:span 2}
.svc-grid.five .svc:nth-child(4),.svc-grid.five .svc:nth-child(5){grid-column:span 3}
a.svc{display:flex;flex-direction:column;color:inherit;position:relative;overflow:hidden}
a.svc::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--c,#2DE2C5),transparent 70%);opacity:.0;transition:opacity .35s}
a.svc:hover::after{opacity:.16}
a.svc .num{font-family:'Fraunces',serif;font-size:14px;color:var(--c,var(--teal));letter-spacing:.14em;margin-bottom:14px}
a.svc h3{font-size:23px}
a.svc p{flex:0 0 auto}
a.svc ul{margin-bottom:22px}
a.svc .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--c,var(--teal))}
a.svc .more i{font-style:normal;transition:transform .25s}
a.svc:hover .more i{transform:translateX(6px)}

/* ---------- Service page ---------- */
.sp-hero{position:relative;padding:150px 0 70px;overflow:hidden}
.sp-hero::before{content:"";position:absolute;left:-10%;top:-20%;width:60%;height:120%;background:radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 62%);pointer-events:none}
.sp-hero::after{content:"";position:absolute;right:-12%;bottom:-30%;width:50%;height:100%;background:radial-gradient(ellipse at 60% 60%,color-mix(in srgb,var(--ac2) 14%,transparent),transparent 62%);pointer-events:none}
.sp-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ac)}
.sp-hero h1{font-size:clamp(38px,5.6vw,70px);line-height:1.02}
.sp-hero .lead{color:var(--muted);font-size:18px;max-width:560px;margin:24px 0 32px}
.sp-hero .hero-cta{justify-content:flex-start}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.sp-tags span{font-size:12.5px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:#C7D0D9;background:rgba(255,255,255,.02)}

.sp-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.sp-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.sp-strip .cell{padding:26px 10px;border-right:1px solid var(--line)}
.sp-strip .cell:last-child{border:none}
.sp-strip b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:34px;color:var(--ac);line-height:1}
.sp-strip .cell>span{font-size:13px;color:var(--muted);letter-spacing:.04em}

.what{padding:90px 0 40px}
.what .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.what h2{font-size:clamp(30px,4vw,46px);position:sticky;top:110px}
.what .body p{font-size:18px;color:#C9D2DB;margin-bottom:20px;line-height:1.7}
.what .body p:first-child{font-family:'Fraunces',serif;font-size:clamp(22px,2.6vw,29px);color:var(--text);line-height:1.38}
.what .body em{font-style:normal;color:var(--ac)}
.callout{margin-top:26px;border-left:3px solid var(--ac);background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 9%,transparent),transparent);padding:18px 22px;border-radius:0 14px 14px 0;color:#DDE5EC;font-size:16px}

.mod{padding:70px 0}
.mod .sec-head{margin-bottom:38px}
.mod .sec-head h2{font-size:clamp(28px,3.8vw,42px)}

/* tabs */
.tabs{display:grid;grid-template-columns:300px 1fr;gap:26px}
.tab-list{display:flex;flex-direction:column;gap:10px}
.tab-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;color:#C7D0D9;transition:.25s}
.tab-btn .i{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:'Fraunces',serif;color:var(--muted);flex:none;transition:.25s}
.tab-btn:hover{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.tab-btn.on{border-color:var(--ac);background:linear-gradient(100deg,color-mix(in srgb,var(--ac) 14%,var(--panel)),var(--panel));color:var(--text);box-shadow:0 0 30px color-mix(in srgb,var(--ac) 16%,transparent)}
.tab-btn.on .i{background:var(--ac);color:#04121A}
.tab-pane{display:none;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:36px;min-height:100%;animation:paneIn .45s ease}
.tab-pane.on{display:block}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-pane h3{font-size:28px;margin-bottom:14px}
.tab-pane p{color:#C0CAD4;font-size:16.5px;max-width:560px}
.tab-pane .pts{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px}
.tab-pane .pts li{padding-left:26px;position:relative;font-size:15px;color:#D4DCE4}
.tab-pane .pts li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg)}

/* steps (horizontal) */
.flow{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0;position:relative;counter-reset:f}
.flow .fs{position:relative;padding:0 18px 0 0}
.flow .fs::before{counter-increment:f;content:counter(f,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid var(--ac);color:var(--ac);font-family:'Fraunces',serif;font-size:15px;position:relative;z-index:2;margin-bottom:20px}
.flow .fs::after{content:"";position:absolute;left:46px;right:0;top:23px;height:1px;background:linear-gradient(90deg,var(--ac),var(--line))}
.flow .fs:last-child::after{display:none}
.flow h4{font-family:'Fraunces',serif;font-weight:500;font-size:20px;margin-bottom:8px}
.flow p{color:var(--muted);font-size:14.5px}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-size:18px;font-weight:500;font-family:'Fraunces',serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-size:26px;color:var(--ac);transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 40px 20px 0;font-size:16px}

/* related */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related a{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;transition:.25s;display:block}
.related a:hover{border-color:var(--c,var(--teal));transform:translateY(-4px)}
.related small{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--c,var(--teal));margin-bottom:8px}
.related b{font-family:'Fraunces',serif;font-weight:500;font-size:18px;line-height:1.2}

/* floating mobile cta */
.m-cta{display:none}

/* ---------- hero visuals ---------- */
.vis{position:relative}
.card-glass{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:22px;padding:22px;backdrop-filter:blur(8px)}
.chain{display:flex;flex-direction:column;gap:10px}
.chain div{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;background:rgba(7,11,18,.7);border:1px solid var(--line);font-size:15px;opacity:0;transform:translateX(24px);animation:slideIn .6s forwards}
.chain div:nth-child(1){animation-delay:.2s}.chain div:nth-child(2){animation-delay:.4s}.chain div:nth-child(3){animation-delay:.6s}.chain div:nth-child(4){animation-delay:.8s}.chain div:nth-child(5){animation-delay:1s}.chain div:nth-child(6){animation-delay:1.2s}
@keyframes slideIn{to{opacity:1;transform:none}}
.chain i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#04121A;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.chain-t{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

.browser{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0b111a;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#101826;border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#2a3547}
.browser .bar i:nth-child(1){background:#ff6058}.browser .bar i:nth-child(2){background:#ffbd2e}.browser .bar i:nth-child(3){background:#28c93f}
.browser .bar span{margin-left:10px;flex:1;background:#0a0f18;border-radius:8px;padding:5px 12px;font-size:11.5px;color:var(--muted)}
.browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.browser.float{transform:perspective(1200px) rotateY(-9deg) rotateX(3deg);transition:transform .5s}
.browser.float:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.mini-site{padding:18px;aspect-ratio:16/10;background:linear-gradient(160deg,#0f1b2a,#08111b);position:relative;overflow:hidden}
.mini-site .ln{height:10px;border-radius:6px;background:rgba(255,255,255,.12);margin-bottom:9px}
.mini-site .ln.h{height:20px;width:70%;background:linear-gradient(90deg,var(--ac),var(--ac2));opacity:.9}
.mini-site .b{display:inline-block;height:26px;width:90px;border-radius:99px;background:var(--ac);margin:10px 8px 0 0}
.mini-site .b.o{background:transparent;border:1px solid var(--line)}
.pulse{position:absolute;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 2s infinite}
.pulse svg{width:24px;fill:#fff}
@keyframes pulse{70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding:6px 4px 0}
.bars i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--ac),color-mix(in srgb,var(--ac) 20%,transparent));height:var(--h);transform-origin:bottom;animation:grow 1s cubic-bezier(.2,.8,.2,1) backwards}
.bars i:nth-child(2){animation-delay:.08s}.bars i:nth-child(3){animation-delay:.16s}.bars i:nth-child(4){animation-delay:.24s}.bars i:nth-child(5){animation-delay:.32s}.bars i:nth-child(6){animation-delay:.4s}.bars i:nth-child(7){animation-delay:.48s}
@keyframes grow{from{transform:scaleY(.05)}}
.vis-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:12px}
.vis-big{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.vis-big b{font-family:'Fraunces',serif;font-size:38px;font-weight:500;line-height:1}
.vis-big span{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#7dffb0;letter-spacing:.1em;text-transform:uppercase}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ee66f;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* chat */
.chatbox{background:#0c1521;border:1px solid var(--line);border-radius:26px;overflow:hidden;max-width:380px;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#14202f;border-bottom:1px solid var(--line)}
.chat-top .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(120deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:17px}
.chat-top b{font-size:14.5px;display:block;line-height:1.2}
.chat-top small{color:#7dffb0;font-size:11.5px}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:9px;height:340px;overflow-y:auto;scroll-behavior:smooth}
.msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;animation:msgIn .35s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.msg.bot{background:#1a2a3d;border-top-left-radius:4px;align-self:flex-start;color:#E6EDF3}
.msg.me{background:linear-gradient(120deg,var(--ac),var(--ac2));color:#04121A;align-self:flex-end;border-top-right-radius:4px;font-weight:500}
.msg.typing{display:flex;gap:4px;padding:13px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#7e92a8;animation:ty 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{40%{transform:translateY(-4px);opacity:.5}}
.chat-opts{padding:12px 14px 16px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);background:#0e1927}
.chat-opts button{all:unset;cursor:pointer;font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ac) 60%,transparent);color:var(--ac);transition:.2s}
.chat-opts button:hover{background:var(--ac);color:#04121A}
.demo-split{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.demo-split ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.demo-split li{padding:16px 18px;border:1px solid var(--line);background:var(--panel);border-radius:14px;font-size:15px;color:#C9D2DB}
.demo-split li b{color:var(--text);display:block;font-family:'Fraunces',serif;font-weight:500;font-size:18px;margin-bottom:2px}

/* calendar */
.cal-wrap{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px}
.cal-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.cal-top h3{font-size:22px}
.legend{display:flex;gap:8px;flex-wrap:wrap}
.legend button{all:unset;cursor:pointer;font-size:12.5px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:#C7D0D9;display:flex;align-items:center;gap:7px;transition:.2s}
.legend button i{width:9px;height:9px;border-radius:50%;background:var(--k)}
.legend button.on{border-color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--text)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal .dh{font-size:11px;color:var(--muted);text-align:center;letter-spacing:.12em;padding-bottom:4px}
.cal .d{aspect-ratio:1/.82;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid transparent;padding:6px 8px;font-size:12px;color:var(--muted);position:relative;transition:.25s}
.cal .d.k{border-color:color-mix(in srgb,var(--k) 55%,transparent);background:color-mix(in srgb,var(--k) 11%,transparent);color:var(--text)}
.cal .d.k b{position:absolute;left:8px;bottom:6px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--k);font-weight:600}
.cal .d.dim{opacity:.18}
.cal-note{margin-top:16px;font-size:13px;color:var(--muted)}

/* funnel */
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.fn{cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px 20px;transition:.3s;min-height:var(--hh);display:flex;flex-direction:column;justify-content:flex-end}
.fn:hover,.fn.on{border-color:var(--ac);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 12%,var(--panel)),var(--panel));transform:translateY(-6px)}
.fn small{color:var(--ac);font-size:11px;letter-spacing:.16em}
.fn b{font-family:'Fraunces',serif;font-weight:500;font-size:19px;display:block;margin:6px 0}
.fn-detail{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px;font-size:16.5px;color:#C9D2DB;min-height:92px}
.fn-detail b{color:var(--ac)}
.report{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.wa{background:#0b141a;border-radius:22px;overflow:hidden;border:1px solid var(--line);max-width:430px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.wa-top{background:#1f2c34;padding:13px 16px;display:flex;align-items:center;gap:12px}
.wa-top .av{width:36px;height:36px;border-radius:50%;background:#2a3942;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ac)}
.wa-top b{font-size:14px;display:block}.wa-top small{font-size:11.5px;color:#8696a0}
.wa-body{padding:16px;background:#0b141a;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:18px 18px}
.wa-msg{background:#1f2c34;border-radius:4px 14px 14px 14px;padding:11px 13px;font-size:13.5px;color:#e9edef;line-height:1.55;max-width:96%}
.wa-msg strong{color:var(--ac)}
.wa-msg .row{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed rgba(255,255,255,.1);margin-top:8px;padding-top:8px}
.wa-msg .t{display:block;text-align:right;font-size:10.5px;color:#8696a0;margin-top:6px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.ticks li{padding-left:28px;position:relative;color:#C9D2DB;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:7px;border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg)}

/* format chips + reels (content creation) */
.reel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}

/* ---------- phone + video ---------- */
.phone{position:relative;border-radius:34px;padding:9px;background:linear-gradient(160deg,#243246,#0a0f17);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.5);transition:transform .35s}
.phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:70px;height:6px;border-radius:9px;background:rgba(0,0,0,.55);z-index:4;pointer-events:none}
.phone video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:26px;background:#000}
.phone .play{position:absolute;inset:9px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45));cursor:pointer;z-index:3;transition:opacity .3s}
.phone .play span{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.phone .play:hover span{transform:scale(1.1)}
.phone .play svg{width:26px;fill:#fff;margin-left:4px}
.phone.playing .play{opacity:0;pointer-events:none}
.phone .cap{position:absolute;left:22px;bottom:22px;z-index:3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none;transition:opacity .3s}
.phone.playing .cap{opacity:0}

/* ---------- Portfolio ---------- */
.pf-hero{position:relative;padding:150px 0 60px;overflow:hidden}
.pf-hero::before{content:"";position:absolute;inset:-10% -10% auto -10%;height:90%;background:radial-gradient(ellipse 50% 60% at 20% 30%,rgba(45,226,197,.2),transparent 70%),radial-gradient(ellipse 40% 50% at 85% 40%,rgba(0,229,255,.14),transparent 70%);pointer-events:none}
.pf-hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.pf-hero h1{font-size:clamp(44px,7vw,92px);line-height:.98}
.pf-hero .lead{font-size:19px;color:#B7C2CD;max-width:560px;margin:26px 0 34px}
.pf-hero .lead b{color:var(--text);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:14px 18px;min-width:128px}
.chip b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1;background:linear-gradient(100deg,var(--teal),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chip span{font-size:12px;color:var(--muted);letter-spacing:.05em}
.collage{position:relative;height:560px}
.collage .phone{position:absolute;width:210px}
.collage .phone:nth-child(1){left:2%;top:70px;transform:rotate(-8deg)}
.collage .phone:nth-child(2){left:30%;top:0;transform:rotate(2deg);z-index:2;width:230px}
.collage .phone:nth-child(3){right:0;top:90px;transform:rotate(9deg)}
.collage .phone:hover{transform:rotate(0) scale(1.04);z-index:5}
.collage .phone img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:26px}
.float-tag{position:absolute;z-index:6;background:rgba(10,16,26,.88);border:1px solid rgba(45,226,197,.4);backdrop-filter:blur(8px);border-radius:14px;padding:10px 14px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,.4);animation:bob 5s ease-in-out infinite}
.float-tag b{display:block;color:var(--teal);font-family:'Fraunces',serif;font-size:20px;font-weight:500}
@keyframes bob{50%{transform:translateY(-10px)}}

.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft);overflow:hidden;padding:20px 0}
.marq-in{display:flex;gap:46px;width:max-content;animation:marq 38s linear infinite}
.marq span{font-family:'Fraunces',serif;font-size:26px;white-space:nowrap;color:#7e8c9b;display:flex;align-items:center;gap:46px}
.marq span::after{content:"✦";color:var(--teal);font-size:16px}
@keyframes marq{to{transform:translateX(-50%)}}

.pf-sec{padding:100px 0}
.pf-head{max-width:760px;margin-bottom:56px}
.pf-head .eyebrow-s{display:flex;align-items:center;gap:12px}
.pf-head .eyebrow-s::before{content:"";width:34px;height:1px;background:var(--teal)}
.pf-head h2{font-size:clamp(34px,5vw,60px)}
.pf-head p{color:var(--muted);font-size:17.5px;margin-top:18px;max-width:620px}
.pf-svc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pf-svc a{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 22px 24px;min-height:300px;display:flex;flex-direction:column;overflow:hidden;transition:.35s}
.pf-svc a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--c) 28%,transparent),transparent 60%);opacity:0;transition:.35s}
.pf-svc a:hover{transform:translateY(-8px);border-color:var(--c)}
.pf-svc a:hover::before{opacity:1}
.pf-svc a>*{position:relative}
.pf-svc .n{font-family:'Fraunces',serif;color:var(--c);font-size:14px;letter-spacing:.14em}
.pf-svc svg{width:38px;height:38px;stroke:var(--c);fill:none;stroke-width:1.6;margin:22px 0 18px}
.pf-svc h3{font-size:21px;line-height:1.15;margin-bottom:10px}
.pf-svc p{font-size:13.5px;color:var(--muted)}
.pf-svc .go{margin-top:auto;padding-top:16px;font-size:13px;color:var(--c);font-weight:600}

.sub-label{display:flex;align-items:center;gap:16px;margin:0 0 30px}
.sub-label h3{font-size:clamp(24px,3vw,34px)}
.sub-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sub-label .pill{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#04121A;background:linear-gradient(100deg,var(--teal),var(--cyan));padding:5px 12px;border-radius:99px;font-weight:700;order:-1}
.work-block{margin-bottom:110px}
.work-block:last-child{margin-bottom:0}

.web-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
a.web{display:block;position:relative;border-radius:20px;background:var(--panel);border:1px solid var(--line);padding:14px;transition:.35s}
a.web:hover{transform:translateY(-8px);border-color:var(--teal);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 40px rgba(45,226,197,.12)}
a.web .browser{box-shadow:none}
a.web .browser img{transition:transform 1.4s ease}
a.web:hover .browser img{transform:scale(1.04)}
a.web .browser{overflow:hidden}
a.web .meta{display:flex;justify-content:space-between;align-items:center;padding:18px 8px 8px}
a.web .meta b{font-family:'Fraunces',serif;font-weight:500;font-size:22px}
a.web .meta span{font-size:13px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:8px}
a.web .meta span i{font-style:normal;transition:transform .25s}
a.web:hover .meta span i{transform:translate(4px,-4px)}
.web-more{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:linear-gradient(110deg,rgba(45,226,197,.12),rgba(0,229,255,.04));border:1px solid rgba(45,226,197,.32);border-radius:22px;padding:30px 36px}
.web-more .big{font-family:'Fraunces',serif;font-size:64px;line-height:1}
.web-more p{color:#C9D2DB;font-size:17px}
.web-more p b{color:var(--text)}

.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;justify-items:center}
.reel-grid .phone{width:100%;max-width:300px}
.reel-grid .phone:hover{transform:translateY(-8px)}
.viral{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.viral span{font-size:13px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);color:#C7D0D9;background:var(--panel)}

.flex-band{position:relative;overflow:hidden;border-radius:26px;padding:50px 44px;margin-bottom:34px;background:radial-gradient(ellipse at 15% 0,rgba(45,226,197,.22),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(0,229,255,.16),transparent 55%),var(--panel);border:1px solid rgba(45,226,197,.3);display:grid;grid-template-columns:auto 1fr;gap:50px;align-items:center}
.flex-band .big{font-family:'Fraunces',serif;font-size:clamp(70px,11vw,148px);line-height:.9;font-weight:500}
.flex-band h3{font-size:clamp(24px,3vw,36px);margin-bottom:10px}
.flex-band p{color:#B7C2CD;font-size:17px;max-width:520px}
.shots{display:grid;grid-template-columns:1fr;gap:20px}
.shot{all:unset;box-sizing:border-box;cursor:zoom-in;display:block;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 12px 14px;transition:.3s}
.shot:hover{transform:translateY(-5px);border-color:var(--teal)}
.shot img{display:block;width:100%;border-radius:10px;background:#fff}
.shot small{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;padding:12px 4px 0}
.shot small b{color:var(--teal);font-weight:600}
.lb{position:fixed;inset:0;z-index:300;background:rgba(3,6,10,.92);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:90vh;border-radius:12px;background:#fff}

.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.case{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px 32px;overflow:hidden;transition:.3s}
.case:hover{transform:translateY(-5px);border-color:rgba(45,226,197,.5)}
.case::before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(45,226,197,.2),transparent 70%)}
.case .tag-s{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.case h4{font-family:'Fraunces',serif;font-weight:500;font-size:26px;margin:10px 0 4px}
.case .where{color:var(--teal);font-size:13.5px;margin-bottom:22px}
.case .metric{font-family:'Fraunces',serif;font-size:56px;line-height:1;margin-bottom:6px}
.case p{color:#B7C2CD;font-size:15.5px}
.case a.lnk{display:inline-block;margin-top:16px;color:var(--teal);font-size:14px;font-weight:600}
.case.more{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(120deg,rgba(45,226,197,.1),rgba(0,229,255,.04));border-color:rgba(45,226,197,.3)}
.case.more .metric{font-size:44px}

.sop{position:relative;max-width:880px;margin:0 auto;padding-left:0}
.sop-step{position:relative;display:grid;grid-template-columns:76px 1fr;gap:26px;padding-bottom:42px}
.sop-step::before{content:"";position:absolute;left:37px;top:76px;bottom:0;width:2px;background:linear-gradient(var(--teal),transparent)}
.sop-step:last-child::before{display:none}
.sop-step .no{width:76px;height:76px;border-radius:50%;background:var(--bg);border:1px solid var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:26px;color:var(--teal);box-shadow:0 0 30px rgba(45,226,197,.2);position:relative;z-index:2}
.sop-step .bx{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 30px}
.sop-step h4{font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin-bottom:8px}
.sop-step p{color:#B7C2CD;font-size:16px}
.sop-step .mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sop-step .mini span{font-size:12.5px;padding:6px 13px;border-radius:99px;background:rgba(45,226,197,.1);border:1px solid rgba(45,226,197,.3);color:var(--teal)}
.sop-end{text-align:center;margin-top:10px;font-family:'Fraunces',serif;font-size:clamp(22px,3vw,32px)}

.contact-final{position:relative;overflow:hidden;text-align:center;padding:110px 0;background:radial-gradient(ellipse at 50% 0,rgba(45,226,197,.2),transparent 60%),var(--bg-soft);border-top:1px solid var(--line)}
.contact-final h2{font-size:clamp(32px,5vw,58px);max-width:860px;margin:0 auto 18px}
.contact-final>.wrap>p{color:#B7C2CD;font-size:18px;margin-bottom:34px}
.numbers{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.num-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid rgba(45,226,197,.3);border-radius:18px;padding:16px 22px;transition:.3s;font-size:20px;font-family:'Fraunces',serif;letter-spacing:.02em}
.num-card:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--glow)}
.num-card svg{width:22px;fill:var(--teal)}
.num-card small{display:block;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.quote-line{font-family:'Fraunces',serif;font-size:24px}
.pdf-dl{display:flex;justify-content:center;padding:34px 0 6px}
.pdf-dl a{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:99px;transition:.25s;background:var(--panel)}
.pdf-dl a:hover{color:var(--text);border-color:var(--teal)}
.pdf-dl .ico{width:30px;height:30px;border-radius:50%;background:linear-gradient(120deg,var(--teal),var(--cyan));display:flex;align-items:center;justify-content:center}
.pdf-dl .ico svg{width:15px;stroke:#04121A;fill:none;stroke-width:2.2}

@media(max-width:980px){
  .sp-hero .wrap,.what .wrap,.pf-hero .wrap,.report,.demo-split{grid-template-columns:1fr}
  .what h2{position:static}
  .tabs{grid-template-columns:1fr}
  .tab-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .tab-btn{flex:none}
  .flow{grid-template-columns:1fr 1fr;gap:34px 10px}
  .flow .fs::after{display:none}
  .funnel{grid-template-columns:1fr 1fr}
  .fn{min-height:0!important}
  .related{grid-template-columns:1fr 1fr}
  .pf-svc{grid-template-columns:1fr 1fr}
  .collage{height:470px;max-width:520px;margin:0 auto;width:100%}
  .collage .phone{width:150px}.collage .phone:nth-child(2){width:165px}
  .reel-grid,.reel-row{grid-template-columns:1fr 1fr}
  .web-more{grid-template-columns:1fr;text-align:left}
  .flex-band{grid-template-columns:1fr;gap:10px}
  .demo-split{gap:30px}
  .chatbox{margin:0 auto}
}
@media(max-width:880px){
  .svc-grid.five{grid-template-columns:1fr}
  .svc-grid.five .svc,.svc-grid.five .svc:nth-child(4),.svc-grid.five .svc:nth-child(5){grid-column:auto}
}
@media(max-width:640px){
  .sp-hero{padding:120px 0 50px}
  .sp-strip b{font-size:26px}
  .sp-strip .cell{padding:18px 4px}
  .pf-sec{padding:70px 0}
  .pf-svc,.web-grid,.cases,.shots{grid-template-columns:1fr}
  .reel-grid,.reel-row{grid-template-columns:1fr}
  .reel-grid .phone{max-width:320px}
  .tab-pane{padding:26px 22px}
  .flow{grid-template-columns:1fr}
  .funnel{grid-template-columns:1fr}
  .related{grid-template-columns:1fr}
  .sop-step{grid-template-columns:52px 1fr;gap:16px}
  .sop-step .no{width:52px;height:52px;font-size:18px}
  .sop-step::before{left:25px;top:52px}
  .sop-step .bx{padding:20px}
  .flex-band{padding:34px 24px}
  .case{padding:28px 24px}
  .cal .d{padding:4px 5px;font-size:10.5px}
  .cal .d.k b{font-size:8px;left:4px;bottom:3px}
  .cal-wrap{padding:18px 14px}
  .collage{height:400px}
  .collage .phone{width:122px}.collage .phone:nth-child(2){width:136px}
  .float-tag{display:none}
  .m-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;gap:10px}
  .m-cta a{flex:1;justify-content:center;padding:13px}
  body.has-mcta{padding-bottom:78px}
}
@media(prefers-reduced-motion:reduce){.marq-in,.float-tag,.pulse,.chain div,.bars i{animation:none;opacity:1;transform:none}}