/* Homepage hero: "Od Google pretrage do vašeg sljedećeg kupca".
   Custom CSS 3D scene with SVG links. Motion is driven by hero-scene.js;
   without JavaScript (or with reduced motion) the composed end state shows. */

.hero-has-scene{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);padding-bottom:84px}

.hero-stage{
  --stage-ink:#1c1d1a;
  --glow:255,99,59;
  --tilt-x:0deg;--tilt-y:0deg;--lift:0;--spread:0;
  position:relative;isolation:isolate;container-type:inline-size;
  aspect-ratio:1/1.1;min-width:0;margin:0 0 4px;
  border-radius:4px 100px 4px 4px;overflow:hidden;color:var(--paper);
  background:
    radial-gradient(120% 70% at 78% 92%,rgba(var(--glow),.2),transparent 62%),
    radial-gradient(90% 60% at 18% 8%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(165deg,#272824 0%,var(--stage-ink) 55%,#151613 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 50px 90px -50px rgba(34,35,31,.75),0 18px 36px -24px rgba(34,35,31,.45);
}
.hero-stage:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  background:radial-gradient(140% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.35));z-index:3}

.stage-topline{position:absolute;z-index:4;top:25px;left:28px;right:46px;display:flex;justify-content:space-between;align-items:center;
  font-size:9px;font-weight:800;letter-spacing:1.1px;color:rgba(245,244,238,.62)}
.stage-topline b{color:var(--orange);font-weight:800;margin-left:4px}

/* Step legend keeps the story readable even when motion is paused. */
.stage-steps{position:absolute;z-index:4;left:28px;right:28px;bottom:22px;margin:0;padding:15px 0 0;list-style:none;
  display:flex;gap:10px;border-top:1px solid rgba(245,244,238,.1)}
.stage-steps li{flex:1;display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.2px;
  color:rgba(245,244,238,.42);transition:color .5s}
.stage-steps li span{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;border-radius:20px;
  border:1px solid rgba(245,244,238,.16);font-size:9px;letter-spacing:.6px;transition:background .5s,border-color .5s,color .5s}
.is-ad .stage-steps [data-step-label="1"],.is-web .stage-steps [data-step-label="2"],.is-lead .stage-steps [data-step-label="3"]{color:var(--paper)}
.is-ad .stage-steps [data-step-label="1"] span,.is-web .stage-steps [data-step-label="2"] span,.is-lead .stage-steps [data-step-label="3"] span{
  background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* Scene, floor and world */
.scene{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 38%;z-index:1}
.scene-floor{position:absolute;left:-30%;right:-30%;bottom:-24%;height:78%;
  transform-origin:50% 100%;transform:rotateX(74deg) translateZ(calc(var(--spread) * -4cqi));pointer-events:none}
.floor-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(245,244,238,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(245,244,238,.11) 1px,transparent 1px);
  background-size:7cqi 7cqi;background-position:center bottom;
  -webkit-mask-image:radial-gradient(60% 75% at 50% 62%,#000 15%,transparent 72%);mask-image:radial-gradient(60% 75% at 50% 62%,#000 15%,transparent 72%)}
.floor-glow{position:absolute;left:30%;right:14%;top:30%;bottom:18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--glow),.34),rgba(var(--glow),.1) 55%,transparent);opacity:.55;transition:opacity 1.2s}
.is-lead .floor-glow{opacity:1}

.scene-world{position:absolute;left:46%;top:47%;width:0;height:0;transform-style:preserve-3d;
  transform:translateY(calc(var(--lift) * -6cqi)) rotateX(calc(13deg + var(--tilt-x))) rotateY(calc(-27deg + var(--tilt-y))) rotateZ(-1.5deg)}

.panel{position:absolute;left:0;top:0;transform-style:preserve-3d;
  --sx:calc(var(--spread) * 1);
  transform:translate3d(calc(var(--x) * (1 + var(--sx) * .32)),calc(var(--y) * (1 + var(--sx) * .2)),calc(var(--z) * (1 + var(--sx) * 2.4)))}
.panel-float{transform-style:preserve-3d;animation:panel-float var(--float,7s) ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.panel-card{position:relative;transform-style:preserve-3d;width:var(--w);transform:translate(-50%,-50%)}
.panel-ads{--x:-22cqi;--y:-31cqi;--z:-9cqi;--w:42cqi;--float:7.4s;--float-delay:-1.2s}
.panel-web{--x:2cqi;--y:4cqi;--z:2cqi;--w:45cqi;--float:8.2s;--float-delay:-3.6s;z-index:2}
.panel-lead{--x:27cqi;--y:32cqi;--z:13cqi;--w:33cqi;--float:6.8s;--float-delay:-.4s;z-index:3}

@keyframes panel-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.1cqi,.8cqi)}}

/* Layered physical edges: two plates behind each face. */
.card-face,.card-layer{border-radius:1.5cqi}
.card-layer{position:absolute;inset:0;display:block;pointer-events:none}
.card-layer.l1{transform:translateZ(-1.2cqi);background:#cfcdc2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.card-layer.l2{transform:translateZ(-2.4cqi);background:#8d8b81;box-shadow:0 4cqi 7cqi -1cqi rgba(0,0,0,.6),0 1.2cqi 2cqi rgba(0,0,0,.3)}
.card-face{position:relative;display:block;padding:3.6cqi 2.3cqi 2.3cqi;
  background:linear-gradient(158deg,#fdfcf8 0%,#f3f2eb 55%,#e9e8df 100%);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(34,35,31,.06);
  transition:box-shadow .8s ease}
.anchor{position:absolute;width:1px;height:1px;pointer-events:none}

/* Labels: chips riding just above each panel. */
.panel-tag{position:absolute;left:2cqi;top:0;z-index:2;display:inline-flex;align-items:center;gap:1.1cqi;white-space:nowrap;
  transform:translateY(-55%) translateZ(.8cqi);padding:.8cqi 1.7cqi .8cqi .8cqi;border-radius:20px;font-size:max(10px,2.2cqi);font-weight:800;letter-spacing:-.1px;line-height:1.2;
  color:var(--paper);background:rgba(28,29,26,.78);border:1px solid rgba(245,244,238,.2);
  box-shadow:0 1cqi 2.4cqi -1cqi rgba(0,0,0,.5)}
.tag-index{display:inline-grid;place-items:center;min-width:3.5cqi;height:3cqi;padding:0 .6cqi;border-radius:20px;font-size:max(8px,1.45cqi);letter-spacing:.5px;
  background:rgba(245,244,238,.12);color:rgba(245,244,238,.85);transition:background .6s,color .6s}
.is-ad .panel-ads .panel-tag,.is-web .panel-web .panel-tag,.is-lead .panel-lead .panel-tag{background:var(--paper);color:var(--ink);border-color:#fff;box-shadow:0 1.4cqi 3cqi -1cqi rgba(0,0,0,.5)}
.is-ad .panel-ads .tag-index,.is-web .panel-web .tag-index,.is-lead .panel-lead .tag-index{background:var(--orange);color:var(--ink)}

/* 01 Search / ad panel */
.search-field{display:flex;align-items:center;gap:1.3cqi;height:5.4cqi;padding:0 1.8cqi;border-radius:4cqi;background:#fff;
  box-shadow:0 0 0 1px rgba(34,35,31,.1),0 .8cqi 1.6cqi -.6cqi rgba(34,35,31,.25);font-size:max(9px,2.05cqi);font-weight:600;color:var(--ink)}
.search-field svg{width:2.4cqi;height:2.4cqi;flex-shrink:0;color:#74786b}
.search-query{white-space:nowrap;overflow:hidden}
.search-caret{width:1px;height:2.6cqi;background:var(--orange);margin-left:-.6cqi;opacity:0}
.is-typing .search-caret{opacity:1;animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ad-result{position:relative;display:block;margin-top:1.4cqi;padding:1.2cqi 1.6cqi;border-radius:1cqi;border:1px solid transparent;
  opacity:0;transform:translateY(1cqi);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),background .6s,border-color .6s,box-shadow .6s}
.ad-result>span{display:block}
.ad-meta{font-size:max(8px,1.55cqi);color:#51574a;font-weight:600}
.ad-meta b{font-weight:800;color:var(--ink);margin-right:.6cqi}
.ad-title{font-size:max(10px,2.35cqi);font-weight:800;letter-spacing:-.4px;color:#2b4fa8;margin:.5cqi 0 .3cqi;line-height:1.25}
.ad-copy{font-size:max(8px,1.6cqi);color:#51574a;line-height:1.45}
.organic{display:grid;gap:.9cqi;margin-top:1.2cqi;padding:0 1.6cqi;opacity:0;transition:opacity .6s .15s}
.organic i{display:block;height:.9cqi;border-radius:1cqi;background:#dcdbd1}
.organic i:nth-child(1){width:46%;background:#c7cbd9}
.organic i:nth-child(2){width:88%}
.organic i:nth-child(3){display:none}
.is-search .ad-result,.is-search .organic{opacity:1;transform:none}
.is-ad .ad-result{background:#fff;border-color:rgba(var(--glow),.55);box-shadow:0 0 0 .5cqi rgba(var(--glow),.12),0 1cqi 2.4cqi -1cqi rgba(var(--glow),.45)}
.ads-cursor{position:absolute;left:70%;top:50%;width:4.2cqi;height:4.2cqi;opacity:0;transform:translate(3cqi,4cqi);pointer-events:none;
  transition:opacity .4s,transform .7s cubic-bezier(.2,.8,.2,1)}
.ads-cursor svg{width:100%;height:100%;filter:drop-shadow(0 .4cqi .5cqi rgba(0,0,0,.3))}
.is-clicking .ads-cursor{opacity:1;transform:none}

/* 02 Mini landing page */
.panel-web .card-face{padding:0;overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:1.6cqi;height:4.4cqi;padding:0 1.8cqi;background:#e6e5dc;border-bottom:1px solid #d8d8cf}
.browser-dots{display:flex;gap:.7cqi}
.browser-dots i{width:1cqi;height:1cqi;border-radius:50%;background:#bdbcb1}
.browser-dots i:first-child{background:var(--orange)}
.browser-url{flex:1;max-width:60%;height:2.5cqi;border-radius:2cqi;background:#f5f4ee;display:flex;align-items:center;padding-left:1.4cqi;font-size:max(7px,1.35cqi);font-weight:700;color:#74786b}
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:1.8cqi 2.6cqi .4cqi}
.site-nav b{font-size:max(9px,1.9cqi);letter-spacing:-.2px}
.site-nav span{display:flex;gap:1cqi}
.site-nav i{display:block;width:3.2cqi;height:.7cqi;border-radius:1cqi;background:#cfcfc5}
.site-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:1.8cqi;align-items:center;padding:1.8cqi 2.6cqi 1.6cqi}
.site-copy>span{display:block}
.site-eyebrow{font-size:max(7px,1.2cqi);font-weight:800;letter-spacing:.5px;color:#74786b;margin-bottom:.9cqi}
.site-title{font-size:max(12px,2.85cqi);line-height:1.07;font-weight:800;letter-spacing:-.035em;margin-bottom:1.7cqi}
.site-cta{display:inline-flex!important;align-items:center;gap:1.2cqi;padding:1.05cqi 1.6cqi;border-radius:.8cqi;background:var(--ink);color:var(--paper);
  font-size:max(8px,1.45cqi);font-weight:800;transition:background .5s,color .5s,box-shadow .5s,transform .5s}
.site-cta em{font-style:normal;font-size:1.5em;line-height:.7}
.site-visual{position:relative;aspect-ratio:1/1.05;border-radius:.8cqi 4cqi .8cqi .8cqi;overflow:hidden;
  background:linear-gradient(150deg,#ff8a66,var(--orange) 55%,#e14d29)}
.visual-sun{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;left:21%;top:20%;background:radial-gradient(circle at 35% 30%,#fff3ec,#ffcbbb 45%,rgba(255,203,187,0) 72%);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s}
.visual-arrow{position:absolute;left:24%;bottom:20%;width:52%;height:52%;border-top:.9cqi solid var(--ink);border-right:.9cqi solid var(--ink);
  -webkit-mask:linear-gradient(#000,#000);transform-origin:100% 0;transition:transform 1s cubic-bezier(.2,.8,.2,1) .1s}
.visual-arrow:after{content:'';position:absolute;right:-.45cqi;top:-.45cqi;width:141%;height:.9cqi;background:var(--ink);transform-origin:100% 50%;transform:rotate(-45deg)}
.site-features{display:flex;gap:1.2cqi;padding:0 2.6cqi 2.4cqi}
.site-features span{flex:1;display:flex;align-items:center;gap:.8cqi;padding:1cqi;border-radius:.8cqi;background:#ebeae2;font-size:max(7px,1.3cqi);font-weight:700;color:#51574a}
.site-features i{width:1.2cqi;height:1.2cqi;border-radius:50%;background:#cfcfc5;transition:background .5s}
.site-copy,.site-visual,.site-features{transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1),filter .8s}
.hero-stage:not(.is-web) .site-copy{opacity:.35;transform:translateY(1.2cqi)}
.hero-stage:not(.is-web) .site-visual{opacity:.4;transform:scale(.94);filter:saturate(.2)}
.hero-stage:not(.is-web) .site-features{opacity:.4}
.hero-stage:not(.is-web) .visual-sun{transform:translateY(25%) scale(.7);opacity:.4}
.hero-stage:not(.is-web) .visual-arrow{transform:scale(.6)}
.is-web .site-features i{background:var(--orange)}
.is-cta .site-cta{background:var(--orange);color:var(--ink);box-shadow:0 0 0 .6cqi rgba(var(--glow),.18),0 .8cqi 2.2cqi -.4cqi rgba(var(--glow),.75);transform:translateY(-.2cqi)}
.is-web .panel-web .card-face{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(var(--glow),.18),0 0 6cqi -1cqi rgba(var(--glow),.28)}

/* 03 Enquiry panel: ink glass that lights up in the brand accent. */
.panel-lead .card-face{background:linear-gradient(160deg,#34352f 0%,#24251f 60%,#1e1f1b 100%);color:var(--paper);padding:3.8cqi 2.2cqi 2.2cqi;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08)}
.panel-lead .card-layer.l1{background:#3d3a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .8s}
.panel-lead .card-layer.l2{background:#191a17;transition:background .8s,box-shadow .8s}
.is-lead .panel-lead .card-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(var(--glow),.75),0 0 0 1px rgba(var(--glow),.35),0 0 7cqi -.5cqi rgba(var(--glow),.55)}
.is-lead .panel-lead .card-layer.l1{background:#b8421f}
.is-lead .panel-lead .card-layer.l2{background:#5a2414;box-shadow:0 4cqi 8cqi -1cqi rgba(var(--glow),.35),0 1.2cqi 2cqi rgba(0,0,0,.4)}
.lead-head{display:flex;align-items:center;gap:1.5cqi;margin-bottom:1.6cqi}
.lead-head b{display:block;font-size:max(10px,1.95cqi);letter-spacing:-.3px;line-height:1.2}
.lead-head small{display:block;font-size:max(8px,1.35cqi);color:rgba(245,244,238,.55);font-weight:600}
.lead-icon{position:relative;display:grid;place-items:center;flex-shrink:0;width:5.4cqi;height:5.4cqi;border-radius:50%;
  background:rgba(245,244,238,.1);color:var(--paper);transition:background .6s,color .6s}
.lead-icon svg{width:2.6cqi;height:2.6cqi}
.lead-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--orange);opacity:0}
.is-lead .lead-icon{background:var(--orange);color:var(--ink)}
.is-ringing .lead-ring{animation:lead-ring 1.6s cubic-bezier(.2,.7,.3,1) 2}
@keyframes lead-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.lead-fields{display:grid;gap:.9cqi}
.lead-fields span{display:grid;grid-template-columns:7.6cqi 1fr;align-items:center;gap:1cqi;padding:.85cqi 1.1cqi;border-radius:.8cqi;background:rgba(245,244,238,.06);border:1px solid rgba(245,244,238,.08)}
.lead-fields small{font-size:max(7px,1.25cqi);color:rgba(245,244,238,.5);font-weight:700}
.lead-fields i{display:block;height:.75cqi;border-radius:1cqi;background:rgba(245,244,238,.75);transform-origin:0 50%;transform:scaleX(0);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.lead-fields span:nth-child(1) i{width:62%}
.lead-fields span:nth-child(2) i{width:78%;transition-delay:.25s}
.lead-fields span:nth-child(3) i{width:92%;transition-delay:.5s}
.is-lead .lead-fields i{transform:scaleX(1)}
.lead-status{display:flex;align-items:center;gap:1cqi;margin-top:1.5cqi;font-size:max(9px,1.6cqi);font-weight:800;color:rgba(245,244,238,.4);transition:color .5s}
.lead-check{display:grid;place-items:center;width:2.6cqi;height:2.6cqi;border-radius:50%;border:1px solid rgba(245,244,238,.25);font-size:max(8px,1.4cqi);color:transparent;transition:background .5s,color .5s,border-color .5s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.is-done .lead-status{color:var(--paper)}
.is-done .lead-check{background:var(--orange);border-color:var(--orange);color:var(--ink);transform:scale(1.08)}

/* SVG links, drawn in screen space by hero-scene.js so they follow every tilt. */
.scene-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.scene-world{z-index:1}
.link path{fill:none;stroke-linecap:round}
.link-base{stroke:rgba(245,244,238,.16);stroke-width:1}
.link-dots{stroke:rgba(255,160,130,.55);stroke-width:1.6;stroke-dasharray:0 9;animation:link-dots 2.8s linear infinite}
@keyframes link-dots{to{stroke-dashoffset:-27}}
.link-glow{stroke:var(--orange);stroke-width:1.6;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.35;transition:opacity .8s,stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1);
  filter:drop-shadow(0 0 3px rgba(255,99,59,.9))}
.link.is-lit .link-glow{opacity:.95}
.link-comet{stroke:#ffd8c9;stroke-width:2.6;stroke-dasharray:.16 1.2;stroke-dashoffset:.16;opacity:0;filter:drop-shadow(0 0 4px rgba(255,120,80,1))}
.link-node{fill:var(--stage-ink);stroke:rgba(245,244,238,.55);stroke-width:1.2;transition:fill .5s,stroke .5s}
.link.is-lit .link-node{fill:var(--orange);stroke:#ffd8c9}
.link-pulse{opacity:0}
.link.is-travelling .link-comet,.link.is-travelling .link-pulse{opacity:1}

/* Entrance: panels arrive from depth, staggered. Leaves fade so 3D stays intact. */
.is-intro .panel{transition:none}
.hero-stage.is-ready .panel-float{transition:none}
.panel .card-face,.panel .card-layer,.panel .panel-tag{transition-property:opacity,box-shadow,background,color,border-color;transition-duration:.9s}
.is-intro .panel{transform:translate3d(calc(var(--x) * 1.1),calc(var(--y) * 1.1 + 8cqi),calc(var(--z) - 34cqi)) rotateX(-18deg)}
.is-intro .card-face,.is-intro .card-layer,.is-intro .panel-tag{opacity:0}
.is-intro .link{opacity:0}
.hero-stage.is-entering .panel{transition:transform 1.5s cubic-bezier(.16,.84,.24,1)}
.hero-stage.is-entering .panel-ads{transition-delay:.05s}
.hero-stage.is-entering .panel-web{transition-delay:.22s}
.hero-stage.is-entering .panel-lead{transition-delay:.4s}
.hero-stage.is-entering .panel-ads :is(.card-face,.card-layer,.panel-tag){transition-delay:.05s}
.hero-stage.is-entering .panel-web :is(.card-face,.card-layer,.panel-tag){transition-delay:.22s}
.hero-stage.is-entering .panel-lead :is(.card-face,.card-layer,.panel-tag){transition-delay:.4s}
.link{transition:opacity 1s .9s}

.hero-stage.is-paused *,.hero-stage.is-paused *:before,.hero-stage.is-paused *:after{animation-play-state:paused!important}

/* Wider screens */
@media(min-width:1600px){
  .hero-has-scene .hero-stage{max-height:none}
  .stage-steps li{font-size:12px}
}

/* Tablet: stack the scene below the copy so neither gets cramped. */
@media(max-width:900px){
  .hero-has-scene{grid-template-columns:1fr;gap:44px;padding-bottom:56px}
  .hero-has-scene h1{font-size:clamp(52px,9.4vw,80px);letter-spacing:-3.6px}
  .hero-has-scene .hero-description{font-size:15px;max-width:520px}
  .hero-has-scene .hero-actions{flex-direction:row;align-items:center}
  .hero-has-scene .hero-stage{width:100%;max-width:620px;aspect-ratio:1/.92;border-top-right-radius:80px}
  .hero-has-scene .scene-world{top:50%}
}

/* Mobile: simplified scene beneath copy and CTA. */
@media(max-width:600px){
  .hero-has-scene{gap:38px;padding-bottom:44px}
  .hero-has-scene h1{font-size:clamp(49px,12.2vw,73px);letter-spacing:-3.6px}
  .hero-has-scene .hero-stage{aspect-ratio:1/1.2;border-radius:4px 64px 4px 4px}
  .stage-topline{top:18px;left:18px;right:34px;font-size:8px}
  .stage-topline span:last-child{display:none}
  .stage-steps{left:18px;right:18px;bottom:14px;padding-top:11px;gap:6px}
  .stage-steps li{font-size:10px;gap:6px}
  .stage-steps li span{min-width:22px;height:18px;font-size:8px}
  .scene-world{left:47%;top:50%;transform:translateY(calc(var(--lift) * -4cqi)) rotateX(calc(9deg + var(--tilt-x))) rotateY(calc(-18deg + var(--tilt-y))) rotateZ(-1deg)}
  .panel-ads{--x:-15cqi;--y:-37cqi;--z:-6cqi;--w:54cqi}
  .panel-web{--x:5cqi;--y:-1cqi;--z:2cqi;--w:52cqi}
  .panel-lead{--x:20cqi;--y:32cqi;--z:10cqi;--w:44cqi}
  .site-nav span,.lead-head small{display:none}
  .card-face{padding-top:4.4cqi}
  .panel-lead .card-face{padding-top:4.6cqi}
  .site-hero{padding-bottom:2.6cqi;grid-template-columns:1.8fr 1fr}
  .panel-float{animation-duration:calc(var(--float,7s) * 1.3)}
}

/* Compact stages (small laptops, tablets, phones): drop secondary detail so panels keep their spacing. */
@container (max-width:520px){
  .organic,.site-features,.lead-fields span:nth-child(3){display:none}
  .site-hero{padding-bottom:2.6cqi;grid-template-columns:1.8fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  .panel-float,.link-dots,.lead-ring,.search-caret{animation:none!important}
  .hero-stage *{transition-duration:0s!important;transition-delay:0s!important}
}

/* Web tag sits on the right of the browser bar. */
.panel-web .browser-bar{height:5.2cqi}

/* Link anchor points on panel edges */
.panel-ads [data-anchor=ads-out]{right:0;top:54%}
.panel-web [data-anchor=web-in]{left:84%;top:0}
.panel-web [data-anchor=web-out]{right:0;top:42%}
.panel-lead [data-anchor=lead-in]{left:80%;top:0}