/* ==========================================================================
   Service pages — creative layer
   Used by: wordpress-development, web-hosting, logo-design, chatbot-development
   Everything is scoped under .svc-original so nothing else on the site changes.
   Sections:  1 shared  ·  2 How we work (journey)  ·  3 Service details (bento)
              4 WordPress block builder  ·  5 Hosting mission control
              6 Logo lab  ·  7 Chatbot phone demo
   ========================================================================== */

/* ---------- 1. shared ---------- */
.svc-original .t-coral{ --tint:var(--coral);  --on:#fff;       --tx:#FF7A66; }
.svc-original .t-cobalt{ --tint:var(--cobalt); --on:#fff;       --tx:#9AA0FF; }
.svc-original .t-amber{ --tint:var(--amber);  --on:var(--ink); --tx:var(--amber); }
.svc-original .t-lime{ --tint:var(--lime);   --on:var(--ink); --tx:var(--lime); }
.svc-original .sx-head{ max-width:62ch; margin-bottom:2rem; }
.svc-original .sx-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.12; margin:0 0 .6rem; }
.svc-original .sx-head .lede{ margin:0; }
.svc-original .sx-chip{ display:inline-flex; align-items:center; gap:.45rem; font:500 .7rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:100px; background:color-mix(in srgb,var(--cobalt) 10%,transparent); color:var(--cobalt); margin-bottom:.8rem; }
.svc-original .sx-btn{ border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:100px; padding:.5rem 1rem; font-size:.85rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:.45rem; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.svc-original .sx-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-2px); }
.svc-original .sx-btn:focus-visible, .svc-original button:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; }

/* ---------- 2. How we work — journey ---------- */
.svc-original .jr-band{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); border-radius:28px; padding:clamp(1.6rem,4vw,3.2rem); isolation:isolate; }
.svc-original .jr-band::before{ content:""; position:absolute; z-index:-1; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,75,51,.35),transparent 65%); }
.svc-original .jr-band::after{ content:""; position:absolute; z-index:-1; left:-100px; bottom:-160px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(42,45,255,.35),transparent 65%); }
.svc-original .jr-band .svco-kicker{ color:var(--lime); }
.svc-original .jr-band .svco-kicker::before{ background:var(--lime); }
.svc-original .jr-band h2{ color:var(--paper); font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; margin:.2rem 0 .6rem; }
.svc-original .jr-band .lede{ color:rgba(242,245,236,.72); max-width:60ch; margin:0; }
.svc-original .jr{ list-style:none; margin:2.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; position:relative; }
.svc-original .jr::before{ content:""; position:absolute; left:28px; right:28px; top:27px; border-top:2px dashed rgba(242,245,236,.22); }
.svc-original .jr::after{ content:""; position:absolute; left:28px; top:26px; height:3px; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--coral),#6D72FF,var(--amber),var(--lime)); transition:width 2.2s var(--ease) .15s; }
.svc-original .jr.in::after{ width:calc(100% - 56px); }
.svc-original .jr-step{ position:relative; display:flex; flex-direction:column; }
.sx-js .svc-original .jr:not(.in) .jr-step{ opacity:0; transform:translateY(22px); }
.sx-js .svc-original .jr-step{ transition:opacity .6s ease calc(var(--i,0)*.16s), transform .7s var(--ease) calc(var(--i,0)*.16s); }
.svc-original .jr-ico{ position:relative; z-index:1; width:56px; height:56px; border-radius:50%; background:var(--tint); color:var(--on); display:grid; place-items:center;
  font-size:1.35rem; box-shadow:0 0 0 8px var(--ink); transition:transform .4s var(--ease); }
.svc-original .jr-step:hover .jr-ico{ transform:scale(1.12) rotate(-8deg); }
.svc-original .jr-card{ flex:1; margin-top:1.1rem; display:flex; flex-direction:column; gap:.35rem; padding:1.15rem 1.1rem 1.1rem;
  background:rgba(242,245,236,.05); border:1px solid rgba(242,245,236,.1); border-radius:18px; transition:transform .35s var(--ease), background .3s, border-color .3s; }
.svc-original .jr-step:hover .jr-card{ transform:translateY(-5px); background:rgba(242,245,236,.09); border-color:var(--tx); }
.svc-original .jr-no{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:2.7rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--tx); }
.svc-original .jr-card h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; color:var(--paper); margin:.2rem 0 0; }
.svc-original .jr-card p{ margin:0; font-size:.88rem; line-height:1.55; color:rgba(242,245,236,.7); }
.svc-original .jr-get{ margin-top:auto; padding-top:.9rem; font-size:.78rem; line-height:1.4; color:var(--paper); display:flex; flex-direction:column; gap:.15rem; }
.svc-original .jr-get b{ font:500 .66rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--tx); display:flex; align-items:center; gap:.4rem; }
.svc-original .jr-get b::after{ content:""; flex:1; height:1px; background:rgba(242,245,236,.14); }
@media (max-width:991px){
  .svc-original .jr{ grid-template-columns:1fr; gap:18px; }
  .svc-original .jr::before{ left:27px; right:auto; top:28px; bottom:28px; border-top:0; border-left:2px dashed rgba(242,245,236,.22); }
  .svc-original .jr::after{ left:26px; top:28px; width:3px; height:0; transition:height 2.2s var(--ease) .15s;
    background:linear-gradient(180deg,var(--coral),#6D72FF,var(--amber),var(--lime)); }
  .svc-original .jr.in::after{ width:3px; height:calc(100% - 56px); }
  .svc-original .jr-step{ display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:16px; align-items:start; }
  .svc-original .jr-card{ margin-top:0; }
}

/* ---------- 3. Service details — bento ---------- */
.svc-original .bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.svc-original .bn{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:.5rem; min-height:236px;
  padding:1.7rem 1.7rem 1.5rem; border-radius:24px; background:var(--card); border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.svc-original .bn::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5; transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,85%) var(--my,0%), color-mix(in srgb,var(--tint) 26%,transparent), transparent 62%); }
.svc-original .bn:hover{ transform:translateY(-6px); border-color:var(--tint); box-shadow:0 30px 44px -30px color-mix(in srgb,var(--tint) 75%,#000); }
.svc-original .bn:hover::before{ opacity:1; }
.svc-original .bn-no{ position:absolute; top:1.1rem; right:1.4rem; font:500 .72rem var(--font-mono); letter-spacing:.08em; color:var(--muted); }
.svc-original .bn-ico{ width:56px; height:56px; border-radius:17px; background:var(--tint); color:var(--on); display:grid; place-items:center; font-size:1.5rem;
  margin-bottom:.7rem; transform:rotate(-5deg); transition:transform .45s var(--ease); }
.svc-original .bn:hover .bn-ico{ transform:rotate(5deg) scale(1.1); }
.svc-original .bn h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.32rem; line-height:1.2; margin:0; }
.svc-original .bn p{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.55; max-width:48ch; }
.svc-original .bn-tags{ list-style:none; margin:auto 0 0; padding:1rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.svc-original .bn-tags li{ font:500 .68rem var(--font-mono); letter-spacing:.04em; text-transform:uppercase; padding:.3rem .65rem; border-radius:100px;
  border:1px dashed color-mix(in srgb,var(--tint) 60%,transparent); background:color-mix(in srgb,var(--tint) 9%,transparent); }
.svc-original .bn-2{ grid-column:span 2; }
.svc-original .bn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.svc-original .bn-dark p{ color:rgba(242,245,236,.72); }
.svc-original .bn-dark .bn-no{ color:rgba(242,245,236,.5); }
.svc-original .bn-dark .bn-tags li{ border-color:rgba(242,245,236,.28); background:rgba(242,245,236,.06); }
.svc-original .bn-dark h3{ color:var(--paper); }
@media (max-width:991px){ .svc-original .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } .svc-original .bn-2{ grid-column:span 2; } }
@media (max-width:640px){ .svc-original .bento{ grid-template-columns:1fr; } .svc-original .bn-2{ grid-column:auto; } .svc-original .bn{ min-height:0; } }

/* ---------- 4. WordPress block builder ---------- */
.svc-original .wpb{ display:grid; grid-template-columns:270px minmax(0,1fr); gap:20px; align-items:start; }
.svc-original .wpb-pal{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.svc-original .wpb-cap{ font:500 .68rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .2rem; }
.svc-original .wpb-blk{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; border:1px solid var(--line); background:var(--bg);
  border-radius:14px; padding:.55rem .7rem; font-size:.9rem; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.svc-original .wpb-blk:hover{ transform:translateX(3px); border-color:var(--ink); }
.svc-original .wpb-blk > i{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--paper-dim); color:var(--ink); transition:background .2s, color .2s; }
.svc-original .wpb-blk.on{ background:var(--card); border-color:var(--ink); }
.svc-original .wpb-blk.on > i{ background:var(--tint); color:var(--on); }
.svc-original .wpb-sw{ margin-left:auto; width:36px; height:20px; border-radius:20px; background:#CDD1C3; position:relative; flex:none; transition:background .2s; }
.svc-original .wpb-sw::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); }
.svc-original .wpb-blk.on .wpb-sw{ background:var(--ink); }
.svc-original .wpb-blk.on .wpb-sw::after{ transform:translateX(16px); }
.svc-original .wpb-acts{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.svc-original .wpb-stage{ background:var(--ink); border-radius:22px; overflow:hidden; box-shadow:0 36px 50px -36px rgba(18,20,15,.6); }
.svc-original .wpb-bar{ display:flex; align-items:center; gap:7px; padding:.75rem 1rem; }
.svc-original .wpb-bar i{ width:10px; height:10px; border-radius:50%; background:#3A3C33; }
.svc-original .wpb-bar i:first-child{ background:var(--amber); }
.svc-original .wpb-url{ margin-left:.8rem; flex:1; background:#262920; color:rgba(242,245,236,.55); font:500 .72rem var(--font-mono); border-radius:100px; padding:.32rem .9rem; }
.svc-original .wpb-page{ background:#fff; margin:0 .8rem; border-radius:12px 12px 0 0; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:400px; }
.svc-original .wpb-empty{ margin:auto; color:var(--muted); font-size:.9rem; text-align:center; padding:2rem; }
.svc-original .wpb-foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.85rem 1.1rem; color:rgba(242,245,236,.75); font-size:.8rem; }
.svc-original .wpb-meter{ flex:1 1 180px; height:8px; border-radius:8px; background:rgba(242,245,236,.14); overflow:hidden; }
.svc-original .wpb-meter i{ display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--lime),var(--amber)); transition:width .5s var(--ease); }
.svc-original .wpb-foot b{ color:var(--lime); font-weight:600; }
.svc-original .pb{ border-radius:10px; animation:pbIn .55s var(--ease) both; color:#1d201a; }
@keyframes pbIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
.svc-original .ln{ display:block; height:7px; border-radius:7px; background:#E3E1D6; margin-top:6px; }
.svc-original .ln.s{ width:55%; } .svc-original .ln.m{ width:78%; }
.svc-original .pb-hero{ background:var(--coral); color:#fff; padding:1.5rem 1.3rem; position:relative; overflow:hidden; }
.svc-original .pb-hero::after{ content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.18); }
.svc-original .pb-hero b{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:1.4rem; line-height:1.15; max-width:16ch; }
.svc-original .pb-hero .ln{ background:rgba(255,255,255,.55); }
.svc-original .pb-hero em{ display:inline-block; margin-top:.8rem; background:#fff; color:var(--coral); font-style:normal; font-weight:600; font-size:.72rem; padding:.3rem .8rem; border-radius:100px; }
.svc-original .pb-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.svc-original .pb-svc div{ background:#F4F3EA; border-radius:10px; padding:.7rem; }
.svc-original .pb-svc div::before{ content:""; display:block; width:22px; height:22px; border-radius:50%; background:var(--cobalt); margin-bottom:.4rem; }
.svc-original .pb-svc div:nth-child(2)::before{ background:var(--amber); } .svc-original .pb-svc div:nth-child(3)::before{ background:var(--coral); }
.svc-original .pb-shop{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.svc-original .pb-shop div{ border:1px solid #ECEBE0; border-radius:10px; padding:.45rem; }
.svc-original .pb-shop div::before{ content:""; display:block; aspect-ratio:1; border-radius:7px; background:linear-gradient(135deg,var(--amber),var(--coral)); }
.svc-original .pb-shop div:nth-child(2)::before{ background:linear-gradient(135deg,var(--cobalt),#8C93FF); }
.svc-original .pb-shop div:nth-child(3)::before{ background:linear-gradient(135deg,var(--lime),#7BD08A); }
.svc-original .pb-shop div:nth-child(4)::before{ background:linear-gradient(135deg,#7A4B8C,#C98BE0); }
.svc-original .pb-quote{ background:color-mix(in srgb,var(--cobalt) 9%,#fff); padding:1rem; display:flex; gap:.8rem; align-items:center; }
.svc-original .pb-quote::before{ content:"“"; flex:none; width:38px; height:38px; border-radius:50%; background:var(--cobalt); color:#fff; display:grid; place-items:center; font:700 1.6rem/1 Georgia,serif; padding-top:.25rem; }
.svc-original .pb-quote div{ flex:1; }
.svc-original .pb-blog{ display:grid; gap:8px; }
.svc-original .pb-blog div{ display:flex; gap:.7rem; align-items:center; background:#F4F3EA; border-radius:10px; padding:.5rem; }
.svc-original .pb-blog div::before{ content:""; flex:none; width:48px; height:36px; border-radius:7px; background:var(--lime); }
.svc-original .pb-blog div:nth-child(2)::before{ background:var(--amber); }
.svc-original .pb-blog div span{ flex:1; }
.svc-original .pb-form{ border:1px dashed #CFCDBF; padding:.9rem; display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; }
.svc-original .pb-form .ln{ height:26px; margin:0; background:#F0EFE6; border-radius:8px; width:auto; }
.svc-original .pb-form em{ background:var(--ink); color:#fff; font-style:normal; font-size:.72rem; font-weight:600; padding:.45rem .9rem; border-radius:100px; }
@media (max-width:860px){ .svc-original .wpb{ grid-template-columns:1fr; } .svc-original .wpb-pal{ display:grid; grid-template-columns:1fr 1fr; } .svc-original .wpb-cap, .svc-original .wpb-acts{ grid-column:1/-1; } }
@media (max-width:520px){ .svc-original .wpb-pal{ grid-template-columns:1fr; } .svc-original .pb-shop{ grid-template-columns:repeat(2,1fr); } .svc-original .pb-form{ grid-template-columns:1fr; } }

/* ---------- 5. Hosting mission control ---------- */
.svc-original .mc{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); border-radius:28px; padding:clamp(1.2rem,3vw,2.1rem); isolation:isolate; }
.svc-original .mc::before{ content:""; position:absolute; z-index:-1; inset:auto -80px -140px auto; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(212,255,92,.18),transparent 65%); transition:background .6s; }
.svc-original .mc[data-state="down"]::before{ background:radial-gradient(circle,rgba(255,75,51,.35),transparent 65%); }
.svc-original .mc[data-state="fix"]::before{ background:radial-gradient(circle,rgba(255,182,39,.3),transparent 65%); }
.svc-original .mc-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; }
.svc-original .mc-led{ width:13px; height:13px; border-radius:50%; background:var(--lime); animation:mcPulse 2s infinite; flex:none; }
.svc-original .mc[data-state="down"] .mc-led{ background:var(--coral); animation-duration:.6s; }
.svc-original .mc[data-state="fix"] .mc-led{ background:var(--amber); animation-duration:1s; }
@keyframes mcPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent), 0 0 0 0 rgba(212,255,92,.55); } 70%,100%{ box-shadow:0 0 0 12px rgba(212,255,92,0); } }
.svc-original .mc-status{ font-family:'Fraunces',serif; font-size:1.35rem; }
.svc-original .mc-badge{ font:500 .64rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; padding:.25rem .6rem; border-radius:100px; border:1px solid rgba(242,245,236,.25); color:rgba(242,245,236,.7); }
.svc-original .mc-btn{ margin-left:auto; border:0; cursor:pointer; background:var(--coral); color:#fff; font-weight:600; font-size:.88rem; padding:.65rem 1.2rem; border-radius:100px; display:inline-flex; align-items:center; gap:.5rem; transition:transform .2s, background .2s, opacity .2s; }
.svc-original .mc-btn:hover{ transform:translateY(-2px); background:#ff6550; }
.svc-original .mc-btn[disabled]{ opacity:.55; cursor:progress; transform:none; }
.svc-original .mc-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:1.4rem 0 1.2rem; }
.svc-original .mc-card{ background:rgba(242,245,236,.06); border:1px solid rgba(242,245,236,.1); border-radius:18px; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.svc-original .mc-card small{ font:500 .64rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(242,245,236,.55); display:flex; align-items:center; gap:.4rem; }
.svc-original .mc-card small i{ color:var(--lime); font-size:.9rem; }
.svc-original .mc-card b{ font-family:'Fraunces',serif; font-weight:500; font-size:1.25rem; }
.svc-original .mc-card span{ font-size:.78rem; color:rgba(242,245,236,.6); }
.svc-original .mc-bars{ display:flex; gap:3px; height:30px; align-items:flex-end; margin-top:.4rem; }
.svc-original .mc-bars i{ flex:1; height:100%; border-radius:2px; background:var(--lime); opacity:.85; transform-origin:bottom; animation:mcBar .6s var(--ease) both; animation-delay:calc(var(--n)*18ms); }
.svc-original .mc-bars i.blip{ background:var(--amber); height:55%; }
.svc-original .mc-bars i.now{ transition:background .3s, height .3s; }
.svc-original .mc[data-state="down"] .mc-bars i.now{ background:var(--coral); height:25%; }
@keyframes mcBar{ from{ transform:scaleY(.1); opacity:0; } }
.svc-original .mc-spark{ width:100%; height:34px; margin-top:.3rem; }
.svc-original .mc-spark path{ fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s; }
.svc-original .mc[data-state="down"] .mc-spark path{ stroke:var(--coral); }
.svc-original .mc-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.svc-original .mc-step{ position:relative; border:1px dashed rgba(242,245,236,.25); border-radius:16px; padding:.95rem 1rem; display:flex; flex-direction:column; gap:.15rem; transition:all .4s var(--ease); }
.svc-original .mc-step > i{ font-size:1.3rem; color:rgba(242,245,236,.55); transition:color .3s; }
.svc-original .mc-step b{ font-family:'Fraunces',serif; font-weight:500; font-size:1.02rem; }
.svc-original .mc-step span{ font-size:.8rem; color:rgba(242,245,236,.62); line-height:1.45; }
.svc-original .mc-step.run{ border-style:solid; border-color:rgba(212,255,92,.4); }
.svc-original .mc-step.run > i{ color:var(--lime); }
.svc-original .mc-step.active{ border-style:solid; border-color:var(--amber); background:rgba(255,182,39,.12); transform:translateY(-4px); }
.svc-original .mc-step.active > i{ color:var(--amber); }
.svc-original .mc-step.done{ border-style:solid; border-color:var(--lime); background:rgba(212,255,92,.08); }
.svc-original .mc-step.done > i{ color:var(--lime); }
.svc-original .mc-log{ margin:1.1rem 0 0; min-height:5.6em; font:400 .78rem/1.7 var(--font-mono); color:rgba(242,245,236,.75); }
.svc-original .mc-log div{ animation:pbIn .4s var(--ease) both; }
.svc-original .mc-log time{ color:var(--lime); margin-right:.6rem; }
@media (max-width:900px){ .svc-original .mc-grid, .svc-original .mc-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } .svc-original .mc-btn{ margin-left:0; } }
@media (max-width:480px){ .svc-original .mc-grid, .svc-original .mc-steps{ grid-template-columns:1fr; } }

/* ---------- 6. Logo lab ---------- */
.svc-original .ll{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:20px; align-items:start; }
.svc-original .ll-ctl{ background:var(--card); border:1px solid var(--line); border-radius:24px; padding:1.3rem; display:flex; flex-direction:column; gap:1.1rem; }
.svc-original .ll-ctl label, .svc-original .ll-cap{ font:500 .68rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4rem; }
.svc-original .ll-ctl input[type=text]{ width:100%; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:.65rem .9rem; font:600 1rem 'Work Sans',sans-serif; color:var(--ink); }
.svc-original .ll-ctl input[type=text]:focus{ outline:2px solid var(--cobalt); outline-offset:1px; }
.svc-original .ll-opts{ display:flex; flex-wrap:wrap; gap:.45rem; }
.svc-original .ll-opt{ border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:12px; min-width:46px; height:46px; padding:0 .8rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; transition:border-color .2s, background .2s, transform .2s; }
.svc-original .ll-opt:hover{ border-color:var(--ink); transform:translateY(-2px); }
.svc-original .ll-opt.on{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.svc-original .ll-opt svg{ width:26px; height:26px; }
.svc-original .ll-sw{ width:34px; height:34px; min-width:0; padding:0; border-radius:50%; background:var(--c); border:3px solid var(--card); box-shadow:0 0 0 1px var(--line); }
.svc-original .ll-sw.on{ background:var(--c); box-shadow:0 0 0 2px var(--ink); }
.svc-original .ll-sw:hover{ transform:scale(1.12); }
.svc-original .ll-view{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.svc-original .ll-main{ min-height:260px; border-radius:24px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:1.1rem; padding:1.5rem; overflow:hidden; position:relative;
  background-image:radial-gradient(rgba(18,20,15,.09) 1px,transparent 1px); background-size:18px 18px; }
.svc-original .ll-mark svg{ width:clamp(84px,12vw,128px); height:auto; display:block; transition:transform .5s var(--ease); }
.svc-original .ll-main:hover .ll-mark svg{ transform:rotate(-8deg) scale(1.06); }
.svc-original .ll-word{ font-size:clamp(1.8rem,4.2vw,3rem); font-weight:600; line-height:1; letter-spacing:-.01em; word-break:break-word; transition:color .3s; }
.svc-original .ll-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.svc-original .ll-tile{ border-radius:20px; min-height:150px; padding:1rem; display:flex; align-items:center; justify-content:center; gap:.6rem; overflow:hidden; border:1px solid var(--line); position:relative; }
.svc-original .ll-tile .ll-mark svg{ width:40px; }
.svc-original .ll-tile .ll-word{ font-size:1.15rem; }
.svc-original .ll-inv{ background:var(--c); color:#fff; border-color:transparent; }
.svc-original .ll-inv .ll-word, .svc-original .ll-inv .ll-mark{ color:#fff !important; }
.svc-original .ll-card{ background:#fff; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:1.1rem; aspect-ratio:1.75; min-height:0; box-shadow:0 18px 26px -20px rgba(18,20,15,.5); transform:rotate(-2deg); transition:transform .4s var(--ease); }
.svc-original .ll-card:hover{ transform:rotate(1deg) scale(1.03); }
.svc-original .ll-card .ln{ width:60%; } .svc-original .ll-card .ln.s{ width:38%; }
.svc-original .ll-card .brandrow{ display:flex; align-items:center; gap:.5rem; }
.svc-original .ll-av{ background:var(--bg); }
.svc-original .ll-av .circle{ width:96px; height:96px; border-radius:50%; background:var(--c); display:grid; place-items:center; box-shadow:0 14px 22px -14px var(--c); color:#fff; }
.svc-original .ll-av .circle svg{ width:54px; height:54px; }
.svc-original .ll-scale{ display:flex; align-items:flex-end; gap:clamp(.8rem,3vw,2rem); background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1rem 1.3rem; flex-wrap:wrap; }
.svc-original .ll-scale div{ display:flex; flex-direction:column; align-items:center; gap:.4rem; font:500 .64rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.svc-original .ll-scale svg{ display:block; }
.svc-original .ll-scale .ll-cap{ margin:0; align-self:center; }
@media (max-width:900px){ .svc-original .ll{ grid-template-columns:1fr; } }
@media (max-width:560px){ .svc-original .ll-tiles{ grid-template-columns:1fr; } .svc-original .ll-main{ flex-direction:column; text-align:center; } }

/* ---------- 7. Chatbot phone demo ---------- */
.svc-original .cbx{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.svc-original .cbx > *{ min-width:0; }
.svc-original .cbx-tabs{ display:inline-flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:100px; padding:4px; margin-bottom:1rem; }
.svc-original .cbx-tab{ border:0; background:none; border-radius:100px; padding:.45rem 1rem; font-size:.85rem; font-weight:600; color:var(--ink-soft); cursor:pointer; display:inline-flex; gap:.4rem; align-items:center; transition:background .2s, color .2s; }
.svc-original .cbx-tab.on{ background:var(--ink); color:var(--bg); }
.svc-original .cbx-phone{ background:var(--ink); border-radius:42px; padding:12px; box-shadow:0 50px 60px -40px rgba(18,20,15,.7); width:100%; max-width:400px; position:relative; }
.svc-original .cbx-phone::before{ content:""; position:absolute; top:20px; left:50%; width:84px; height:6px; margin-left:-42px; border-radius:6px; background:#2b2e25; z-index:2; }
.svc-original .cbx-screen{ background:var(--bg); border-radius:31px; overflow:hidden; height:580px; display:flex; flex-direction:column; }
.svc-original .cbx-hd{ display:flex; align-items:center; gap:.7rem; padding:2rem 1.1rem .9rem; background:var(--coral); color:#fff; transition:background .4s; }
.svc-original .cbx-av{ width:40px; height:40px; border-radius:50%; background:#fff; color:var(--coral); display:grid; place-items:center; font-size:1.15rem; flex:none; transition:color .4s; }
.svc-original .cbx-hd b{ display:block; font-size:.98rem; line-height:1.2; }
.svc-original .cbx-hd small{ font-size:.74rem; opacity:.85; display:flex; align-items:center; gap:.35rem; }
.svc-original .cbx-hd small::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); }
.svc-original .cbx[data-ch="wa"] .cbx-hd{ background:#075E54; }
.svc-original .cbx[data-ch="wa"] .cbx-av{ color:#075E54; }
.svc-original .cbx .vd-log{ flex:1; max-height:none; margin:0; padding:1rem 1rem .5rem; overflow-y:auto; scroll-behavior:smooth; }
.svc-original .cbx[data-ch="wa"] .vd-log{ background:#ECE5DD; }
.svc-original .cbx .vd-msg{ position:relative; max-width:86%; animation:pbIn .35s var(--ease) both; box-shadow:0 1px 1px rgba(18,20,15,.07); }
.svc-original .cbx[data-ch="wa"] .vd-msg.user{ background:#DCF8C6; color:var(--ink); }
.svc-original .cbx[data-ch="wa"] .vd-msg.user::after{ content:"✓✓"; color:#34B7F1; font-size:.62rem; margin-left:.4rem; letter-spacing:-2px; }
.svc-original .cbx[data-ch="wa"] .vd-msg.bot{ background:#fff; border-color:transparent; }
.svc-original .cbx .vd-msg.typing{ padding:.7rem .9rem; }
.svc-original .cbx .dots{ display:inline-flex; gap:4px; }
.svc-original .cbx .dots i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:cbDot 1s infinite; }
.svc-original .cbx .dots i:nth-child(2){ animation-delay:.15s; } .svc-original .cbx .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes cbDot{ 0%,60%,100%{ transform:none; opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.svc-original .cbx .cb-chips{ flex-wrap:nowrap; overflow-x:auto; padding:.5rem 1rem; margin:0; scrollbar-width:none; }
.svc-original .cbx .cb-chips::-webkit-scrollbar{ display:none; }
.svc-original .cbx .cb-chips button{ flex:none; white-space:nowrap; border-color:var(--ink); background:var(--card); font-weight:500; }
.svc-original .cbx .cb-chips button:hover{ background:var(--ink); color:var(--bg); }
.svc-original .cbx .vd-type-form{ padding:.4rem 1rem 1rem; flex:none; }
.svc-original .cbx .vd-type-form button{ background:var(--coral); color:#fff; }
.svc-original .cbx[data-ch="wa"] .vd-type-form button{ background:#075E54; }
.svc-original .cbx .vd-type-form{ display:flex; align-items:center; gap:.5rem; }
.svc-original .cbx .vd-type-form input{ flex:1; min-width:0; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:100px; padding:.7rem 1.1rem; font:inherit; font-size:.92rem; }
.svc-original .cbx .vd-type-form input:focus{ outline:2px solid var(--cobalt); outline-offset:1px; }
.svc-original .cbx .vd-type-form button{ flex:none; width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; transition:transform .2s; }
.svc-original .cbx .vd-type-form button:hover{ transform:scale(1.08) rotate(-8deg); }
.svc-original .cbx-note{ font-size:.78rem; color:var(--ink-soft); margin:1rem 0 0; text-align:center; }
.svc-original .lead{ background:var(--card); border:1px solid var(--line); border-radius:26px; padding:1.5rem; position:relative; overflow:hidden; }
.svc-original .lead::before{ content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--amber) 30%,transparent),transparent 70%); }
.svc-original .lead-hd{ display:flex; align-items:center; gap:.6rem; font-family:'Fraunces',serif; font-size:1.25rem; position:relative; }
.svc-original .lead-hd .pulse{ width:10px; height:10px; border-radius:50%; background:var(--coral); animation:mcPulse 2s infinite; }
.svc-original .lead-sub{ margin:.2rem 0 1.2rem; font-size:.86rem; color:var(--ink-soft); position:relative; }
.svc-original .lead dl{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:.2rem 1rem; margin:0; position:relative; }
.svc-original .lead dt{ font:500 .66rem var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:.8rem 0; border-top:1px solid var(--line); }
.svc-original .lead dd{ margin:0; padding:.7rem 0; border-top:1px solid var(--line); font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.svc-original .lead dd.flash{ animation:ldFlash .9s ease; }
@keyframes ldFlash{ 0%{ background:color-mix(in srgb,var(--lime) 70%,transparent); } 100%{ background:transparent; } }
.svc-original .lead-meter{ width:90px; height:8px; border-radius:8px; background:var(--paper-dim); overflow:hidden; }
.svc-original .lead-meter i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--coral)); border-radius:8px; transition:width .6s var(--ease); }
.svc-original .lead-log{ list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; position:relative; }
.svc-original .lead-log li{ font:500 .66rem var(--font-mono); letter-spacing:.05em; text-transform:uppercase; padding:.3rem .65rem; border-radius:100px; background:color-mix(in srgb,var(--cobalt) 10%,transparent); color:var(--cobalt); animation:pbIn .4s var(--ease) both; }
.svc-original .lead-log li.empty{ background:none; color:var(--muted); padding-left:0; }
@media (max-width:900px){ .svc-original .cbx{ grid-template-columns:1fr; } .svc-original .cbx-phone{ margin-inline:auto; } }
@media (max-width:480px){ .svc-original .cbx-screen{ height:520px; } .svc-original .lead dl{ grid-template-columns:90px 1fr; } }

@media (prefers-reduced-motion:reduce){
  .svc-original *, .svc-original *::before, .svc-original *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .sx-js .svc-original .jr:not(.in) .jr-step{ opacity:1; transform:none; }
}