:root{--cream:#faf7f1;--blue:#1749d1;--ink:#142343;--line:#dedfdc;--font-sans:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;--font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-sans);line-height:1.65}a{color:var(--blue);text-underline-offset:5px}header,footer,section{padding:36px max(6vw,calc((100vw - 1200px)/2))}header{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:23px;font-weight:750;color:var(--ink)}nav{display:flex;gap:26px}nav a{text-decoration:none;color:var(--ink)}.button,button{border:0;background:var(--blue);color:white;padding:16px 24px;border-radius:10px;text-decoration:none;display:inline-block;font:inherit;font-weight:650;cursor:pointer}.small{padding:10px 16px;font-size:14px}.button:hover,button:hover{background:#0b359e}.button:disabled,button:disabled{opacity:.5;cursor:wait}.hero{position:relative;padding-top:90px;padding-bottom:85px;overflow:hidden}.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue)}h1{font-size:clamp(38px,5.7vw,76px);letter-spacing:-.05em;line-height:1.12;max-width:1000px;margin:24px 0}h1 em{font-style:normal;color:var(--blue)}h2{font-size:clamp(28px,3.3vw,44px);line-height:1.2;letter-spacing:-.03em;max-width:850px}h3{font-size:24px;line-height:1.25}.lead{font-size:21px;max-width:740px}.muted{color:#526078;font-size:14px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}article{border:1px solid var(--line);background:#fff;padding:30px;border-radius:18px}article a{display:block;margin-top:24px;font-weight:650}.number{color:var(--blue);font-size:13px}.band{background:#152a57;color:white;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.band p{font-size:20px}.price{font-size:30px;color:var(--blue);font-weight:750}.price small{font-size:14px;font-weight:400;display:block}.featured{border:2px solid var(--blue)}details{padding:22px 0;border-bottom:1px solid var(--line)}summary{font-weight:650;cursor:pointer;font-size:20px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:#eaf0fc;margin-top:45px}label{display:block;font-size:14px;font-weight:600;margin:15px 0}input,textarea,select{display:block;width:100%;padding:13px;border:1px solid #9faec8;border-radius:8px;background:white;color:var(--ink);font:inherit;margin-top:6px}textarea{resize:vertical}.check{font-weight:400}.check input{display:inline;width:auto;margin-right:8px}.trap{position:absolute;left:-10000px}.error{color:#a01424}.success{color:#126234}footer{display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);font-size:14px}footer p{flex:1}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit}.legal{max-width:850px}.orbit{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}.orbit span{border:1px solid #b2c2e4;padding:12px 25px;border-radius:50px;background:#edf2ff}.panel{max-width:1200px;margin:30px auto;padding:0 20px}.admin-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:8px 0 20px}
.admin-heading h1{margin-top:6px}
.owner-overview-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.owner-stat{display:flex;flex-direction:column;gap:2px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
.owner-stat:hover{border-color:#b6c6eb;background:#f7f9ff;text-decoration:none}
.owner-stat strong{font-size:26px;line-height:1.2;color:var(--accent)}.owner-stat span{font-size:12px;color:var(--muted)}
.owner-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.9fr);gap:16px;padding:20px;margin:18px 0;background:#fff;border:1px solid var(--line);border-radius:14px}
.owner-next h2{margin:2px 0 8px}.owner-next p{margin:4px 0;color:var(--muted)}
.owner-overview-actions{display:grid;gap:8px;align-content:center}
.owner-overview-actions a,.owner-action-link{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #d9e3f7;border-radius:9px;background:#f7f9ff;color:#1749d1;text-decoration:none;font-size:13px;font-weight:700}
.owner-overview-actions a:hover,.owner-action-link:hover{background:#edf2ff;text-decoration:none}
.owner-hint{padding:12px 14px;background:#f1f5ff;border-left:3px solid #1749d1;border-radius:4px 9px 9px 4px;color:#465574;font-size:13px}
.admin-nav{display:flex;flex-wrap:wrap;gap:12px}.admin-nav a{padding:8px}table{border-collapse:collapse;width:100%;font-size:14px}td,th{text-align:left;border-bottom:1px solid var(--line);padding:12px;vertical-align:top}.scroll{overflow-x:auto}.stack{display:grid;gap:16px}.stack article{padding:22px}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{font-size:13px;padding:10px}.badge{border-radius:8px;background:#edf2ff;padding:4px 8px;font-size:13px}.preview{white-space:pre-wrap}.preview-image{max-width:100%;max-height:400px}dialog{border:1px solid var(--line);border-radius:20px;width:min(720px,95vw)}:focus-visible{outline:3px solid #f29532;outline-offset:4px}[hidden]{display:none!important}@media(max-width:800px){header{flex-wrap:wrap;padding:20px}header>.button{display:none}nav{gap:16px;font-size:14px}.grid,.band,.contact{grid-template-columns:1fr;gap:20px}.hero{padding-top:55px}section{padding:40px 22px}.contact{margin-top:20px}footer{padding:28px 22px}.lead{font-size:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Direction-led visual system: restrained motion, tactile surfaces, no external runtime. */
:root{--ink:#142343;--blue:#1749d1;--sky:#dfeaff;--coral:#ff795f;--lime:#b7d96b;--cream:#faf7f1;--line:rgba(20,35,67,.08);--shadow:0 24px 70px rgba(20,35,67,.13)}
body{overflow-x:hidden;background:radial-gradient(circle at 80% -10%,#e7efff 0,transparent 33rem),var(--cream)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(20,35,67,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,35,67,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-1}
header{position:relative;z-index:4;background:rgba(250,247,241,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.logo img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.logo:hover img{transform:rotate(-12deg) scale(1.08)}
.button{box-shadow:0 10px 24px rgba(23,73,209,.18);transition:transform .28s ease,box-shadow .28s ease,background .28s ease}.button:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(23,73,209,.25)}
.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;column-gap:54px;padding-top:70px;padding-bottom:72px}.hero>h1,.hero>.lead,.hero>.button,.hero>.muted,.hero>.eyebrow{grid-column:1}.hero>h1{margin-top:20px}.hero>.muted{margin-top:10px}.hero>h1 em{background:linear-gradient(110deg,var(--blue),#4e80ff 60%,#6b48d7);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero:after{content:"";position:absolute;width:460px;height:460px;right:-170px;top:80px;border:1px solid rgba(23,73,209,.12);border-radius:50%;box-shadow:0 0 0 40px rgba(23,73,209,.025),0 0 0 90px rgba(23,73,209,.018);pointer-events:none}
.hero-visual{grid-column:2;grid-row:1 / span 6;position:relative;isolation:isolate}.hero-visual-home{min-height:330px}
.hero-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:36px;background:var(--ink);color:#fff;display:grid;place-items:center;align-content:center;box-shadow:var(--shadow);z-index:2}.hero-core span{font-size:48px;line-height:1;font-weight:800;letter-spacing:-.12em}.hero-core small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#bcd0ff}
.hero-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(23,73,209,.25);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}.hero-orbit:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue);top:-5px;left:50%;box-shadow:0 0 0 7px rgba(23,73,209,.12)}.orbit-a{width:250px;height:250px;animation:spin 22s linear infinite}.orbit-b{width:390px;height:190px;transform:translate(-50%,-50%) rotate(34deg);border-color:rgba(255,121,95,.35);animation:spin-reverse 28s linear infinite}.orbit-b:after{background:var(--coral);top:auto;bottom:-5px;left:18%}.hero-node{position:absolute;padding:11px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(20,35,67,.1);font-size:13px;font-weight:700;z-index:3;animation:float 5s ease-in-out infinite}.node-smm{top:18%;left:4%;color:#a24b2f}.node-sites{right:2%;top:31%;color:var(--blue);animation-delay:-1.7s}.node-auto{bottom:14%;left:25%;color:#4e6f1a;animation-delay:-3.2s}
.hero-visual-smm{min-height:300px}.feed-window{position:absolute;inset:24px 20px 18px 34px;background:rgba(255,255,255,.86);border:1px solid rgba(20,35,67,.14);border-radius:24px;padding:20px;box-shadow:var(--shadow);transform:rotate(3deg);backdrop-filter:blur(8px);animation:drift 7s ease-in-out infinite}.feed-top{display:flex;align-items:center;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--line);color:#53627c;font-size:12px}.feed-top i{width:8px;height:8px;border-radius:50%;background:#ff9b8b}.feed-top i:nth-child(2){background:#ffd37a}.feed-top i:nth-child(3){background:#b7d96b}.feed-top span{margin-left:auto}.feed-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:18px 0;border-bottom:1px solid #edf0f5;font-size:12px}.feed-row b{color:#53627c}.feed-line{height:9px;border-radius:10px;background:linear-gradient(90deg,#dbe5ff,#f1f4fa)}.w80{width:80%}.w60{width:60%}.w70{width:70%}.feed-row em{font-size:10px;color:#7b8b58;font-style:normal}.feed-row.active{background:#f3f7ff;margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:10px}.approval-chip{position:absolute;right:-26px;bottom:6px;background:var(--ink);color:#fff;border-radius:14px;padding:13px 16px;font-size:12px;box-shadow:0 14px 26px rgba(20,35,67,.22);animation:float 4.5s ease-in-out infinite reverse}.approval-chip:before{content:"";display:inline-block;width:8px;height:8px;background:var(--lime);border-radius:50%;margin-right:8px;box-shadow:0 0 0 5px rgba(183,217,107,.2)}
.hero-visual-sites{min-height:300px}.browser-frame{position:absolute;inset:18px 8px 26px 24px;background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-2deg);animation:float 7s ease-in-out infinite}.browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#eef3ff;border-bottom:1px solid #d7e0f2}.browser-bar span{width:8px;height:8px;border-radius:50%;background:#ff9b8b}.browser-bar span:nth-child(2){background:#ffd37a}.browser-bar span:nth-child(3){background:#b7d96b}.browser-bar small{margin-left:auto;color:#7483a0;font-size:10px}.browser-page{height:calc(100% - 38px);padding:28px;background:linear-gradient(135deg,#f9fbff,#e7eeff);display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.browser-copy{display:grid;gap:10px}.browser-copy i{width:58px;height:8px;background:var(--coral);border-radius:5px}.browser-copy b{display:block;width:92%;height:14px;border-radius:5px;background:var(--ink)}.browser-copy b:nth-child(3){width:70%;opacity:.75}.browser-copy span{width:64px;height:22px;border-radius:8px;background:var(--blue);margin-top:8px}.browser-blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;transform:rotate(4deg)}.browser-blocks i{height:76px;border-radius:12px;background:#fff;border:1px solid #d9e3f5}.browser-blocks i:first-child{grid-column:span 2;height:54px;background:var(--lime)}.responsive-tag{position:absolute;right:0;bottom:0;background:var(--ink);color:#fff;border-radius:14px;padding:11px 14px;font-size:11px;box-shadow:0 12px 28px rgba(20,35,67,.2)}
.hero-visual-automation{min-height:300px;background:rgba(223,234,255,.45);border:1px solid rgba(23,73,209,.14);border-radius:28px;padding:26px;box-shadow:var(--shadow);overflow:hidden}.hero-visual-automation svg{position:absolute;inset:58px 15px auto;width:calc(100% - 30px);height:120px}.flow-path{fill:none;stroke:#9bb4ef;stroke-width:3;stroke-linecap:round;stroke-dasharray:8 10}.flow-path-delay{stroke:var(--blue);stroke-dasharray:2 16;animation:dash 2.8s linear infinite}.flow-node{position:absolute;top:102px;width:92px;height:92px;border-radius:20px;background:#fff;border:1px solid #cddaf5;display:grid;place-items:center;align-content:center;box-shadow:0 12px 30px rgba(20,35,67,.12)}.flow-node span{font-size:10px;color:var(--blue);font-weight:800}.flow-node b{font-size:14px}.flow-node small{font-size:10px;color:#6b7890}.flow-start{left:7%}.flow-mid{left:calc(50% - 46px);top:86px;border-color:var(--blue);transform:scale(1.08)}.flow-end{right:7%}.flow-status{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:11px;color:#60708a;white-space:nowrap}.flow-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7eb32b;margin-right:7px;box-shadow:0 0 0 5px rgba(126,179,43,.16);animation:pulse 2s infinite}
article{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}article:hover{transform:translateY(-7px);box-shadow:0 16px 34px rgba(20,35,67,.08);border-color:#b8c8ec}.band{position:relative;overflow:hidden}.band:after{content:"";position:absolute;right:-10%;top:-100px;width:360px;height:360px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.06),0 0 0 80px rgba(255,255,255,.04);animation:spin-reverse 40s linear infinite}.contact{border-radius:28px;position:relative;overflow:hidden}.contact:before{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(135deg,rgba(255,255,255,.34),transparent);pointer-events:none}.eyebrow{display:inline-flex;align-items:center;gap:8px}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(255,121,95,.13)}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}[data-reveal].is-visible{opacity:1;transform:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(342deg)}}@keyframes spin-reverse{to{transform:translate(-50%,-50%) rotate(-326deg)}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes drift{0%,100%{translate:0 0;rotate:3deg}50%{translate:-7px 8px;rotate:1deg}}@keyframes dash{to{stroke-dashoffset:-72}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:800px){.hero{display:block;min-height:auto;padding-top:56px}.hero-visual{margin-top:45px;min-height:280px}.hero:after{right:-260px;top:260px}.hero-visual-automation{min-height:270px}.flow-node{transform:scale(.82)}.flow-mid{transform:scale(.9);left:calc(50% - 46px)}.flow-start{left:1%}.flow-end{right:1%}.feed-window{inset:14px 30px 20px 10px}.approval-chip{right:-4px}.browser-frame{inset:15px 0 26px 8px}.node-smm{left:0}.node-sites{right:0}.node-auto{left:16%}}
@media(prefers-reduced-motion:reduce){.hero-orbit,.hero-node,.feed-window,.approval-chip,.browser-frame,.flow-path-delay,.band:after{animation:none}.button,article{transition:none}[data-reveal]{opacity:1;transform:none}}

/* Showcase layer: the page demonstrates the work instead of only describing it. */
.showcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(380px,1.2fr);gap:60px;align-items:center;min-height:500px;background:#fff;border-block:1px solid var(--line);position:relative;overflow:hidden}.showcase:nth-of-type(even){background:#f1f5ff}.showcase-copy{position:relative;z-index:2}.showcase-copy h2{margin:20px 0 16px}.showcase-copy h2 em{font-style:normal;color:var(--blue)}.showcase-copy p{max-width:460px;font-size:18px;color:#526078}.signal-board,.story-board,.site-gallery,.automation-console{position:relative;min-height:320px}.signal-board{padding:32px 0}.signal-line{display:grid;grid-template-columns:42px 1fr 80px auto;align-items:center;gap:14px;border-top:1px solid #cfd9ec;padding:22px 0;position:relative}.signal-line:last-child{border-bottom:1px solid #cfd9ec}.signal-line span{font:700 12px/1 ui-monospace,monospace;color:var(--coral)}.signal-line b{font-size:22px}.signal-line i{height:2px;background:linear-gradient(90deg,var(--blue),transparent);position:relative}.signal-line i:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:0;top:-3px;background:var(--blue);box-shadow:0 0 0 7px rgba(23,73,209,.12)}.signal-line em{font-size:12px;color:#65738b;font-style:normal}.signal-line:nth-child(2) i{background:linear-gradient(90deg,var(--coral),transparent)}.signal-line:nth-child(2) i:after{background:var(--coral)}.signal-line:nth-child(3) i{background:linear-gradient(90deg,#7eb32b,transparent)}.signal-line:nth-child(3) i:after{background:#7eb32b}.story-board{min-height:350px}.story-card{position:absolute;width:min(350px,80%);padding:24px;border-radius:24px;border:1px solid #cdd8ea;background:#fff;box-shadow:var(--shadow);display:grid;gap:12px}.story-card small{color:#71809a;font-size:11px}.story-card b{font-size:24px;line-height:1.15}.story-card span{font-size:12px;color:#66758b}.card-back{top:24px;left:8%;transform:rotate(-7deg);background:#eef3ff}.card-front{top:72px;left:20%;transform:rotate(4deg);z-index:2}.approved{color:#5f831f!important}.story-progress{height:5px;background:#e5eaf3;border-radius:4px}.story-progress i{display:block;width:78%;height:100%;background:var(--lime);border-radius:4px}.story-comment{position:absolute;right:0;bottom:12px;background:var(--ink);color:#fff;border-radius:14px;padding:13px 16px;font-size:12px;box-shadow:0 12px 28px rgba(20,35,67,.2);animation:float 5s ease-in-out infinite}.site-gallery{min-height:350px;padding:20px 0 0 30px}.gallery-label{font-size:11px;color:#71809a;display:flex;justify-content:space-between;max-width:410px;margin-bottom:10px}.gallery-label b{color:var(--blue)}.gallery-card{background:#fff;border:1px solid #cfd9ec;border-radius:20px;box-shadow:var(--shadow);position:absolute;overflow:hidden}.gallery-main{width:min(430px,82%);height:285px;left:6%;top:45px;transform:rotate(-3deg);padding:18px;background:linear-gradient(145deg,#f7faff,#e6edff)}.gallery-nav{display:flex;gap:5px;align-items:center;color:#71809a;font-size:9px}.gallery-nav i{width:6px;height:6px;border-radius:50%;background:#ff9b8b}.gallery-nav i:nth-child(2){background:#ffd37a}.gallery-nav i:nth-child(3){background:#b7d96b}.gallery-nav span{margin-left:auto}.gallery-title{width:67%;height:16px;background:var(--ink);border-radius:4px;margin-top:46px}.gallery-title.short{width:46%;height:11px;margin-top:9px;opacity:.55}.gallery-cta{width:76px;height:25px;background:var(--blue);border-radius:7px;margin-top:17px}.gallery-photo{position:absolute;width:170px;height:130px;right:20px;bottom:18px;background:linear-gradient(135deg,var(--coral),#ffccb9);border-radius:16px;transform:rotate(7deg)}.gallery-mini{width:145px;height:185px;right:0;bottom:18px;transform:rotate(8deg);padding:18px;background:#152a57}.mini-top{height:7px;width:58%;background:var(--lime);border-radius:3px}.mini-lines{height:9px;width:86%;background:#fff;border-radius:3px;margin-top:45px}.mini-lines.short{width:65%;margin-top:8px;opacity:.5}.automation-console{background:#101f3e;border-radius:24px;padding:24px;color:#eaf0fc;box-shadow:0 26px 70px rgba(20,35,67,.24);overflow:hidden}.automation-console:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.06) 50%,transparent 60%);transform:translateX(-100%);animation:console-scan 6s ease-in-out infinite}.console-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:18px;font:12px ui-monospace,monospace;color:#9cadcc}.console-head b{color:var(--lime);font-weight:500}.console-head i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:7px}.console-event{display:grid;grid-template-columns:75px 16px 1fr;align-items:center;gap:12px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}.console-event time{font:10px ui-monospace,monospace;color:#8091b5}.event-dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 6px rgba(255,121,95,.12)}.event-dot.blue{background:#7da0ff;box-shadow:0 0 0 6px rgba(125,160,255,.12)}.event-dot.lime{background:var(--lime);box-shadow:0 0 0 6px rgba(183,217,107,.12)}.console-event p{margin:0;display:grid;gap:4px}.console-event b{font-size:14px}.console-event small{font-size:11px;color:#91a2c2}@keyframes console-scan{0%,45%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
@media(max-width:800px){.showcase{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:50px;padding-bottom:55px}.signal-board,.story-board,.site-gallery,.automation-console{min-height:280px}.showcase-copy p{font-size:16px}.signal-line{grid-template-columns:34px 1fr 48px auto;gap:8px}.signal-line b{font-size:17px}.story-card{width:82%}.card-front{left:12%}.story-comment{right:4%;bottom:0}.site-gallery{padding-left:0}.gallery-main{left:4%}.gallery-mini{right:-5%}.console-event{grid-template-columns:62px 12px 1fr}}
@media(prefers-reduced-motion:reduce){.story-comment,.automation-console:after{animation:none}}


/* Responsive type and purposeful, lightweight CSS 3D storytelling. */
body{font-size:clamp(1rem,.94rem + .28vw,1.2rem)}
h1{font-size:clamp(2.5rem,1.95rem + 3vw,5.125rem);max-width:14ch;text-wrap:balance}
h2{font-size:clamp(1.8rem,1.35rem + 1.8vw,3rem);text-wrap:balance}
h3{font-size:clamp(1.25rem,1.08rem + .62vw,1.75rem)}
.lead{font-size:clamp(1.0625rem,.98rem + .48vw,1.35rem);line-height:1.55;max-width:38ch}
.showcase-copy p,.band p{font-size:clamp(1rem,.96rem + .28vw,1.2rem);line-height:1.65}
nav{font-size:clamp(.94rem,.9rem + .12vw,1.05rem)}
article p,details,summary,label{font-size:clamp(.98rem,.94rem + .16vw,1.08rem)}
.hero-visual-home{perspective:900px;transform-style:preserve-3d}
.hero-core{transform:translate(-50%,-50%) translateZ(32px);box-shadow:0 32px 50px rgba(20,35,67,.2),inset 0 1px rgba(255,255,255,.15)}
.hero-orbit{transform-style:preserve-3d;backface-visibility:hidden}
.orbit-a{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-18deg);animation:orbit-depth-a 18s ease-in-out infinite}
.orbit-b{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(34deg);animation:orbit-depth-b 22s ease-in-out infinite}
.hero-node{animation:node-focus 9s ease-in-out infinite;transition:box-shadow .35s,background-color .35s}
.node-smm{animation-delay:0s}.node-sites{animation-delay:-3s}.node-auto{animation-delay:-6s}
@keyframes orbit-depth-a{0%,100%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-18deg)}50%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(18deg)}}
@keyframes orbit-depth-b{0%,100%{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(34deg)}50%{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-8deg)}}
@keyframes node-focus{0%,7%,30%,100%{transform:translateZ(0) scale(1);box-shadow:0 12px 30px rgba(20,35,67,.1)}12%,23%{transform:translateZ(20px) scale(1.055);box-shadow:0 22px 42px rgba(20,35,67,.18)}}
.hero-visual-smm,.story-board,.site-gallery{perspective:1100px;transform-style:preserve-3d}
.feed-window{transform:rotateY(-7deg) rotateX(3deg) rotateZ(1deg);transform-style:preserve-3d;animation:feed-tilt 8s ease-in-out infinite}
.feed-row{position:relative;transition:background-color .35s,transform .35s,box-shadow .35s;animation:feed-stage 9s ease-in-out infinite}
.feed-row:nth-of-type(2){animation-delay:-6s}.feed-row:nth-of-type(3){animation-delay:-3s}.feed-row:nth-of-type(4){animation-delay:0s}
.feed-row.active{box-shadow:0 8px 20px rgba(23,73,209,.08)}
.approval-chip{animation:approval-arrive 9s ease-in-out infinite;transform:translateZ(34px)}
@keyframes feed-tilt{0%,100%{transform:rotateY(-7deg) rotateX(3deg) rotateZ(1deg) translateY(0)}50%{transform:rotateY(4deg) rotateX(0) rotateZ(-1deg) translateY(-5px)}}
@keyframes feed-stage{0%,12%,100%{background:transparent;transform:translateZ(0)}18%,42%{background:#edf3ff;transform:translateZ(12px) scale(1.015);box-shadow:0 8px 20px rgba(23,73,209,.08)}}
@keyframes approval-arrive{0%,54%,100%{opacity:.7;transform:translate3d(0,8px,0) scale(.96)}65%,88%{opacity:1;transform:translate3d(0,0,34px) scale(1)}}
.story-card{transform-style:preserve-3d;backface-visibility:hidden}
.card-back{transform:rotateY(14deg) rotateX(4deg) rotateZ(-7deg) translateZ(-16px);animation:idea-depth 9s ease-in-out infinite}
.card-front{transform:rotateY(-7deg) rotateX(3deg) rotateZ(2deg) translateZ(24px);animation:approved-depth 9s ease-in-out infinite}
.story-progress i{width:0;animation:progress-fill 9s ease-in-out infinite}
.story-comment{transform:translateZ(38px);animation:comment-arrive 9s ease-in-out infinite}
@keyframes idea-depth{0%,100%{transform:rotateY(14deg) rotateX(4deg) rotateZ(-7deg) translate3d(0,0,-16px)}45%,70%{transform:rotateY(8deg) rotateX(2deg) rotateZ(-4deg) translate3d(8px,-4px,2px)}}
@keyframes approved-depth{0%,25%{transform:rotateY(-12deg) rotateX(5deg) rotateZ(4deg) translate3d(10px,4px,0);filter:saturate(.8)}55%,85%,100%{transform:rotateY(-5deg) rotateX(2deg) rotateZ(1deg) translate3d(0,0,26px);filter:saturate(1)}}
@keyframes progress-fill{0%,30%{width:0}68%,100%{width:100%}}
@keyframes comment-arrive{0%,62%,100%{opacity:.35;transform:translate3d(12px,6px,0)}72%,92%{opacity:1;transform:translate3d(0,0,38px)}}
.browser-frame,.gallery-card{transform-style:preserve-3d;backface-visibility:hidden}
.browser-frame{transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1deg) translateZ(12px);animation:browser-turn 8s ease-in-out infinite}
.responsive-tag{transform:translateZ(42px);animation:tag-pop 8s ease-in-out infinite}
.gallery-main{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-2deg) translateZ(18px);animation:gallery-main-depth 8s ease-in-out infinite}
.gallery-mini{transform:rotateY(14deg) rotateX(4deg) rotateZ(5deg) translateZ(42px);animation:gallery-mobile-depth 8s ease-in-out infinite}
@keyframes browser-turn{0%,100%{transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1deg) translateZ(12px)}50%{transform:rotateY(3deg) rotateX(1deg) rotateZ(0) translateZ(22px)}}
@keyframes tag-pop{0%,42%,100%{opacity:.7;transform:translate3d(0,5px,10px)}55%,82%{opacity:1;transform:translate3d(0,0,42px)}}
@keyframes gallery-main-depth{0%,100%{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-2deg) translateZ(18px)}50%{transform:rotateY(0) rotateX(0) rotateZ(0) translateZ(32px)}}
@keyframes gallery-mobile-depth{0%,100%{transform:rotateY(14deg) rotateX(4deg) rotateZ(5deg) translateZ(42px)}50%{transform:rotateY(4deg) rotateX(0) rotateZ(2deg) translateZ(54px)}}
.hero-visual-automation{perspective:1000px;transform-style:preserve-3d}
.flow-node{transform-style:preserve-3d;animation:flow-focus 6s ease-in-out infinite}
.flow-mid{transform:translateZ(18px) scale(1.08);animation-delay:-2s}
.flow-end{animation-delay:-4s}
.flow-path-delay{animation:dash 3s linear infinite}
@keyframes flow-focus{0%,9%,33%,100%{border-color:#cddaf5;box-shadow:0 12px 30px rgba(20,35,67,.12);filter:saturate(.8)}14%,26%{border-color:var(--blue);box-shadow:0 22px 42px rgba(23,73,209,.2);filter:saturate(1.2)}}
.automation-console{perspective:1000px;transform-style:preserve-3d}
.console-event{transform:translateZ(0);animation:console-event-focus 9s ease-in-out infinite}
.console-event:nth-of-type(2){animation-delay:0s}.console-event:nth-of-type(3){animation-delay:-3s}.console-event:nth-of-type(4){animation-delay:-6s}
@keyframes console-event-focus{0%,10%,100%{transform:translateZ(0);background:transparent}18%,34%{transform:translateZ(10px);background:rgba(255,255,255,.055)}}
[data-reveal]{transform:translateY(12px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
@media(max-width:800px){
  h1{font-size:clamp(2.45rem,8.8vw,3.5rem);max-width:15ch}
  .hero{column-gap:28px}
  .hero-visual-home{min-height:290px}
  .orbit-b{width:min(390px,100%)}
  .feed-window{transform:none;animation:none}
  .story-card{padding:19px;width:min(82%,350px)}
  .gallery-main{width:80%;height:260px}
  .gallery-photo{width:130px;height:100px}
}
@media(max-width:420px){
  .hero-visual-home{min-height:250px}
  .orbit-a{width:205px;height:205px}
  .orbit-b{height:155px}
  .hero-core{width:96px;height:96px;border-radius:30px}
  .hero-node{font-size:12px;padding:9px 11px}
  .feed-row{grid-template-columns:28px 1fr auto;gap:7px;padding:14px 0;font-size:11px}
  .story-card b{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .orbit-a,.orbit-b,.hero-node,.feed-window,.feed-row,.approval-chip,.card-back,.card-front,.story-progress i,.story-comment,.browser-frame,.responsive-tag,.gallery-main,.gallery-mini,.flow-node,.flow-path-delay,.console-event{animation:none!important;transition:none!important}
  .card-back{transform:rotate(-4deg) translateZ(-8px)}.card-front{transform:rotate(1deg) translateZ(18px)}
  [data-reveal]{opacity:1;transform:none}
}

/* Readable type scale for large screens and dashboard pages. */
body{font-size:clamp(1rem,.96rem + .2vw,1.16rem)}
.lead{font-size:clamp(1.15rem,1.05rem + .3vw,1.4rem)}
.muted{font-size:clamp(.92rem,.88rem + .12vw,1rem)}
label{font-size:clamp(.94rem,.9rem + .14vw,1.04rem)}
input,textarea,select{font-size:clamp(.95rem,.91rem + .12vw,1.04rem)}
.panel{font-size:inherit}
.panel h1{font-size:clamp(2rem,1.7rem + 1.35vw,3.5rem);line-height:1.12}
.panel h2{font-size:clamp(1.55rem,1.36rem + .5vw,2.05rem)}
.panel h3{font-size:clamp(1.1rem,1.02rem + .18vw,1.24rem)}
.panel>p,.panel article p,.panel td,.panel th{font-size:clamp(.96rem,.92rem + .14vw,1.05rem);line-height:1.6}
.admin-nav a{font-size:clamp(.92rem,.88rem + .12vw,1rem)}
.badge,.notice{font-size:clamp(.85rem,.82rem + .1vw,.94rem)}
.actions button{font-size:clamp(.9rem,.86rem + .12vw,1rem)}
table{font-size:clamp(.94rem,.9rem + .12vw,1rem)}
@media(max-width:800px){
  .panel h1{font-size:clamp(2rem,7vw,2.8rem)}
  .panel>p,.panel article p,.panel td,.panel th{font-size:1rem}
}

/* Clear 3D storyboard: one visible publication journey, in three named stages. */
.showcase-smm .story-board{min-height:410px;padding-bottom:58px}
.showcase-smm .story-comment{bottom:76px}
.story-stepper{position:absolute;inset:auto 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:15px 10px 12px;border-top:1px solid rgba(23,73,209,.16);background:linear-gradient(180deg,rgba(250,247,241,0),rgba(250,247,241,.94) 34%)}
.story-stepper:before,.story-stepper:after{content:"";position:absolute;left:12%;top:22px;height:2px;border-radius:2px}
.story-stepper:before{right:12%;background:#d6deed}
.story-stepper:after{width:0;background:var(--blue);animation:story-route 9s ease-in-out infinite}
.story-step{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0;color:#344665;font-size:12px;transition:color .25s}
.story-step span{display:grid;place-items:center;width:18px;height:18px;border:1px solid #cbd6e8;border-radius:50%;background:#fff;color:var(--blue);font:700 9px/1 var(--font-mono)}
.story-step b{font-size:12px;font-weight:650;white-space:nowrap}
.story-topic span{animation:story-focus-idea 9s ease-in-out infinite}
.story-edit span{animation:story-focus-edit 9s ease-in-out infinite}
.story-approve span{animation:story-focus-approve 9s ease-in-out infinite}
@keyframes story-focus-idea{0%,30%{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(23,73,209,.14);transform:scale(1.08)}36%,100%{background:#fff;border-color:#cbd6e8;color:var(--blue);box-shadow:none;transform:none}}
@keyframes story-focus-edit{0%,34%{background:#fff;border-color:#cbd6e8;color:var(--blue);box-shadow:none;transform:none}40%,57%{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(23,73,209,.14);transform:scale(1.08)}63%,100%{background:#fff;border-color:#cbd6e8;color:var(--blue);box-shadow:none;transform:none}}
@keyframes story-focus-approve{0%,61%{background:#fff;border-color:#cbd6e8;color:var(--blue);box-shadow:none;transform:none}67%,83%{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(23,73,209,.14);transform:scale(1.08)}89%,100%{background:#fff;border-color:#cbd6e8;color:var(--blue);box-shadow:none;transform:none}}
@keyframes story-route{0%,12%{width:0}38%{width:38%}65%{width:76%}86%,100%{width:76%}}
@media(max-width:800px){
 .showcase-smm .story-board{min-height:410px}
 .story-stepper{gap:4px;padding-inline:3px}
 .story-step{gap:5px;font-size:11px}
 .story-step b{font-size:11px}
 .story-stepper:before,.story-stepper:after{left:9%;right:9%}
 .showcase-smm .story-comment{bottom:72px}
}
@media(max-width:420px){
 .showcase-smm .story-board{min-height:380px}
 .story-stepper{padding-top:12px}
 .story-step{display:grid;justify-items:center;gap:5px;text-align:center}
 .story-stepper:before,.story-stepper:after{top:19px;left:17%;right:17%}
}
@media(prefers-reduced-motion:reduce){
 .story-stepper:after{left:12%;right:12%;width:auto;animation:none}
 .story-step,.story-topic span,.story-edit span,.story-approve span{transition:none;animation:none}
}

@media(max-width:760px){.admin-heading{display:block}.admin-heading .actions{margin-top:12px}.admin-heading .actions button{flex:1 1 180px}.owner-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.owner-next{grid-template-columns:1fr}.owner-action-link{width:100%}}
.admin-heading h1{font-size:clamp(34px,4vw,52px)}

.report-panel{display:grid;gap:14px;margin:14px 0 24px}
.report-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-status-card{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.report-status-card span{font-size:13px;font-weight:700;color:var(--muted)}
.report-status-card strong{font-size:18px;color:var(--ink)}
.report-status-card small,.report-note,.report-empty{color:var(--muted);font-size:13px;line-height:1.5}
.report-note,.report-empty{margin:0}
@media(max-width:760px){.report-status-grid{grid-template-columns:1fr}}


/* The single site mark lives in the header. Its icon greets visitors and gently stirs. */
body[data-page] header .dai-ya-brand{gap:12px;white-space:nowrap}
body[data-page] header .brand-emblem{position:relative;display:block;flex:none;width:62px;height:62px;overflow:hidden;transform-origin:50% 65%;animation:brand-greeting 1s cubic-bezier(.22,.75,.24,1) both}
body[data-page] header .brand-emblem img{position:absolute;display:block;max-width:none;width:120px;height:120px;left:-27px;top:-16px;transform-origin:50% 45%;animation:brand-wave 6s ease-in-out 1.3s infinite}
body[data-page] header .dai-ya-brand:hover .brand-emblem img,body[data-page] header .dai-ya-brand:focus-visible .brand-emblem img{animation:brand-hover .55s ease-in-out both}
@keyframes brand-greeting{0%{opacity:0;transform:translateY(12px) rotate(-15deg) scale(.75)}58%{opacity:1;transform:translateY(-5px) rotate(9deg) scale(1.09)}78%{transform:translateY(2px) rotate(-4deg) scale(.97)}100%{opacity:1;transform:none}}
@keyframes brand-wave{0%,69%,100%{transform:none}73%{transform:rotate(-9deg) scale(1.05)}77%{transform:rotate(7deg) scale(.96,1.02)}81%{transform:rotate(-3deg) scale(1.02)}85%{transform:none}}
@keyframes brand-hover{0%,100%{transform:none}40%{transform:rotate(-10deg) scale(1.09)}70%{transform:rotate(7deg) scale(.98)}}
body[data-page] .hero-home{min-height:0}
body[data-page] .hero-home h1,body[data-page] .hero-home .lead{max-width:760px}
@media(max-width:760px){body[data-page] header .brand-emblem{width:52px;height:52px}body[data-page] header .brand-emblem img{width:100px;height:100px;left:-22px;top:-13px}body[data-page] .hero-home h1,body[data-page] .hero-home .lead{max-width:none}}
@media(prefers-reduced-motion:reduce){body[data-page] header .brand-emblem,body[data-page] header .brand-emblem img,body[data-page] header .dai-ya-brand:hover .brand-emblem img{animation:none!important;transform:none!important}}

/* Keep the service offer and contact action near the top of a phone screen. */
@media(max-width:800px){body[data-page="home"] .hero-home{padding-top:28px;padding-bottom:50px}body[data-page="home"] .hero-home h1{margin:14px 0;max-width:15ch}body[data-page="home"] .hero-home .lead{margin:14px 0 18px}}

/* Automation intake: readable on desktop and phones, with a visible result. */
.intake{background:#f3f6fc;border-top:1px solid var(--line)}
.intake>form,.intake-result{max-width:980px}
.intake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.intake-grid label:first-child{grid-column:1/-1}
.intake-result{margin-top:28px;padding:28px;border:1px solid #aabde7;border-radius:18px;background:#fff}
.intake-result h3{margin-top:0}
.intake-result p{max-width:760px}
.intake-result .button{margin-top:10px}
@media(max-width:760px){.intake-grid{grid-template-columns:1fr}.intake-grid label:first-child{grid-column:auto}.intake-result{padding:20px}}

/* Browseable ideas; these are design examples, not active integrations. */
.automation-library{background:#fff}
.case-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.case-groups details{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:#fafcff}
.case-groups summary{font-size:18px}
.case-list{display:grid;gap:8px;margin-top:16px}
.case-list button{width:100%;text-align:left;background:#eaf0fc;color:var(--ink);padding:12px 16px;font-size:15px}
.case-list button:hover{background:#d9e4fc}
@media(max-width:760px){.case-groups{grid-template-columns:1fr}}

/* Tabular figures for high-precision UI metrics, prices and timestamps */
.number, .price, .owner-stat strong, .metric-stat-val, .console-event time, .price-tag, .stat-number, .flow-node span {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Automation Showcase & Turnkey Boxes Grid */
.box-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 24px; }
.box-filter-btn { background: #f1f5f9; color: var(--ink); border: 1px solid var(--line); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.box-filter-btn:hover, .box-filter-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.box-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.box-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; }
.box-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 35, 67, 0.08); border-color: #b8c8ec; }
.box-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.box-category-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); background: #eff6ff; padding: 3px 8px; border-radius: 6px; }
.box-price-tag { font-size: 15px; font-weight: 800; color: var(--ink); font-feature-settings: "tnum" 1; }
.box-title { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 0; color: var(--ink); }
.box-desc { font-size: 13px; color: #526078; line-height: 1.5; margin: 0; }
.box-meta-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.box-pill { font-size: 11px; background: #f8fafc; border: 1px solid var(--line); padding: 2px 8px; border-radius: 4px; color: #64748b; }
.box-action-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.box-timeframe { font-size: 12px; color: #10b981; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.box-select-btn { background: #edf2ff; color: var(--blue); border: 1px solid #c7d7fc; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 750; cursor: pointer; transition: all .15s ease; }
.box-select-btn:hover { background: var(--blue); color: #fff; }
.custom-order-banner { background: linear-gradient(135deg, #152a57, #101f3e); color: #fff; border-radius: 18px; padding: 28px; margin-top: 28px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.custom-order-banner h3 { margin: 0 0 8px; font-size: 20px; color: #fff; }
.custom-order-banner p { margin: 0; color: #bcd0ff; font-size: 14px; max-width: 650px; }

/* Business Solution Packages */
.packages-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 20px 0 40px; }
.package-card { background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; position: relative; transition: all .25s ease; box-shadow: 0 4px 14px rgba(20, 35, 67, 0.04); }
.package-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(20, 35, 67, 0.09); border-color: #b8c8ec; }
.package-card.featured { border: 2px solid var(--blue); background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); }
.package-badge { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 6px; background: #eaf0fc; color: var(--blue); }
.package-card.featured .package-badge { background: var(--blue); color: #fff; }
.package-name { font-size: 22px; font-weight: 800; margin: 8px 0 4px; color: var(--ink); line-height: 1.25; }
.package-target { font-size: 12.5px; color: #64748b; margin-bottom: 8px; font-weight: 600; }
.package-pain { font-size: 13.5px; color: #475569; line-height: 1.5; margin: 0 0 12px; background: #f8fafc; padding: 10px 14px; border-radius: 10px; border-left: 3px solid #cbd5e1; }
.package-card.featured .package-pain { border-left-color: var(--blue); background: #edf4ff; }
.package-price-wrap { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 14px; flex-wrap: wrap; }
.package-price { font-size: 32px; font-weight: 800; color: var(--ink); font-feature-settings: "tnum" 1; line-height: 1; }
.package-old-price { font-size: 16px; color: #94a3b8; text-decoration: line-through; }
.package-save-pill { font-size: 11px; font-weight: 750; color: #15803d; background: #dcfce7; padding: 3px 8px; border-radius: 6px; }
.package-features { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.package-features li { font-size: 13.5px; color: #334155; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.package-features li::before { content: "✓"; color: #16a34a; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.package-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.package-time { font-size: 12.5px; font-weight: 700; color: #10b981; }
.package-btn { background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease; border: 0; text-align: center; }
.package-btn:hover { background: #0b359e; }
.modules-catalog-header { margin: 48px 0 16px; padding-top: 28px; border-top: 1px dashed #cbd5e1; }
.modules-catalog-header h3 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.modules-catalog-header p { font-size: 14px; color: #526078; margin: 0; }

/* SLA Support & Guarantees Card */
.sla-guard-card { background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%); border: 1.5px solid #c7d7fc; border-radius: 20px; padding: 32px; margin: 30px 0 45px; position: relative; }
.sla-badge { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #dbeafe; color: var(--blue); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.sla-guard-card h3 { font-size: clamp(20px, 2.8vw, 26px); margin: 0 0 8px; color: var(--ink); }
.sla-lead { font-size: 14.5px; color: #475569; margin: 0 0 16px; max-width: 820px; line-height: 1.55; }
.sla-gift-tag { background: #dcfce7; border-left: 4px solid #16a34a; color: #14532d; font-size: 13.5px; padding: 10px 14px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; }
.sla-features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.sla-feat { display: flex; align-items: flex-start; gap: 12px; background: #fff; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); }
.sla-feat-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
.sla-feat strong { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.sla-feat small { display: block; font-size: 12px; color: #64748b; line-height: 1.4; }
.sla-guarantees-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #dbeafe; padding-top: 18px; }
.sla-guar-item { font-size: 12.5px; color: #334155; line-height: 1.45; }
.sla-guar-item strong { display: block; color: #15803d; font-size: 13.5px; margin-bottom: 4px; }

/* Interactive ROI & Cost-of-Inaction Calculator */
.roi-calculator-wrap { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 34px; margin: 40px 0; box-shadow: 0 6px 20px rgba(20, 35, 67, 0.04); }
.roi-head h3 { font-size: clamp(22px, 3vw, 28px); margin: 8px 0 6px; color: var(--ink); }
.roi-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; margin-top: 26px; align-items: stretch; }
.roi-controls { display: flex; flex-direction: column; justify-content: space-around; gap: 20px; }
.roi-slider-group { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 20px; }
.roi-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.roi-slider-header label { font-size: 13.5px; font-weight: 700; color: #334155; margin: 0; }
.roi-slider-header strong { font-size: 17px; font-weight: 800; color: var(--blue); font-feature-settings: "tnum" 1; }
.roi-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 5px; background: #cbd5e1; outline: none; margin: 8px 0; cursor: pointer; }
.roi-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform .15s ease; }
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-slider-limits { display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; font-weight: 600; }
.roi-result-card { background: linear-gradient(145deg, #152a57 0%, #101f3e 100%); color: #fff; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; box-shadow: 0 10px 25px rgba(21, 42, 87, 0.2); }
.roi-badge-danger { align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: rgba(239, 68, 68, 0.2); color: #fca5a5; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.35); }
.roi-loss-num { font-size: clamp(28px, 3.6vw, 36px); font-weight: 850; color: #f87171; font-feature-settings: "tnum" 1; line-height: 1.1; margin: 4px 0; }
.roi-loss-desc { font-size: 12.5px; color: #cbd5e1; line-height: 1.5; margin: 0; }
.roi-recommendation-box { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 16px; }
.roi-rec-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #93c5fd; font-weight: 700; margin-bottom: 4px; }
.roi-rec-name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.roi-rec-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; margin-bottom: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 10px; }
.roi-rec-metrics span { color: #94a3b8; display: block; font-size: 11px; }
.roi-rec-metrics strong { color: #4ade80; font-size: 14px; font-weight: 800; }
.roi-cta-btn { width: 100%; background: #2563eb; color: #fff; border: 0; padding: 12px 18px; border-radius: 8px; font-weight: 750; font-size: 13.5px; cursor: pointer; transition: background .15s ease; text-align: center; }
.roi-cta-btn:hover { background: #1d4ed8; }

/* SVG Dynamic Workflow Graph in Diagnostic Results */
.workflow-visual-preview { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 20px; margin: 20px 0 16px; }
.workflow-preview-head { margin-bottom: 14px; }
.workflow-preview-head h4 { margin: 4px 0 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.workflow-svg-graph { overflow: visible; display: block; margin: 8px auto; max-width: 760px; height: auto; }
.flow-link { stroke: #94a3b8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 5; fill: none; }
.flow-node-box { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04)); }
.flow-node-hub { fill: #eff6ff; stroke: var(--blue); stroke-width: 2; }
.flow-node-messenger { fill: #ecfdf5; stroke: #10b981; stroke-width: 2; }
.flow-node-title { font-family: var(--font-sans); font-size: 13px; font-weight: 800; fill: var(--ink); }
.hub-title { fill: var(--blue); }
.flow-node-sub { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: #64748b; }
.flow-pulse-dot { fill: var(--blue); filter: drop-shadow(0 0 4px var(--blue)); }

@media(max-width: 850px) {
  .sla-features-grid { grid-template-columns: 1fr; }
  .sla-guarantees-row { grid-template-columns: 1fr; }
  .roi-grid { grid-template-columns: 1fr; }
}

@media(max-width: 800px) {
  .box-grid { grid-template-columns: 1fr; }
  .packages-grid { grid-template-columns: 1fr; }
  .custom-order-banner { grid-template-columns: 1fr; }
}