:root{--ink:#111927;--paper:#fffdf9;--line:#e6e1da;--orange:#ff5b0b;--blue:#1677f8;--green:#69ad2f;--pink:#ef2d73;--purple:#7927ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",sans-serif}a{text-decoration:none;color:inherit}button{font:inherit}.wrap{width:min(1500px,calc(100% - 48px));margin:auto}

/* header */
.header{height:74px;background:rgba(255,253,249,.95);backdrop-filter:blur(14px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}.header-inner{height:100%;display:flex;align-items:center}.brand{display:flex;align-items:baseline;gap:12px}.brand b{font-size:46px;letter-spacing:-.07em}.brand span{font-weight:800;font-size:17px}.nav{display:flex;gap:34px;margin-left:95px}.nav a{font:700 9px "IBM Plex Mono",monospace;padding:30px 0 24px;position:relative}.nav a:after{content:"";position:absolute;bottom:15px;left:0;right:100%;height:2px;background:var(--orange);transition:.18s}.nav a:hover:after{right:0}.header-actions{margin-left:auto;display:flex;gap:8px}.langs{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}.langs button{border:0;background:#fff;padding:9px 10px;font:700 8px "IBM Plex Mono",monospace}.langs button.active{background:var(--ink);color:#fff}.cabinet-btn,.cart-btn{border:1px solid var(--line);background:#fff;border-radius:5px;padding:0 14px;height:38px;font:700 9px "IBM Plex Mono",monospace}.cabinet-btn span{color:var(--orange)}

/* hero */
.hero{padding:46px 0 38px;background:linear-gradient(180deg,#fffdf9,#fff9f2)}.hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:45px;align-items:center}.eyebrow{font:700 9px "IBM Plex Mono",monospace;color:#59636e}.hero-copy h1{font-size:clamp(54px,4.7vw,83px);line-height:.91;letter-spacing:-.067em;margin:18px 0}.hero-copy h1 em{font-style:normal;color:var(--orange)}.hero-points{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:600 7px "IBM Plex Mono",monospace;color:#737d87}.hero-points i{width:5px;height:5px;border-radius:50%;background:var(--orange)}.hero-buttons{display:flex;gap:10px;margin-top:24px}.btn{height:48px;padding:0 19px;border-radius:5px;display:flex;align-items:center;gap:23px;border:1px solid var(--line);font-size:12px;font-weight:700}.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}.btn.secondary{background:#fff}
.hero-cards{position:relative;height:470px;display:flex;gap:14px;align-items:center}.hero-card{width:31.7%;height:430px;border-radius:20px;overflow:hidden;position:relative;color:#fff;box-shadow:0 18px 45px rgba(17,25,39,.12);transition:transform .2s}.hero-card:hover{transform:scale(1.025)}.hc-print{background:linear-gradient(180deg,#ff711c,#ff5b0b)}.hc-web{background:linear-gradient(180deg,#1b82ff,#0d6ddd)}.hc-host{background:linear-gradient(180deg,#83b923,#5a8f10)}.hero-label{position:absolute;z-index:3;left:18px;top:17px}.hero-label span{font:700 12px "IBM Plex Mono",monospace}.hero-label h2{font-size:36px;margin:7px 0 5px}.hero-label small{font:600 8px "IBM Plex Mono",monospace}.hero-art{position:absolute;inset:94px 0 0;background-size:cover;background-position:center}.hero-print-art{background-image:url("../images/hero-print.jpg")}.hero-web-art{background-image:url("../images/hero-web.jpg")}.hero-host-art{background-image:url("../images/hero-host.jpg")}.circle{position:absolute;z-index:5;left:20px;bottom:20px;width:48px;height:48px;border:2px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;font-size:20px;transition:.18s}.circle:hover{background:#fff;color:var(--ink);transform:scale(1.08)}.signal{position:absolute;z-index:4;inset:70px 0 auto;width:100%;height:345px;pointer-events:none}.signal path{fill:none;stroke:#ff6a16;stroke-width:5;filter:drop-shadow(0 0 3px #fff)}

/* benefits */
.benefits{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}.benefits-grid{display:grid;grid-template-columns:1.25fr repeat(5,1fr)}.benefits-grid article{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:4px 14px;border-right:1px solid var(--line)}.benefits-grid article:last-child{border:0}.icon{width:39px;height:39px;border:2px solid #818b95;border-radius:10px;display:grid;place-items:center}.purple{color:var(--purple);border-color:var(--purple)}.blue{color:var(--blue);border-color:var(--blue)}.cyan{color:#1596d4;border-color:#1596d4}.green{color:var(--green);border-color:var(--green)}.orange{color:var(--orange);border-color:var(--orange)}.benefits-grid b{font:700 8px/1.4 "IBM Plex Mono",monospace}.benefits-grid p{font-size:9px;line-height:1.4;color:#66717c;margin:5px 0 0}

/* services */
.services{padding:28px 0 60px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.service-card{height:560px;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden;position:relative}.service-head{padding:20px 22px 0;position:relative;z-index:3}.service-head>span{font:700 11px "IBM Plex Mono",monospace}.service-head h2{font-size:31px;margin:8px 0}.service-head p{font-size:11px;line-height:1.45;min-height:48px}.service-card ul{position:relative;z-index:3;list-style:none;padding:0 22px;margin:10px 0}.service-card li{font-size:10px;margin:8px 0;padding-left:14px;position:relative}.service-card li:before{content:"+";position:absolute;left:0;font-weight:800}.service-art{position:absolute;left:0;right:0;bottom:0;height:52%;background-size:cover;background-position:center}.service-art:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.3) 18%,transparent 46%)}.srv-print{background-image:url("../images/srv-print.jpg")}.srv-web{background-image:url("../images/srv-web.jpg")}.srv-host{background-image:url("../images/srv-host.jpg")}.srv-shop{background-image:url("../images/srv-shop.jpg")}.service-btn{position:absolute;z-index:5;left:22px;bottom:18px;height:42px;padding:0 17px;border:1px solid currentColor;background:#fff;border-radius:5px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;transition:.18s}.service-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(17,25,39,.1)}.print-card .service-head>span,.print-card h2,.print-card li:before,.print-card .service-btn{color:var(--orange)}.web-card .service-head>span,.web-card h2,.web-card li:before,.web-card .service-btn{color:var(--blue)}.host-card .service-head>span,.host-card h2,.host-card li:before,.host-card .service-btn{color:var(--green)}.shop-card .service-head>span,.shop-card h2,.shop-card li:before,.shop-card .service-btn{color:var(--pink)}

/* plans */
.plans-section{padding:75px 0 45px;background:#f7f4ed}.plans-title{margin-bottom:32px}.plans-title span{font:700 9px "IBM Plex Mono",monospace;color:var(--blue)}.plans-title h2{font-size:clamp(42px,4.3vw,67px);margin:10px 0 5px;letter-spacing:-.055em}.plans-title p{font-size:13px;color:#65717d}.plans-grid{display:grid;grid-template-columns:1.05fr repeat(3,1fr) 1.05fr;gap:9px}.plans-intro,.plan,.infra-status{min-height:395px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:19px;position:relative}.plans-intro>span,.infra-status>span{font:700 8px "IBM Plex Mono",monospace;color:var(--blue)}.plans-intro h3{font-size:23px;margin:14px 0}.plans-intro p{font-size:11px;color:#68727d}.server-ghost{position:absolute;left:38px;bottom:35px;width:120px;opacity:.17}.server-ghost i{display:block;height:25px;border:2px solid #6b7680;border-radius:4px;margin:5px 0}
.plan{--tone:var(--orange);transition:.2s;overflow:hidden}.plan:before{content:"";position:absolute;inset:0;background:var(--tone);opacity:0;transition:.18s;pointer-events:none}.plan:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(17,25,39,.08)}.plan:hover:before{opacity:.10}.plan.basic{--tone:var(--orange)}.plan.pro{--tone:var(--blue)}.plan.premium{--tone:var(--green)}.plan>span{font:700 10px "IBM Plex Mono",monospace;color:var(--tone)}.plan>p{font-size:10px;color:#68727d;min-height:39px}.plan h3{font-size:32px;margin:10px 0 14px}.plan h3 small{font-size:9px}.plan dl{margin:0}.plan dl>div{display:flex;justify-content:space-between;border-top:1px solid #eee9e3;padding:7px 0;font-size:9px}.plan dd{margin:0;font-weight:700}.plan button{position:absolute;left:15px;right:15px;bottom:15px;height:42px;border:1px solid var(--tone);background:#fff;color:var(--tone);border-radius:4px;font-weight:700;font-size:10px;cursor:pointer;transition:.18s}.plan button:hover{background:var(--tone);color:#fff}.popular{position:absolute;right:0;top:0;background:var(--blue);color:#fff;padding:6px 8px;border-radius:0 8px 0 8px;font:700 6px "IBM Plex Mono",monospace}
.infra-status h3{font-size:13px;margin:14px 0}.infra-status>div{display:grid;grid-template-columns:17px 1fr auto;gap:7px;align-items:center;border-top:1px solid #eee;padding:9px 0}.infra-status i{width:15px;height:15px;border-radius:50%;background:#dff4d5;position:relative}.infra-status i:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#56a832;font-size:8px;font-weight:800}.infra-status b{font-size:9px}.infra-status em{font-style:normal;font-size:8px;color:var(--green)}

/* sticker shop */
.sticker-shop{padding:24px 0 28px;background:#fff}.sticker-shell{display:grid;grid-template-columns:255px 1fr;gap:15px;border:1px solid var(--line);border-radius:9px;padding:16px}.sticker-intro{padding:7px 10px}.sticker-intro>span{font:700 8px "IBM Plex Mono",monospace;color:var(--orange)}.sticker-intro h2{font-size:25px;line-height:1.05;margin:12px 0}.sticker-intro p{font-size:11px;color:#68727d;line-height:1.5}.sticker-intro a{font-size:10px;color:var(--pink);font-weight:700}.sticker-carousel{position:relative;display:flex;align-items:center;min-width:0}.viewport{overflow:hidden;width:100%}.track{display:flex;gap:8px;transition:transform .25s}.sticker-card{flex:0 0 calc((100% - 32px)/5);min-width:0;border:1px solid var(--line);border-radius:7px;padding:8px;background:#fff;transition:.18s}.sticker-card:hover{border-color:var(--pink)}.sticker-card img{width:100%;height:132px;object-fit:cover;border-radius:5px}.sticker-card b{display:block;font-size:9px;margin:8px 0 2px}.sticker-card span{font-size:10px}.sticker-card button{width:100%;height:31px;border:1px solid var(--pink);color:var(--pink);background:#fff;border-radius:4px;font-size:9px;font-weight:700;margin-top:7px}.sticker-card button:hover{background:var(--pink);color:#fff}.arrow{position:absolute;z-index:5;top:42%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #d9d4ce;background:#fff;font-size:27px}.prev{left:-14px}.next{right:-14px}

/* Client OS */
.client-os{padding:0 0 30px}.client-shell{display:grid;grid-template-columns:300px 1fr;gap:16px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:20px}.client-copy>span{font:700 8px "IBM Plex Mono",monospace;color:var(--purple)}.client-copy h2{font-size:34px;line-height:1.02;margin:12px 0}.client-copy p{font-size:11px;line-height:1.5;color:#68727d}.client-copy ul{list-style:none;padding:0;margin:20px 0}.client-copy li{font-size:10px;margin:12px 0;padding-left:19px;position:relative}.client-copy li:before{content:"✓";position:absolute;left:0;color:var(--purple);font-weight:800}.client-copy button{background:var(--purple);color:#fff;border:0;padding:13px 18px;border-radius:5px;font-size:10px;font-weight:700}
.os-panel{border:1px solid var(--line);border-radius:8px;overflow:hidden}.os-panel>header{height:54px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--line)}.os-brand{font-size:22px;font-weight:800}.os-brand span{font:600 7px "IBM Plex Mono",monospace}.os-panel>header h3{margin-left:55px;font-size:12px}.os-user{margin-left:auto;font-size:9px}.os-body{display:grid;grid-template-columns:145px 1fr;min-height:410px}.os-body>aside{padding:12px;background:#f6f5f2;border-right:1px solid var(--line)}.os-body>aside a{display:block;padding:9px;border-radius:4px;font-size:9px;margin-bottom:3px}.os-body>aside a.active{background:var(--purple);color:#fff}.os-body>main{padding:13px}.stats-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.stats-cards article{min-height:86px;border:1px solid var(--line);border-radius:5px;padding:10px}.stats-cards small{font-size:8px;color:#68727d}.stats-cards b{display:block;font-size:20px;margin:7px 0}.stats-cards a{font-size:7px;color:var(--blue);font-weight:700}.dashboard-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:7px;margin-top:8px}.dashboard-grid>section{border:1px solid var(--line);border-radius:5px;padding:12px}.dashboard-grid h4{font-size:11px;margin:0 0 10px}.activity>div{display:grid;grid-template-columns:10px 1fr 90px 58px;gap:7px;align-items:center;padding:8px 0;border-top:1px solid #eee}.activity i{width:8px;height:8px;border-radius:50%}.p1{background:#ff3b82}.p2{background:#7827ef}.p3{background:#1677f8}.p4{background:#50b441}.p5{background:#ff8b1f}.activity b,.activity span,.activity em{font-size:7px}.activity span{color:#727c86}.activity em{font-style:normal;background:#e3f6d9;color:#4b9229;padding:4px;border-radius:3px;text-align:center}.activity em.blue-status{background:#e7f1ff;color:#3176bb}.usage label{font-size:8px;display:flex;justify-content:space-between;margin:9px 0 4px}.progress{height:6px;background:#edf0eb;border-radius:3px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green))}.quick{display:grid;grid-template-columns:1fr 1fr;gap:5px}.quick button{border:1px solid var(--line);background:#fff;border-radius:3px;padding:7px;font-size:7px}

/* cta/footer */
.cta{background:linear-gradient(90deg,#ff621a,#ff8460 30%,#8f55f1 67%,#3568f4);color:#fff;padding:34px 0}.cta-inner{display:grid;grid-template-columns:1.05fr 240px 1.4fr;gap:30px;align-items:center}.cta h2{font-size:27px;margin:0}.cta p{font-size:23px;margin:3px 0}.cta>a{height:48px;background:#fff;color:#1d2631;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}.cta-stats{display:grid;grid-template-columns:repeat(5,1fr)}.cta-stats span{border-left:1px solid rgba(255,255,255,.3);padding-left:13px}.cta-stats b{display:block;font-size:21px}.cta-stats small{font-size:7px}.footer{height:80px;background:#fff;border-top:1px solid var(--line)}.footer-inner{height:100%;display:flex;align-items:center;font-size:8px;color:#858f99}.footer nav{margin-left:auto;display:flex;gap:28px}.footer-inner>div{margin-left:60px;font-size:15px}.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:11px 15px;border-radius:7px;font-size:11px;opacity:0;transform:translateY(8px);transition:.18s}.toast.show{opacity:1;transform:none}

@media(max-width:1200px){.nav{gap:18px;margin-left:40px}.hero-grid{grid-template-columns:1fr}.benefits-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:1fr 1fr}.plans-grid{grid-template-columns:1fr 1fr}.sticker-shell{grid-template-columns:1fr}.client-shell{grid-template-columns:1fr}.cta-inner{grid-template-columns:1fr}}
@media(max-width:800px){.wrap{width:min(100% - 28px,1500px)}.header{height:auto;padding:10px 0}.header-inner{flex-wrap:wrap}.nav{order:3;width:100%;margin:10px 0 0;overflow:auto}.header-actions{margin-left:auto}.cabinet-btn,.cart-btn{display:none}.hero-copy h1{font-size:48px}.hero-cards{height:360px;gap:6px}.hero-card{height:335px}.hero-label h2{font-size:22px}.signal{display:none}.benefits-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr}.plans-grid{grid-template-columns:1fr}.track{gap:8px}.sticker-card{flex-basis:calc((100% - 8px)/2)}.stats-cards{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.cta-stats{grid-template-columns:repeat(3,1fr)}.footer{height:auto;padding:24px 0}.footer-inner{flex-direction:column;align-items:flex-start;gap:12px}.footer nav,.footer-inner>div{margin-left:0}}


/* =========================================================
   V2 PATCH — RESTORED APPROVED HEADER/HERO
   ========================================================= */

/* Hide old recreated header/hero if any stale markup remains. */
.header,.hero{display:none!important}

/* Exact approved graphic is now only the top/hero background. */
.approved-hero{
  position:relative;
  width:100%;
  line-height:0;
  background:#fffdf9;
}
.approved-hero>img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* Invisible navigation/CTA zones never change the artwork. */
.hero-hit{
  position:absolute;
  z-index:20;
  display:block;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
.hero-hit:hover,
.hero-hit:focus,
.hero-hit:focus-visible{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Original top navigation positions */
.h-nav-print{left:20.0%;top:1.0%;width:5.6%;height:7.2%}
.h-nav-web{left:28.7%;top:1.0%;width:4.5%;height:7.2%}
.h-nav-host{left:37.2%;top:1.0%;width:8.1%;height:7.2%}
.h-nav-shop{left:48.2%;top:1.0%;width:5.8%;height:7.2%}
.h-nav-portfolio{left:57.0%;top:1.0%;width:9%;height:7.2%}
.h-nav-contact{left:67.5%;top:1.0%;width:7.3%;height:7.2%}

/* Original visible CTA positions */
.h-services{left:3.0%;top:71.8%;width:12.8%;height:8.2%}
.h-account{left:16.3%;top:71.8%;width:14.0%;height:8.2%}

/* Real independent circle buttons.
   No rectangle around image/card; only the round control reacts. */
.hero-circle-btn{
  position:absolute;
  z-index:30;
  width:4.15%;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  font-size:clamp(14px,1.25vw,24px);
  border:2px solid rgba(255,255,255,.78);
  background:rgba(20,24,30,.08);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.hero-circle-btn:hover{
  transform:scale(1.10);
  border-color:#fff;
  background:rgba(255,255,255,.18);
}
.h-circle-print{left:42.15%;top:65.95%}
.h-circle-web{left:62.05%;top:64.75%}
.h-circle-host{left:79.45%;top:63.95%}

/* =========================================================
   SERVICE CHOICE — keep existing design, only selection hover
   ========================================================= */
.service-card{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}
.service-card:hover{
  transform:translateY(-3px);
}

/* Use the service brand color without recoloring the artwork. */
.print-card:hover{
  border-color:rgba(255,91,11,.65);
  box-shadow:0 12px 28px rgba(255,91,11,.10);
}
.web-card:hover{
  border-color:rgba(22,119,248,.65);
  box-shadow:0 12px 28px rgba(22,119,248,.10);
}
.host-card:hover{
  border-color:rgba(105,173,47,.65);
  box-shadow:0 12px 28px rgba(105,173,47,.10);
}
.shop-card:hover{
  border-color:rgba(239,45,115,.55);
  box-shadow:0 12px 28px rgba(239,45,115,.08);
}

/* CTA remains the explicit action inside each service. */
.service-btn:hover{
  transform:translateY(-2px);
}

/* Prevent old hero recreated card effects from interfering */
.hero-card,
.hero-cards,
.hero-copy,
.hero-grid{
  pointer-events:none;
}

/* On mobile keep source image intact; only control hit areas scale with image */
@media(max-width:800px){
  .hero-circle-btn:hover{transform:none}
}


/* =========================================================
   V3 — exact approved hero + real interaction
   ========================================================= */

/* Cursor for top navigation / hero controls. */
.hero-hit,
.hero-circle-btn{
  cursor:pointer;
}

/* Top menu: interaction is ONLY a thin underline.
   The source menu text remains untouched. */
.h-nav-print::after,
.h-nav-web::after,
.h-nav-host::after,
.h-nav-shop::after,
.h-nav-portfolio::after,
.h-nav-contact::after{
  content:"";
  position:absolute;
  left:14%;
  right:86%;
  bottom:4%;
  height:2px;
  border-radius:2px;
  opacity:0;
  transition:right .16s ease, opacity .16s ease;
}
.h-nav-print:hover::after,
.h-nav-web:hover::after,
.h-nav-host:hover::after,
.h-nav-shop:hover::after,
.h-nav-portfolio:hover::after,
.h-nav-contact:hover::after{
  right:14%;
  opacity:1;
}
.h-nav-print::after{background:#ff5b0b}
.h-nav-web::after{background:#1677f8}
.h-nav-host::after{background:#69ad2f}
.h-nav-shop::after{background:#ef2d73}
.h-nav-portfolio::after,
.h-nav-contact::after{background:#111927}

/* Exact card overlays:
   each contains the SAME full approved image and clips only its card.
   This allows a subtle image zoom while keeping the original design. */
.approved-card-hover{
  position:absolute;
  z-index:8;
  overflow:hidden;
  border-radius:18px;
  pointer-events:auto;
  transform-origin:center;
  transition:transform .18s ease, filter .18s ease;
  will-change:transform;
}
.approved-card-hover:hover{
  transform:scale(1.025);
  filter:saturate(1.025);
  z-index:9;
}
.approved-card-hover>img{
  position:absolute;
  top:0;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
}

/* PRINT card exact crop geometry */
.hover-print{
  left:38.5%;
  top:15.1%;
  width:19.6%;
  height:61.8%;
}
.hover-print>img{
  width:510.2040816%;
  left:-196.4285714%;
}

/* WEB */
.hover-web{
  left:58.0%;
  top:14.9%;
  width:20.0%;
  height:61.5%;
}
.hover-web>img{
  width:500%;
  left:-290%;
}

/* HOSTING */
.hover-host{
  left:78.0%;
  top:14.8%;
  width:19.2%;
  height:61.0%;
}
.hover-host>img{
  width:520.8333333%;
  left:-406.25%;
}

/* The approved image contains the circle/arrow already.
   The HTML anchor is only a transparent hit target with exactly the old circle size.
   No second border, no second arrow, no glow outside it. */
.hero-circle-btn{
  z-index:40;
  display:block;
  width:3.55%;
  aspect-ratio:1;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:0!important;
}
.hero-circle-btn:hover{
  transform:scale(1.035);
  border:0!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
.h-circle-print{left:42.55%;top:66.65%}
.h-circle-web{left:62.35%;top:65.35%}
.h-circle-host{left:79.75%;top:64.65%}

/* Keep round hit controls above zooming card overlays. */
.hero-hit{z-index:35}

/* =========================================================
   Service selection: make the current real HTML cards
   visibly selected without replacing their artwork.
   ========================================================= */
.service-card{
  position:relative;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease;
}
.print-card::before{background:linear-gradient(180deg,rgba(255,91,11,.055),transparent 58%)}
.web-card::before{background:linear-gradient(180deg,rgba(22,119,248,.055),transparent 58%)}
.host-card::before{background:linear-gradient(180deg,rgba(105,173,47,.06),transparent 58%)}
.shop-card::before{background:linear-gradient(180deg,rgba(239,45,115,.05),transparent 58%)}
.service-card:hover::before{opacity:1}

.print-card:hover{
  border-color:#ff8f58;
  box-shadow:0 10px 28px rgba(255,91,11,.13);
}
.web-card:hover{
  border-color:#68a8ff;
  box-shadow:0 10px 28px rgba(22,119,248,.13);
}
.host-card:hover{
  border-color:#9ac874;
  box-shadow:0 10px 28px rgba(105,173,47,.13);
}
.shop-card:hover{
  border-color:#f481aa;
  box-shadow:0 10px 28px rgba(239,45,115,.11);
}

/* Content and CTA stay above the subtle hover tint. */
.service-head,
.service-card>ul,
.service-btn{
  z-index:4;
}

/* =========================================================
   Sticker artwork: do not crop images.
   ========================================================= */
.sticker-card img{
  height:145px;
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:4px;
}

/* Keep the approved interaction: border only on sticker selection. */
.sticker-card:hover{
  border-color:var(--pink);
  box-shadow:none;
  transform:none;
}

/* Avoid transform interactions on small screens. */
@media(max-width:800px){
  .approved-card-hover:hover,
  .hero-circle-btn:hover{
    transform:none;
  }
}


/* =====================================================================
   HERO V2 — REAL HTML/CSS/JS
   IMPORTANT: this block changes ONLY header + hero.
   Everything from .benefits downward remains from the supplied template.
   ===================================================================== */

.hero2-header{
  height:76px;
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(255,253,249,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(230,225,218,.72);
}
.hero2-header-row{
  height:100%;
  display:flex;
  align-items:center;
}
.hero2-brand{
  display:flex;
  align-items:baseline;
  gap:11px;
  flex:0 0 auto;
}
.hero2-brand b{
  font-size:47px;
  line-height:.85;
  letter-spacing:-.075em;
  font-weight:800;
}
.hero2-brand span{
  font-size:16px;
  font-weight:800;
}
.hero2-nav{
  margin-left:84px;
  display:flex;
  align-items:center;
  gap:31px;
}
.hero2-nav a{
  position:relative;
  padding:29px 0 25px;
  font:700 9px "IBM Plex Mono",monospace;
}
.hero2-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:17px;
  height:2px;
  border-radius:2px;
  background:#111927;
  transition:right .17s ease;
}
.hero2-nav a.n-print::after{background:#ff5b0b}
.hero2-nav a.n-web::after{background:#1677f8}
.hero2-nav a.n-host::after{background:#67ad2f}
.hero2-nav a.n-shop::after{background:#ef2d73}
.hero2-nav a:hover::after{right:0}

.hero2-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.hero2-langs{
  display:flex;
  overflow:hidden;
  border:1px solid #e6e1da;
  border-radius:5px;
  background:#fff;
}
.hero2-langs button{
  width:39px;
  height:38px;
  padding:0;
  border:0;
  background:#fff;
  color:#111927;
  font:700 8px "IBM Plex Mono",monospace;
  cursor:pointer;
}
.hero2-langs button.active{
  background:#111927;
  color:#fff;
}
.hero2-header-btn{
  height:39px;
  border:1px solid #e6e1da;
  border-radius:5px;
  background:#fff;
  color:#111927;
  padding:0 15px;
  font:700 9px "IBM Plex Mono",monospace;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.hero2-header-btn:hover{
  transform:translateY(-1px);
  border-color:#cfd4da;
  box-shadow:0 7px 18px rgba(17,25,39,.07);
}
.hero2-cabinet span{color:#ff5b0b;margin-right:5px}

.hero2{
  position:relative;
  overflow:hidden;
  padding:39px 0 43px;
  background:
    radial-gradient(circle at 71% 26%,rgba(255,117,34,.055),transparent 24%),
    linear-gradient(180deg,#fffdf9 0%,#fffaf3 100%);
}
.hero2-grid{
  min-height:536px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:38px;
  align-items:center;
}
.hero2-copy{
  position:relative;
  z-index:4;
}
.hero2-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:17px;
  color:#515c67;
  font:700 9px "IBM Plex Mono",monospace;
}
.hero2-eyebrow i{
  width:5px;height:5px;border-radius:50%;
  background:#ff5b0b;
}
.hero2-copy h1{
  margin:0;
  max-width:620px;
  font-size:clamp(54px,4.7vw,82px);
  line-height:.91;
  letter-spacing:-.067em;
  font-weight:800;
}
.hero2-copy h1 em{
  color:#ff5b0b;
  font-style:normal;
}
.hero2-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  color:#69737d;
  font:600 7px "IBM Plex Mono",monospace;
}
.hero2-meta i{
  width:5px;height:5px;border-radius:50%;
  background:#ff5b0b;
}
.hero2-actions{
  display:flex;
  gap:10px;
  margin-top:24px;
}
.hero2-cta{
  min-height:49px;
  padding:0 19px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.hero2-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(17,25,39,.09);
}
.hero2-primary{
  border:1px solid #ff5b0b;
  background:#ff5b0b;
  color:#fff;
}
.hero2-secondary{
  border:1px solid #ded9d2;
  background:#fff;
  color:#111927;
}

.hero2-stage{
  position:relative;
  height:480px;
  z-index:2;
}
.hero2-dots{
  position:absolute;
  z-index:0;
  left:1%;
  top:4%;
  width:58%;
  height:50%;
  opacity:.56;
  background-image:radial-gradient(circle,#ff7a25 1.15px,transparent 1.25px);
  background-size:14px 14px;
  mask-image:linear-gradient(100deg,transparent 0%,#000 32%,#000 75%,transparent 100%);
  pointer-events:none;
}

.hero2-shell{
  position:absolute;
  z-index:3;
  height:438px;
}
.hero2-shell-print{
  left:1.2%;
  top:26px;
  width:32.2%;
}
.hero2-shell-web{
  left:34.0%;
  top:12px;
  width:32.3%;
}
.hero2-shell-host{
  left:66.5%;
  top:16px;
  width:31.6%;
}

.hero2-card{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:22px;
  color:#fff;
  box-shadow:
    0 20px 40px rgba(17,25,39,.12),
    0 5px 12px rgba(17,25,39,.07);
  transform-origin:center center;
  transition:transform .20s cubic-bezier(.2,.8,.2,1),box-shadow .20s ease,filter .20s ease;
  will-change:transform;
}
.hero2-shell-print .hero2-card{transform:rotate(-3deg)}
.hero2-shell-web .hero2-card{transform:rotate(-2deg)}
.hero2-shell-host .hero2-card{transform:rotate(2deg)}

.hero2-shell-print:hover .hero2-card{
  transform:rotate(-3deg) scale(1.034) translateY(-3px);
}
.hero2-shell-web:hover .hero2-card{
  transform:rotate(-2deg) scale(1.034) translateY(-3px);
}
.hero2-shell-host:hover .hero2-card{
  transform:rotate(2deg) scale(1.034) translateY(-3px);
}
.hero2-shell:hover .hero2-card{
  filter:saturate(1.035);
  box-shadow:
    0 28px 52px rgba(17,25,39,.17),
    0 8px 17px rgba(17,25,39,.08);
}

.hero2-print{
  background:
    linear-gradient(152deg,rgba(255,255,255,.08) 0 30%,transparent 30% 100%),
    linear-gradient(180deg,#ff711b 0%,#ff590a 100%);
}
.hero2-web{
  background:
    linear-gradient(152deg,rgba(255,255,255,.09) 0 31%,transparent 31% 100%),
    linear-gradient(180deg,#1285ff 0%,#0d67dc 100%);
}
.hero2-host{
  background:
    linear-gradient(152deg,rgba(255,255,255,.07) 0 32%,transparent 32% 100%),
    linear-gradient(180deg,#88bf21 0%,#568d0b 100%);
}
.hero2-card-copy{
  position:absolute;
  z-index:5;
  left:22px;
  top:22px;
  text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.hero2-card-copy span{
  display:block;
  font:700 16px/1 "IBM Plex Mono",monospace;
}
.hero2-card-copy h2{
  margin:9px 0 7px;
  font-size:37px;
  line-height:.92;
  letter-spacing:-.045em;
}
.hero2-card-copy small{
  font:600 10px "IBM Plex Mono",monospace;
}

.hero2-art{
  position:absolute;
  z-index:2;
  left:-1%;
  right:-1%;
  bottom:0;
  height:77%;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
.hero2-print-art{background-image:url("../images/hero-print-art-v2.jpg")}
.hero2-web-art{background-image:url("../images/hero-web-art-v2.jpg")}
.hero2-host-art{background-image:url("../images/hero-host-art-v2.jpg")}

/* Small lower fade makes the button readable while preserving the photo. */
.hero2-art::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:26%;
  background:linear-gradient(to top,rgba(0,0,0,.10),transparent);
  pointer-events:none;
}

/* Circle buttons are separate DOM elements and do NOT scale with card image. */
.hero2-circle{
  position:absolute;
  z-index:12;
  left:13.5%;
  bottom:7.7%;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.82);
  background:rgba(20,25,30,.06);
  color:#fff;
  font-size:23px;
  line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.07);
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hero2-circle:hover{
  transform:scale(1.10);
  background:#fff;
  color:#111927;
  border-color:#fff;
  box-shadow:0 8px 20px rgba(17,25,39,.15);
}

/* Orange cable stays visually independent from cards and buttons. */
.hero2-cable{
  position:absolute;
  z-index:10;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.hero2-cable-shadow{
  fill:none;
  stroke:#fff;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.hero2-cable-main{
  fill:none;
  stroke:#ff5b0b;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#hero2Glow);
}

/* Old screenshot-based HERO from the supplied template is no longer used. */
.approved-hero{display:none!important}

/* Responsive HERO only. */
@media(max-width:1320px){
  .hero2-nav{gap:20px;margin-left:42px}
  .hero2-grid{grid-template-columns:.82fr 1.18fr;gap:22px}
  .hero2-copy h1{font-size:clamp(49px,4.5vw,72px)}
}
@media(max-width:1100px){
  .hero2-nav a:nth-last-child(-n+3){display:none}
  .hero2-grid{grid-template-columns:1fr}
  .hero2-copy{max-width:780px}
  .hero2-stage{width:min(900px,100%);margin:10px auto 0}
}
@media(max-width:800px){
  .hero2-header{height:auto;padding:10px 0}
  .hero2-header-row{flex-wrap:wrap}
  .hero2-brand b{font-size:40px}
  .hero2-nav{
    order:3;
    width:100%;
    margin:8px 0 0;
    gap:18px;
    overflow-x:auto;
  }
  .hero2-nav a{padding:8px 0}
  .hero2-nav a:nth-last-child(-n+3){display:block}
  .hero2-header-actions{margin-left:auto}
  .hero2-cabinet,.hero2-header-actions>.hero2-header-btn:last-child{display:none}
  .hero2{padding-top:27px}
  .hero2-copy h1{font-size:48px}
  .hero2-stage{height:355px}
  .hero2-shell{height:323px}
  .hero2-card{border-radius:15px}
  .hero2-card-copy{left:13px;top:14px}
  .hero2-card-copy span{font-size:10px}
  .hero2-card-copy h2{font-size:22px;margin:6px 0 4px}
  .hero2-card-copy small{font-size:7px}
  .hero2-circle{width:40px;height:40px;font-size:18px}
  .hero2-cable{display:none}
  .hero2-shell:hover .hero2-card{filter:none}
  .hero2-shell-print:hover .hero2-card{transform:rotate(-3deg)}
  .hero2-shell-web:hover .hero2-card{transform:rotate(-2deg)}
  .hero2-shell-host:hover .hero2-card{transform:rotate(2deg)}
}


/* =====================================================================
   HERO V3 WIDE
   Only header + hero geometry is changed.
   Everything below .benefits stays untouched.
   ===================================================================== */

/* Full-width header / hero like the approved concept.
   Do NOT change the global .wrap because sections below Hero are approved. */
.hero2-header-row,
.hero2-grid{
  width:calc(100% - 80px) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Header spacing on wide screens */
.hero2-nav{
  margin-left:8.2vw;
  gap:clamp(24px,2.35vw,44px);
}
.hero2-header-actions{
  margin-left:auto;
}

/* Hero now uses the page width instead of the old 1500px cap. */
.hero2{
  padding-top:42px;
  padding-bottom:48px;
}
.hero2-grid{
  min-height:610px;
  grid-template-columns:minmax(560px,.78fr) minmax(900px,1.22fr);
  gap:clamp(30px,2.6vw,54px);
  align-items:center;
}

/* Restore the broad text composition of the approved hero. */
.hero2-copy{
  align-self:center;
  max-width:710px;
}
.hero2-copy h1{
  max-width:690px;
  font-size:clamp(58px,3.7vw,74px);
  line-height:.92;
  letter-spacing:-.064em;
}
.hero2-eyebrow{
  margin-bottom:20px;
}
.hero2-meta{
  margin-top:20px;
}
.hero2-actions{
  margin-top:26px;
}

/* Larger hero scene/cards. */
.hero2-stage{
  height:590px;
  min-width:0;
}
.hero2-dots{
  left:0;
  top:1%;
  width:68%;
  height:49%;
  background-size:15px 15px;
}

/* Bigger cards with the same approved rotation and overall placement. */
.hero2-shell{
  height:555px;
}
.hero2-shell-print{
  left:.5%;
  top:27px;
  width:31.2%;
}
.hero2-shell-web{
  left:33.2%;
  top:10px;
  width:31.4%;
}
.hero2-shell-host{
  left:65.7%;
  top:14px;
  width:31.2%;
}
.hero2-card{
  border-radius:24px;
}

/* Slightly stronger shadows, matching the earlier larger-card concept. */
.hero2-card{
  box-shadow:
    0 25px 50px rgba(17,25,39,.13),
    0 7px 16px rgba(17,25,39,.07);
}
.hero2-shell:hover .hero2-card{
  box-shadow:
    0 34px 62px rgba(17,25,39,.18),
    0 10px 22px rgba(17,25,39,.09);
}

/* Text inside the cards returns to the original visual scale. */
.hero2-card-copy{
  left:24px;
  top:24px;
}
.hero2-card-copy span{
  font-size:17px;
}
.hero2-card-copy h2{
  margin:10px 0 7px;
  font-size:41px;
}
.hero2-card-copy small{
  font-size:10px;
}

/* Use the cleaner object crops in the cards.
   The image is only artwork inside the individual card. */
.hero2-print-art{
  background-image:url("../images/hero-print-art-v3.jpg");
  background-size:cover;
  background-position:center bottom;
}
.hero2-web-art{
  background-image:url("../images/hero-web-art-v3.jpg");
  background-size:cover;
  background-position:center bottom;
}
.hero2-host-art{
  background-image:url("../images/hero-host-art-v3.jpg");
  background-size:cover;
  background-position:center bottom;
}
.hero2-art{
  left:0;
  right:0;
  bottom:0;
  height:76%;
}

/* Larger independent circle buttons, still separate from the image/card scale. */
.hero2-circle{
  left:13.4%;
  bottom:7.2%;
  width:58px;
  height:58px;
  font-size:25px;
}

/* Cable proportions for the larger cards. */
.hero2-cable{
  height:100%;
}

/* The old 1320 breakpoint made the hero narrow too early.
   Keep the wide composition on desktop/laptop. */
@media(min-width:1101px) and (max-width:1600px){
  .hero2-header-row,
  .hero2-grid{
    width:calc(100% - 56px) !important;
  }
  .hero2-grid{
    grid-template-columns:minmax(500px,.76fr) minmax(760px,1.24fr);
    gap:28px;
  }
  .hero2-copy h1{
    font-size:clamp(54px,4vw,68px);
  }
  .hero2-stage{
    height:535px;
  }
  .hero2-shell{
    height:505px;
  }
  .hero2-card-copy h2{
    font-size:36px;
  }
  .hero2-circle{
    width:52px;
    height:52px;
    font-size:22px;
  }
}

/* Tablet behavior from the previous version remains, but start later. */
@media(max-width:1100px){
  .hero2-header-row,
  .hero2-grid{
    width:min(100% - 36px, 1000px) !important;
  }
}


/* =====================================================================
   HERO7 — REFERENCE-SIZE COVER CARDS
   Only the right Hero composition is changed.
   ===================================================================== */

.hero7-stage{
  position:relative;
  height:640px!important;
  min-width:0;
  overflow:visible;
}

.hero7-dots{
  position:absolute;
  z-index:0;
  left:0;
  top:3px;
  width:66%;
  height:155px;
  opacity:.52;
  pointer-events:none;
  background-image:radial-gradient(circle,#ff9f66 1.45px,transparent 1.6px);
  background-size:16px 16px;
  mask-image:linear-gradient(90deg,transparent 0,#000 19%,#000 80%,transparent 100%);
}

/*
  Card proportions intentionally match the user's reference:
  tall, large cards, slightly staggered and rotated.
*/
.hero7-shell{
  position:absolute;
  z-index:3;
  height:590px;
}

.hero7-print-shell{
  left:.4%;
  top:37px;
  width:31.5%;
}

.hero7-web-shell{
  left:33.4%;
  top:15px;
  width:32.2%;
  z-index:5;
}

.hero7-host-shell{
  left:66.1%;
  top:23px;
  width:31.3%;
}

.hero7-card{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:30px;
  background:#111;
  box-shadow:
    0 25px 58px rgba(17,25,39,.15),
    0 7px 18px rgba(17,25,39,.07);
  transform-origin:center center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
  isolation:isolate;
}

.hero7-print-card{transform:rotate(-2.15deg)}
.hero7-web-card{transform:rotate(-.45deg)}
.hero7-host-card{transform:rotate(1.35deg)}

.hero7-print-shell:hover .hero7-print-card{
  transform:rotate(-2.15deg) translateY(-5px) scale(1.022);
}
.hero7-web-shell:hover .hero7-web-card{
  transform:rotate(-.45deg) translateY(-6px) scale(1.022);
}
.hero7-host-shell:hover .hero7-host-card{
  transform:rotate(1.35deg) translateY(-5px) scale(1.022);
}

.hero7-shell:hover .hero7-card{
  box-shadow:
    0 32px 72px rgba(17,25,39,.19),
    0 10px 24px rgba(17,25,39,.09);
}

/*
  JPG is ONLY artwork.
  It fills the complete card with COVER.
*/
.hero7-cover{
  position:absolute;
  z-index:1;
  inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  transition:transform .22s ease;
  will-change:transform;
}

.hero7-print-cover{
  background-image:url("../images/hero-print-cover-v7.jpg");
  background-position:50% 49%;
}

.hero7-web-cover{
  background-image:url("../images/hero-web-cover-v7.jpg");
  background-position:50% 48%;
}

.hero7-host-cover{
  background-image:url("../images/hero-host-cover-v7.jpg");
  background-position:50% 47%;
}

.hero7-shell:hover .hero7-cover{
  transform:scale(1.024);
}

/*
  A translucent top treatment recreates the clean colored header area,
  but the image remains a full-card cover behind it.
*/
.hero7-shade{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:0;
  height:32%;
  pointer-events:none;
}

.hero7-print-card .hero7-shade{
  background:
    linear-gradient(150deg,rgba(255,255,255,.02) 0 48%,rgba(255,255,255,.13) 48.2% 67%,transparent 67.2%),
    linear-gradient(180deg,rgba(255,108,15,.98) 0%,rgba(255,96,10,.94) 100%);
}

.hero7-web-card .hero7-shade{
  background:
    linear-gradient(150deg,rgba(255,255,255,.02) 0 48%,rgba(255,255,255,.12) 48.2% 67%,transparent 67.2%),
    linear-gradient(180deg,rgba(36,139,255,.98) 0%,rgba(18,111,235,.94) 100%);
}

.hero7-host-card .hero7-shade{
  background:
    linear-gradient(150deg,rgba(255,255,255,.02) 0 48%,rgba(255,255,255,.11) 48.2% 67%,transparent 67.2%),
    linear-gradient(180deg,rgba(136,192,33,.98) 0%,rgba(100,159,15,.94) 100%);
}

/* TEXT IS HTML/CSS AND ALWAYS ABOVE THE COVER */
.hero7-text{
  position:absolute;
  z-index:8;
  left:27px;
  top:28px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.08);
  pointer-events:none;
}

.hero7-text span{
  display:block;
  font:700 18px/1 "IBM Plex Mono",monospace;
}

.hero7-text h2{
  margin:12px 0 9px;
  color:#fff;
  font-size:clamp(38px,2.55vw,49px);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:800;
}

.hero7-text small{
  display:block;
  color:rgba(255,255,255,.95);
  font:600 11px/1.2 "IBM Plex Mono",monospace;
}

/*
  ONE real CSS/HTML round button.
  Nothing like it exists inside the JPG.
*/
.hero7-circle{
  position:absolute;
  z-index:30;
  left:11%;
  bottom:6.2%;
  width:61px;
  height:61px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.88);
  background:rgba(16,21,29,.11);
  color:#fff;
  font-size:26px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.07);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}

.hero7-circle:hover{
  transform:scale(1.09);
  background:rgba(255,255,255,.18);
  box-shadow:0 9px 22px rgba(17,25,39,.15);
}

/*
  One separate cable element.
  SVG only defines the curve;
  its visible styling is entirely CSS.
*/
.hero7-cable{
  position:absolute;
  z-index:18;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.hero7-cable-halo,
.hero7-cable-core{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero7-cable-halo{
  stroke:#fff;
  stroke-width:10px;
  opacity:.96;
}

.hero7-cable-core{
  stroke:#ff5b0b;
  stroke-width:5.2px;
  filter:drop-shadow(0 0 4px rgba(255,91,11,.48));
}

/* Hide old stage internals if legacy selectors still exist. */
.hero7-stage .hero2-dots,
.hero7-stage .hero2-shell,
.hero7-stage .hero2-cable{
  display:none!important;
}

@media(max-width:1450px){
  .hero7-stage{height:560px!important}
  .hero7-shell{height:520px}
  .hero7-text{left:23px;top:24px}
  .hero7-text span{font-size:15px}
  .hero7-text h2{font-size:38px}
  .hero7-text small{font-size:9px}
  .hero7-circle{width:53px;height:53px;font-size:22px}
}

@media(max-width:1100px){
  .hero7-stage{
    width:min(100%,1000px);
    margin:6px auto 0;
  }
}

@media(max-width:800px){
  .hero7-stage{height:365px!important}
  .hero7-shell{height:332px}
  .hero7-card{border-radius:18px}
  .hero7-shade{height:32%}
  .hero7-text{left:14px;top:15px}
  .hero7-text span{font-size:10px}
  .hero7-text h2{font-size:23px;margin:7px 0 5px}
  .hero7-text small{font-size:7px}
  .hero7-circle{
    left:9%;
    bottom:5.5%;
    width:42px;
    height:42px;
    font-size:18px;
    border-width:2px;
  }
  .hero7-cable{display:none}
  .hero7-print-shell:hover .hero7-print-card{transform:rotate(-2.15deg)}
  .hero7-web-shell:hover .hero7-web-card{transform:rotate(-.45deg)}
  .hero7-host-shell:hover .hero7-host-card{transform:rotate(1.35deg)}
  .hero7-shell:hover .hero7-cover{transform:none}
}


/* =====================================================================
   HERO8 — MATCH THE APPROVED FIRST SCREENSHOT
   Only Hero geometry/composition changes.
   Everything from .benefits downward remains untouched.
   ===================================================================== */

/*
  The previous version had approximately correct widths but cards were too
  short. The approved reference uses much taller / elongated cards.
*/
.hero2{
  padding-top:42px!important;
  padding-bottom:46px!important;
}

.hero2-grid{
  min-height:760px!important;
  align-items:center!important;
}

/* Keep the left Hero inside the same section, but let the taller scene
   restore the visual proportions of the approved reference. */
.hero2-copy{
  align-self:center!important;
}

.hero2-copy h1{
  max-width:700px!important;
  font-size:clamp(62px,4.05vw,82px)!important;
  line-height:.92!important;
}

/* Right composition */
.hero7-stage{
  height:735px!important;
  overflow:visible!important;
}

/* Dots remain behind the cards only */
.hero7-dots{
  left:0!important;
  top:7px!important;
  width:67%!important;
  height:180px!important;
  background-size:16px 16px!important;
}

/*
  Width is intentionally kept close to V7.
  Height is increased to match the first screenshot.
*/
.hero7-shell{
  height:690px!important;
}

.hero7-print-shell{
  left:.2%!important;
  top:42px!important;
  width:31.6%!important;
}

.hero7-web-shell{
  left:33.25%!important;
  top:17px!important;
  width:32.2%!important;
  z-index:5!important;
}

.hero7-host-shell{
  left:66.15%!important;
  top:23px!important;
  width:31.2%!important;
}

/* Rotations from the approved reference */
.hero7-print-card{
  transform:rotate(-1.75deg)!important;
}

.hero7-web-card{
  transform:rotate(-.25deg)!important;
}

.hero7-host-card{
  transform:rotate(1.15deg)!important;
}

/* Hover keeps the same rotation; only the card/cover grows slightly */
.hero7-print-shell:hover .hero7-print-card{
  transform:rotate(-1.75deg) translateY(-6px) scale(1.022)!important;
}

.hero7-web-shell:hover .hero7-web-card{
  transform:rotate(-.25deg) translateY(-7px) scale(1.022)!important;
}

.hero7-host-shell:hover .hero7-host-card{
  transform:rotate(1.15deg) translateY(-6px) scale(1.022)!important;
}

.hero7-card{
  border-radius:31px!important;
  box-shadow:
    0 25px 58px rgba(17,25,39,.15),
    0 8px 19px rgba(17,25,39,.07)!important;
}

/*
  JPG = cover of the WHOLE card.
  No text/button/wire exists in these JPGs.
*/
.hero7-cover{
  inset:0!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Artwork framing tuned for the elongated reference cards */
.hero7-print-cover{
  background-image:url("../images/hero-print-cover-v8.jpg")!important;
  background-position:50% 53%!important;
}

.hero7-web-cover{
  background-image:url("../images/hero-web-cover-v8.jpg")!important;
  background-position:50% 51%!important;
}

.hero7-host-cover{
  background-image:url("../images/hero-host-cover-v8.jpg")!important;
  background-position:50% 50%!important;
}

/*
  The colored upper field is a CSS overlay over the cover,
  not part of the JPG. It ends near the same point as the reference.
*/
.hero7-shade{
  height:29.5%!important;
}

.hero7-print-card .hero7-shade{
  background:
    linear-gradient(151deg,
      rgba(255,255,255,.02) 0 49%,
      rgba(255,255,255,.12) 49.2% 68%,
      transparent 68.2%),
    linear-gradient(180deg,
      rgba(255,111,18,.98) 0%,
      rgba(255,94,7,.94) 100%)!important;
}

.hero7-web-card .hero7-shade{
  background:
    linear-gradient(151deg,
      rgba(255,255,255,.02) 0 49%,
      rgba(255,255,255,.12) 49.2% 68%,
      transparent 68.2%),
    linear-gradient(180deg,
      rgba(30,132,255,.98) 0%,
      rgba(10,103,229,.94) 100%)!important;
}

.hero7-host-card .hero7-shade{
  background:
    linear-gradient(151deg,
      rgba(255,255,255,.02) 0 49%,
      rgba(255,255,255,.11) 49.2% 68%,
      transparent 68.2%),
    linear-gradient(180deg,
      rgba(135,188,31,.98) 0%,
      rgba(89,142,11,.94) 100%)!important;
}

/* HTML text is clearly in front of the cover */
.hero7-text{
  left:29px!important;
  top:31px!important;
  z-index:12!important;
}

.hero7-text span{
  font-size:21px!important;
  line-height:1!important;
}

.hero7-text h2{
  margin:13px 0 10px!important;
  font-size:clamp(44px,2.75vw,55px)!important;
  line-height:.9!important;
}

.hero7-text small{
  font-size:12px!important;
  line-height:1.2!important;
}

/*
  Exactly ONE HTML/CSS round button per card.
  The JPG files contain no circle or arrow.
*/
.hero7-circle{
  left:11.2%!important;
  bottom:6.7%!important;
  width:72px!important;
  height:72px!important;
  z-index:35!important;
  border:2px solid rgba(255,255,255,.88)!important;
  background:rgba(15,20,28,.10)!important;
  font-size:29px!important;
  box-shadow:0 5px 14px rgba(0,0,0,.07)!important;
}

.hero7-circle:hover{
  transform:scale(1.09)!important;
  background:rgba(255,255,255,.18)!important;
}

/*
  Separate SVG cable.
  Geometry is recalculated for the taller cards so it crosses the cards
  at the same relative heights as the approved first screenshot.
*/
.hero7-cable{
  height:735px!important;
  z-index:22!important;
}

/* Hide the V7 path visually; use a CSS-generated path drawn by the new SVG
   geometry that is inserted below through path transform/scale. */
.hero7-cable-halo,
.hero7-cable-core{
  vector-effect:non-scaling-stroke;
  transform:translateY(32px) scaleY(1.14);
  transform-origin:center center;
}

.hero7-cable-halo{
  stroke-width:10px!important;
}

.hero7-cable-core{
  stroke-width:5px!important;
}

/* Desktop width: do not let an old breakpoint shorten the cards again. */
@media(min-width:1101px) and (max-width:1600px){
  .hero2-grid{
    min-height:710px!important;
  }

  .hero7-stage{
    height:680px!important;
  }

  .hero7-shell{
    height:640px!important;
  }

  .hero7-text{
    left:25px!important;
    top:27px!important;
  }

  .hero7-text span{
    font-size:18px!important;
  }

  .hero7-text h2{
    font-size:46px!important;
  }

  .hero7-text small{
    font-size:10px!important;
  }

  .hero7-circle{
    width:64px!important;
    height:64px!important;
    font-size:26px!important;
  }

  .hero7-cable{
    height:680px!important;
  }
}

/* Mobile behavior remains controlled and does not alter the lower page. */
@media(max-width:800px){
  .hero2-grid{
    min-height:auto!important;
  }

  .hero7-stage{
    height:390px!important;
  }

  .hero7-shell{
    height:356px!important;
  }

  .hero7-card{
    border-radius:19px!important;
  }

  .hero7-shade{
    height:29.5%!important;
  }

  .hero7-text{
    left:14px!important;
    top:15px!important;
  }

  .hero7-text span{
    font-size:10px!important;
  }

  .hero7-text h2{
    font-size:23px!important;
    margin:7px 0 5px!important;
  }

  .hero7-text small{
    font-size:7px!important;
  }

  .hero7-circle{
    width:44px!important;
    height:44px!important;
    left:9%!important;
    bottom:5.5%!important;
    font-size:19px!important;
  }

  .hero7-cable{
    display:none!important;
  }

  .hero7-print-shell:hover .hero7-print-card{
    transform:rotate(-1.75deg)!important;
  }

  .hero7-web-shell:hover .hero7-web-card{
    transform:rotate(-.25deg)!important;
  }

  .hero7-host-shell:hover .hero7-host-card{
    transform:rotate(1.15deg)!important;
  }

  .hero7-shell:hover .hero7-cover{
    transform:none!important;
  }
}


/* =====================================================================
   HERO9 — MORE AIR INSIDE THE COVER
   Geometry / HTML text / buttons / SVG cable remain exactly as V8.
   ===================================================================== */

.hero7-print-cover{
  background-image:url("../images/hero-print-cover-v9.jpg")!important;
  background-position:50% 51%!important;
}

.hero7-web-cover{
  background-image:url("../images/hero-web-cover-v9.jpg")!important;
  background-position:50% 51%!important;
}

.hero7-host-cover{
  background-image:url("../images/hero-host-cover-v9.jpg")!important;
  background-position:50% 50%!important;
}

.hero7-cover{
  background-size:cover!important;
  background-repeat:no-repeat!important;
}


/* =========================================================
   READABILITY PATCH — ONLY CONTENT BELOW HERO
   Hero HTML, dimensions, rotations, buttons and cable unchanged.
   ========================================================= */

/* Benefits */
.benefits-grid b{font-size:10.5px!important;line-height:1.45!important}
.benefits-grid p{font-size:11.5px!important;line-height:1.5!important}

/* PRINT / WEB / HOSTING / SHOP */
.service-head>span{font-size:12px!important}
.service-head h2{font-size:33px!important}
.service-head p{font-size:13px!important;line-height:1.5!important}
.service-card li{font-size:12px!important;line-height:1.4!important}
.service-btn{font-size:12px!important}

/* Hosting plans */
.plans-title span{font-size:11px!important}
.plans-title p{font-size:15px!important}
.plans-intro>span,.infra-status>span{font-size:10px!important}
.plans-intro h3{font-size:25px!important}
.plans-intro p{font-size:13px!important;line-height:1.5!important}
.plan>span{font-size:11.5px!important}
.plan>p{font-size:12px!important;line-height:1.45!important}
.plan h3 small{font-size:10px!important}
.plan dl>div{font-size:11px!important}
.plan button{font-size:11px!important}
.popular{font-size:8px!important}
.infra-status h3{font-size:15px!important}
.infra-status b{font-size:10.5px!important}
.infra-status em{font-size:9.5px!important}

/* Sticker shop */
.sticker-intro>span{font-size:10px!important}
.sticker-intro h2{font-size:27px!important}
.sticker-intro p{font-size:13px!important}
.sticker-intro a{font-size:12px!important}
.sticker-card b{font-size:11px!important;line-height:1.35!important}
.sticker-card span{font-size:12px!important}
.sticker-card button{font-size:10.5px!important}

/* Client OS copy */
.client-copy>span{font-size:10px!important}
.client-copy p{font-size:13px!important}
.client-copy li{font-size:12px!important;line-height:1.4!important}
.client-copy button{font-size:11.5px!important}

/* Client OS dashboard */
.os-brand span{font-size:8.5px!important}
.os-panel>header h3{font-size:13px!important}
.os-user{font-size:10px!important}
.os-body>aside a{font-size:10px!important}
.stats-cards small{font-size:9px!important}
.stats-cards a{font-size:8.5px!important}
.dashboard-grid h4{font-size:12px!important}
.activity b,.activity span,.activity em{font-size:8.5px!important}
.usage label{font-size:9.5px!important}
.quick button{font-size:8.5px!important}

/* CTA / Footer */
.cta>a{font-size:11.5px!important}
.cta-stats small{font-size:9px!important}
.footer-inner{font-size:10px!important}
.footer nav a{font-size:10px!important}


/* =========================================================
   WIDE CONTENT PATCH — EVERYTHING BELOW HERO ONLY
   Hero/header geometry and three Hero cards are untouched.
   ========================================================= */

/* Use almost the full viewport width after Hero */
.benefits > .wrap,
.services > .wrap,
.plans-section > .wrap,
.sticker-shop > .wrap,
.client-os > .wrap,
.cta > .wrap,
.footer > .wrap{
  width:calc(100% - clamp(36px,3vw,64px))!important;
  max-width:none!important;
}

/* Benefits — bigger and easier to read */
.benefits{padding:31px 0!important}
.benefits-grid article{
  min-height:96px!important;
  grid-template-columns:54px 1fr!important;
  gap:14px!important;
  padding:9px 18px!important;
}
.benefits-grid .icon{
  width:46px!important;
  height:46px!important;
  font-size:22px!important;
}
.benefits-grid b{
  font-size:12px!important;
  line-height:1.4!important;
}
.benefits-grid p{
  font-size:13px!important;
  line-height:1.5!important;
  margin-top:7px!important;
}

/* Four service directions */
.services{padding:38px 0 72px!important}
.service-grid{gap:14px!important}
.service-card{
  height:650px!important;
  border-radius:11px!important;
}
.service-head{padding:25px 27px 0!important}
.service-head>span{font-size:13px!important}
.service-head h2{font-size:39px!important;margin:9px 0!important}
.service-head p{
  font-size:14px!important;
  line-height:1.5!important;
  min-height:62px!important;
  max-width:360px!important;
}
.service-card ul{
  padding:0 27px!important;
  margin:12px 0!important;
}
.service-card li{
  font-size:13px!important;
  line-height:1.45!important;
  margin:10px 0!important;
}
.service-art{height:54%!important}
.service-btn{
  left:27px!important;
  bottom:23px!important;
  height:48px!important;
  padding:0 20px!important;
  font-size:13px!important;
}

/* Hosting plans */
.plans-section{padding:86px 0 58px!important}
.plans-title{margin-bottom:38px!important}
.plans-title span{font-size:12px!important}
.plans-title h2{
  font-size:clamp(50px,4.2vw,76px)!important;
  margin:11px 0 8px!important;
}
.plans-title p{font-size:16px!important}
.plans-grid{gap:13px!important}
.plans-intro,.plan,.infra-status{
  min-height:460px!important;
  padding:24px!important;
  border-radius:10px!important;
}
.plans-intro>span,.infra-status>span{font-size:11px!important}
.plans-intro h3{font-size:30px!important}
.plans-intro p{font-size:14px!important;line-height:1.55!important}
.plan>span{font-size:13px!important}
.plan>p{font-size:14px!important;line-height:1.45!important}
.plan h3{font-size:45px!important}
.plan h3 small{font-size:12px!important}
.plan dl>div{font-size:13px!important;padding:10px 0!important}
.plan button{height:48px!important;font-size:13px!important}
.infra-status h3{font-size:19px!important}
.infra-status b{font-size:13px!important}
.infra-status em{font-size:12px!important}

/* Sticker shop */
.sticker-shop{padding:32px 0 38px!important}
.sticker-shell{
  grid-template-columns:320px 1fr!important;
  gap:20px!important;
  padding:21px!important;
  border-radius:11px!important;
}
.sticker-intro{padding:10px 14px!important}
.sticker-intro>span{font-size:11px!important}
.sticker-intro h2{font-size:34px!important}
.sticker-intro p{font-size:14px!important;line-height:1.55!important}
.sticker-intro a{font-size:13px!important}
.sticker-card{padding:10px!important}
.sticker-card img{height:170px!important}
.sticker-card b{font-size:13px!important;margin:10px 0 4px!important}
.sticker-card span{font-size:13px!important}
.sticker-card button{height:36px!important;font-size:12px!important}

/* Client OS preview */
.client-os{padding:0 0 38px!important}
.client-shell{
  grid-template-columns:360px 1fr!important;
  gap:22px!important;
  padding:26px!important;
  border-radius:11px!important;
}
.client-copy>span{font-size:11px!important}
.client-copy h2{font-size:42px!important}
.client-copy p{font-size:15px!important;line-height:1.55!important}
.client-copy li{font-size:14px!important;line-height:1.45!important;margin:14px 0!important}
.client-copy button{font-size:13px!important;padding:15px 20px!important}

/* Client OS screenshot/demo readability */
.os-panel>header{min-height:61px!important}
.os-panel>header h3{font-size:15px!important}
.os-user{font-size:12px!important}
.os-body>aside a{font-size:11px!important}
.stats-cards small{font-size:10px!important}
.stats-cards b{font-size:19px!important}
.stats-cards a{font-size:10px!important}
.dashboard-grid h4{font-size:13px!important}
.activity b,.activity span,.activity em{font-size:10px!important}
.usage label{font-size:11px!important}
.quick button{font-size:10px!important;padding:9px!important}

/* Final CTA / footer */
.cta{padding:42px 0!important}
.cta h2{font-size:34px!important}
.cta p{font-size:27px!important}
.cta>a{height:53px!important;font-size:13px!important}
.cta-stats b{font-size:25px!important}
.cta-stats small{font-size:11px!important}
.footer{height:88px!important}
.footer-inner{font-size:11px!important}
.footer nav a{font-size:11px!important}

@media(max-width:1200px){
  .benefits > .wrap,
  .services > .wrap,
  .plans-section > .wrap,
  .sticker-shop > .wrap,
  .client-os > .wrap,
  .cta > .wrap,
  .footer > .wrap{
    width:calc(100% - 32px)!important;
  }
  .service-card{height:620px!important}
  .sticker-shell{grid-template-columns:1fr!important}
  .client-shell{grid-template-columns:1fr!important}
}

@media(max-width:800px){
  .benefits > .wrap,
  .services > .wrap,
  .plans-section > .wrap,
  .sticker-shop > .wrap,
  .client-os > .wrap,
  .cta > .wrap,
  .footer > .wrap{
    width:calc(100% - 24px)!important;
  }
  .benefits-grid b{font-size:10.5px!important}
  .benefits-grid p{font-size:11px!important}
  .service-card{height:590px!important}
  .plans-title h2{font-size:42px!important}
  .sticker-card img{height:150px!important}
}