:root{
  color-scheme:dark;
  --bg:#0B1E22;
  --bg2:#07171B;
  --surface:#10292D;
  --panel:rgba(16,41,45,.72);
  --panel-strong:rgba(16,41,45,.90);
  --line:rgba(255,255,255,.10);
  --line-accent:rgba(34,211,238,.20);
  --text:#F8FAFC;
  --muted:#A8B8C3;
  --muted-2:#718891;
  --cyan:#06B6D4;
  --cyan-soft:#22D3EE;
  --cyan-dark:#0891B2;
  --blue:#3B82F6;
  --indigo:#312E81;
  --violet:#3B82F6;
  --mint:#10B981;
  --navy:#0F172A;
  --soft:#E6F8F9;
  --wrap:1180px;
  --shadow:0 28px 90px rgba(0,0,0,.42);
}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg);}body{margin:0;min-width:320px;overflow-x:hidden;background:radial-gradient(circle at 12% -8%,rgba(6,182,212,.18),transparent 34%),radial-gradient(circle at 88% 12%,rgba(59,130,246,.13),transparent 30%),radial-gradient(circle at 52% 100%,rgba(8,145,178,.10),transparent 28%),linear-gradient(180deg,#07171B 0%,#0B1E22 52%,#07161A 100%);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}body:before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.wrap{width:min(calc(100% - 40px),var(--wrap));margin:auto}.header{position:fixed;z-index:90;inset:0 0 auto;padding:16px 0;transition:.3s}.header.scrolled{background:rgba(11,30,34,.84);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);border-bottom:1px solid rgba(255,255,255,.07);}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em}.mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#062126;background:linear-gradient(145deg,#CFFAFE,#22D3EE 38%,#06B6D4 68%,#0891B2);box-shadow:0 10px 34px rgba(6,182,212,.24),inset 0 1px 0 rgba(255,255,255,.55);}.desktop{display:flex;gap:24px;color:#B8C8D0;font-size:.92rem;}.desktop a:hover{color:#fff}.nav-actions{display:flex;align-items:center;gap:9px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:15px;border:1px solid transparent;font-weight:750;letter-spacing:-.015em;transition:.22s;cursor:pointer}.btn:hover{transform:translateY(-2px)}.primary{color:#062126;background:linear-gradient(135deg,#CFFAFE 0%,#22D3EE 34%,#06B6D4 67%,#3B82F6 100%);box-shadow:0 11px 34px rgba(6,182,212,.24),inset 0 1px 0 rgba(255,255,255,.65);}.ghost{background:rgba(16,41,45,.58);border-color:rgba(255,255,255,.10);}.big{min-height:54px;padding:0 23px}.menu{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(16,41,45,.62);}.mobile{display:none;position:fixed;z-index:80;top:75px;left:18px;right:18px;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(11,30,34,.97);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);box-shadow:var(--shadow);}.mobile.open{display:grid}.mobile a{padding:11px 10px;border-radius:10px}.mobile a:hover{background:rgba(255,255,255,.055)}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.06;letter-spacing:-.04em}h1{font-size:clamp(3.3rem,8vw,7.5rem);font-weight:800;margin-bottom:22px}h2{font-size:clamp(2.25rem,5vw,4.5rem);font-weight:780;margin-bottom:18px}h3{font-size:1.25rem;margin-bottom:10px}.lead{max-width:700px;color:var(--muted);font-size:clamp(1.03rem,2vw,1.22rem);}.grad{color:transparent;background:linear-gradient(110deg,#FFFFFF 4%,#CFFAFE 29%,#22D3EE 55%,#06B6D4 72%,#3B82F6 96%);background-clip:text;-webkit-background-clip:text;}.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:#A5F3FC;font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;}.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}.glass{background:linear-gradient(145deg,rgba(16,41,45,.78),rgba(7,23,27,.55));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);}.hero{min-height:100svh;padding:148px 0 86px;display:grid;align-items:center}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}.trust{display:flex;gap:10px 18px;flex-wrap:wrap;color:#A9BBC4;margin-top:33px;font-size:.9rem;}.trust span{display:flex;align-items:center;gap:7px}.trust span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(16,185,129,.48);}.hero-art{position:relative;min-height:610px;display:grid;place-items:center;perspective:1000px}.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7}.o1{width:240px;height:240px;background:rgba(6,182,212,.23);top:18%;left:2%;}.o2{width:260px;height:260px;background:rgba(59,130,246,.15);right:0;bottom:16%;}.phone{width:min(315px,80vw);aspect-ratio:.51;padding:10px;border-radius:45px;background:linear-gradient(145deg,#24464C,#071417 24%,#10292D 84%);box-shadow:0 55px 120px rgba(0,0,0,.50),0 0 0 1px rgba(34,211,238,.15),inset 0 1px 0 rgba(255,255,255,.07);transform:rotateY(-6deg) rotateX(3deg);animation:floatPhone 6s ease-in-out infinite;}.screen{height:100%;overflow:hidden;position:relative;padding:26px 18px;border-radius:37px;background:radial-gradient(circle at 50% 0,rgba(6,182,212,.22),transparent 34%),linear-gradient(180deg,#0D252A,#061316 74%);}.island{width:92px;height:24px;border-radius:20px;background:#010203;margin:-18px auto 22px}.beam{position:absolute;left:14px;right:14px;top:22%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),#CFFAFE,var(--cyan),transparent);box-shadow:0 0 18px rgba(34,211,238,.92);animation:scan 4.2s ease-in-out infinite;}.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.phone-top i{width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.app-card{padding:18px;border-radius:22px;background:linear-gradient(145deg,rgba(6,182,212,.13),rgba(16,41,45,.50));border:1px solid rgba(34,211,238,.17);}.app-card small{color:#8fa2b1}.app-card h3{font-size:1.3rem;margin:6px 0 17px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid div{min-height:88px;padding:11px;border-radius:15px;background:rgba(16,41,45,.58);border:1px solid rgba(255,255,255,.07);}.mini-grid b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(6,182,212,.14);color:var(--cyan-soft);margin-bottom:9px;}.mini-grid span{font-size:.82rem;font-weight:700}.alert{margin:10px 0 0;padding:11px;border-radius:14px;background:rgba(16,41,45,.62);font-size:.78rem;color:#C1D0D7;}.float{position:absolute;padding:10px 13px;border-radius:14px;background:rgba(9,28,32,.82);border:1px solid rgba(34,211,238,.14);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 12px 40px rgba(0,0,0,.30);font-size:.8rem;color:#D8E7EC;animation:drift 5s ease-in-out infinite;}.f1{left:1%;top:17%}.f2{right:-2%;top:45%;animation-delay:-2s}.f3{left:4%;bottom:14%;animation-delay:-3s}.ticker{overflow:hidden;border-block:1px solid rgba(34,211,238,.09);background:rgba(16,41,45,.24);color:#A6B9C2;font-size:.8rem;letter-spacing:.12em;white-space:nowrap;}.ticker div{width:max-content;padding:15px 0;animation:ticker 28s linear infinite}.section{padding:108px 0}.alt{background:linear-gradient(180deg,rgba(16,41,45,.18),rgba(5,20,23,.12));}.heading{max-width:780px;margin-bottom:45px}.center{text-align:center;margin-inline:auto}.center .lead{margin-inline:auto}.cards{display:grid;gap:15px}.four{grid-template-columns:repeat(4,1fr)}.three{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:repeat(2,1fr)}.card,.row-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(16,41,45,.74),rgba(7,24,28,.52));border:1px solid rgba(255,255,255,.10);border-radius:24px;}.card{padding:25px}.card p,.row-card p{color:var(--muted);margin-bottom:0}.icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:20px;background:rgba(6,182,212,.12);border:1px solid rgba(34,211,238,.18);color:var(--cyan-soft);font-weight:800;}.flow{margin-top:45px;padding:31px;display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:space-between;border-radius:30px}.flow div{min-width:135px;padding:19px 15px;text-align:center;border-radius:17px;background:rgba(16,41,45,.58);border:1px solid rgba(255,255,255,.08);}.flow small{display:block;color:#718795}.flow i{font-style:normal;color:#5e7685}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}.qr-stage{min-height:510px;position:relative;display:grid;place-items:center;border-radius:32px;background:radial-gradient(circle at 50% 40%,rgba(6,182,212,.18),transparent 28%),radial-gradient(circle at 72% 72%,rgba(59,130,246,.12),transparent 29%),rgba(16,41,45,.36);}.rings{position:absolute;width:390px;height:390px;border:1px solid rgba(34,211,238,.11);border-radius:50%;}.rings:before,.rings:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(34,211,238,.12);inset:16%;}.rings:after{inset:33%}.qr{position:relative;width:215px;height:215px;padding:17px;border-radius:27px;background:#ecfbff;box-shadow:0 35px 90px rgba(0,0,0,.38);transform:rotate(-3deg)}.qr div,.mini-qr{width:100%;height:100%;background:repeating-conic-gradient(#071018 0 25%,#eafcff 0 50%) 50%/26px 26px}.qr-stage>b{position:absolute;bottom:65px}.stack{display:grid;gap:13px;margin-top:27px}.row-card{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:19px 21px}.row-card .icon{margin:0}.family{padding:52px;border-radius:32px;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:27px}.stats div{padding:19px;border-radius:18px;background:rgba(16,41,45,.50);border:1px solid rgba(255,255,255,.09);}.stats b{display:block;font-size:1.5rem;letter-spacing:-.04em}.stats span{font-size:.79rem;color:var(--muted)}.family-art{position:relative;height:320px;display:grid;place-items:center}.core,.family-art span{position:absolute;width:72px;height:72px;border-radius:23px;background:rgba(16,41,45,.62);border:1px solid rgba(255,255,255,.10);}.core{width:108px;height:108px;border-radius:31px;color:#062126;font-weight:900;background:linear-gradient(145deg,#22D3EE,#06B6D4 55%,#3B82F6);box-shadow:0 22px 70px rgba(6,182,212,.24);}.family-art span{position:absolute;width:72px;height:72px;border-radius:23px;background:rgba(255,255,255,.06);border:1px solid var(--line)}.p1{top:8px;left:20%}.p2{top:18%;right:10%}.p3{bottom:5%;left:23%}.p4{bottom:14%;right:13%}.tall{min-height:395px;display:flex;flex-direction:column}.tall em{align-self:flex-start;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(16,41,45,.56);font-size:.77rem;font-style:normal;color:#CAD8DE;margin-bottom:21px;}.tall h3{font-size:2rem}.tall ul{margin:auto 0 0;padding:0;list-style:none;color:#c2ced6}.tall li{padding:4px 0}.tall li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:9px}.violet{box-shadow:inset 0 -120px 140px rgba(30,41,59,.22),inset 0 1px 0 rgba(255,255,255,.025);}.blue{box-shadow:inset 0 -120px 140px rgba(6,182,212,.10),inset 0 1px 0 rgba(255,255,255,.025);}.steps small{display:block;color:var(--cyan);font-weight:800;letter-spacing:.12em;margin-bottom:30px}.products .product{height:185px;display:grid;place-items:center;border-radius:18px;margin-bottom:21px;background:radial-gradient(circle,rgba(6,182,212,.16),transparent 40%),rgba(16,41,45,.38);border:1px solid rgba(255,255,255,.07);}.mini-qr{width:100px;height:100px;border:9px solid #eafcff;border-radius:19px;box-shadow:0 23px 50px rgba(0,0,0,.3)}.price{display:block;margin-top:17px;font-size:1.55rem}.price small{font-size:.78rem;color:var(--muted);font-weight:600}.security{display:grid;grid-template-columns:1.05fr .95fr;gap:15px}.security-hero{min-height:410px;border-radius:28px;padding:37px;text-align:center;display:grid;place-items:center;align-content:center}.lock{width:124px;height:145px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(34,211,238,.24),rgba(59,130,246,.16));border:1px solid rgba(34,211,238,.24);color:#CFFAFE;font-size:3rem;box-shadow:0 22px 70px rgba(0,0,0,.30);}.security-hero h3{font-size:2rem;margin-top:25px}.security-hero p{max-width:550px;color:var(--muted)}.download{border-radius:34px;padding:64px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(6,182,212,.22),transparent 38%),radial-gradient(circle at 90% 100%,rgba(59,130,246,.13),transparent 32%),linear-gradient(145deg,rgba(16,41,45,.72),rgba(7,23,27,.54));}.download .lead{margin-inline:auto}.download .btn{margin-top:24px}.faq{max-width:900px;margin:auto;display:grid;gap:10px}.faq details{border:1px solid rgba(255,255,255,.10);border-radius:17px;background:rgba(16,41,45,.42);padding:0 20px;}.faq summary{cursor:pointer;font-weight:750;padding:18px 0}.faq p{color:var(--muted);padding-bottom:18px}footer{padding:56px 0 28px;border-top:1px solid rgba(34,211,238,.08);background:rgba(7,23,27,.58);}.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.foot>div:first-child p{max-width:360px;color:var(--muted);font-size:.9rem;margin-top:15px}.foot b{display:block;margin-bottom:9px;font-size:.85rem}.foot a:not(.brand){display:block;color:var(--muted);padding:4px 0;font-size:.9rem}.copyright{margin-top:38px;padding-top:21px;border-top:1px solid rgba(255,255,255,.07);color:#728392;font-size:.82rem}.subhero{padding:145px 0 58px}.subhero h1{font-size:clamp(2.8rem,7vw,5.5rem)}.legal{display:grid;grid-template-columns:230px minmax(0,780px);gap:50px;align-items:start}.legal nav{position:sticky;top:105px;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(16,41,45,.42);}.legal nav a{display:block;padding:7px 8px;color:var(--muted);font-size:.88rem}.copy h2{font-size:1.8rem;margin-top:40px}.copy p,.copy li{color:#a9b7c2}.notice{padding:17px 19px;border-radius:15px;background:rgba(6,182,212,.08);border:1px solid rgba(34,211,238,.18);color:#C4DCE3;}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.support-card{padding:28px;border:1px solid rgba(255,255,255,.10);border-radius:24px;background:rgba(16,41,45,.46);}.reveal{opacity:0;transform:translateY(20px);transition:.72s cubic-bezier(.22,1,.36,1)}.reveal.on{opacity:1;transform:none}@keyframes floatPhone{50%{transform:rotateY(-4deg) rotateX(2deg) translateY(-13px)}}@keyframes scan{0%,100%{top:21%;opacity:.2}50%{top:76%;opacity:.9}}@keyframes drift{50%{transform:translateY(-10px)}}@keyframes ticker{to{transform:translateX(-50%)}}@media(max-width:980px){.desktop,.nav-actions .ghost{display:none}.menu{display:block}.hero-grid,.split,.family,.security,.support-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy .lead{margin:auto}.actions,.trust{justify-content:center}.hero-art{min-height:560px}.four{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:1fr}.flow{grid-template-columns:1fr;justify-items:stretch}.flow i{transform:rotate(90deg);text-align:center}.foot{grid-template-columns:1.4fr 1fr 1fr}.legal{grid-template-columns:1fr}.legal nav{position:static;display:flex;flex-wrap:wrap}}@media(max-width:650px){.wrap{width:min(calc(100% - 28px),var(--wrap))}.section{padding:80px 0}.header{padding:11px 0}.nav-actions .primary{display:none}.hero{padding-top:120px}.hero-art{min-height:515px}.float{font-size:.72rem}.four,.two,.stats{grid-template-columns:1fr}.family,.download{padding:27px 20px}.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}.actions .btn{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* ======================================================
   RINGOWNER HERO — PRODUCTION DESKTOP POLISH
   ====================================================== */

@media (min-width: 981px) {
  .hero {
    min-height: 100vh;
    padding-top: 116px;
    padding-bottom: 42px;
  }

  .hero .wrap {
    width: min(calc(100% - 48px), 1320px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 48px;
  }

  .hero h1 {
    font-size: clamp(4.2rem, 5.15vw, 5.45rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
    max-width: 720px;
    margin-bottom: 20px;
  }

  .hero-copy .lead {
    max-width: 660px;
    font-size: 1.08rem;
  }

  .hero-actions {
    margin-top: 25px;
  }

  .trust-row {
    margin-top: 25px;
  }

  .hero-art {
    min-height: 555px;
  }

  .phone {
    width: 330px;
  }

  .f1 {
    left: -1%;
    top: 18%;
  }

  .f2 {
    right: -2%;
    top: 47%;
  }

  .f3 {
    left: 1%;
    bottom: 12%;
  }
}

@media (min-width: 1400px) {
  .hero h1 {
    font-size: 5.45rem;
  }

  .hero-grid {
    gap: 58px;
  }

  .phone {
    width: 340px;
  }
}
/* ======================================================
   RINGOWNER HERO — FLOATING ALERT POLISH
   ====================================================== */

@media (min-width: 981px) {
  .phone {
    position: relative;
    z-index: 2;
  }

  .float {
    z-index: 3;
    white-space: nowrap;
  }

  .f1 {
    left: -8%;
    top: 30%;
  }

  .f2 {
    right: -6%;
    top: 56%;
  }

  .f3 {
    left: -5%;
    bottom: 12%;
  }
}
/* =========================================================
   RINGOWNER — FINAL PRODUCTION RESPONSIVE MASTER OVERRIDES
   320px → tablet → laptop → desktop → ultrawide
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

section[id],
article[id],
#download,
#faq,
#security,
#shop,
#family,
#vehicle,
#business,
#marketplace {
  scroll-margin-top: 104px;
}

/* -----------------------------------------
   LARGE DESKTOP / ULTRAWIDE
   ----------------------------------------- */
@media (min-width: 1440px) {
  .wrap {
    width: min(calc(100% - 64px), 1320px);
  }

  .hero {
    min-height: 100svh;
    padding-top: 126px;
    padding-bottom: 56px;
  }

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(470px, 0.92fr);
    gap: 72px;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(5rem, 5.25vw, 6.2rem);
    line-height: 0.96;
  }

  .hero-copy .lead {
    max-width: 690px;
    font-size: 1.12rem;
  }

  .hero-art {
    min-height: 600px;
  }

  .phone {
    width: 350px;
  }

  .section {
    padding: 118px 0;
  }
}

/* -----------------------------------------
   NORMAL DESKTOP / LAPTOP
   1180 → 1439
   ----------------------------------------- */
@media (min-width: 1180px) and (max-width: 1439px) {
  .wrap {
    width: min(calc(100% - 48px), 1180px);
  }

  .hero {
    min-height: 100svh;
    padding-top: 116px;
    padding-bottom: 44px;
  }

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.06fr)
      minmax(410px, 0.94fr);
    gap: 44px;
  }

  .hero h1 {
    max-width: 690px;
    font-size: clamp(4.2rem, 5.25vw, 5.45rem);
    line-height: 0.96;
  }

  .hero-copy .lead {
    max-width: 650px;
    font-size: 1.05rem;
  }

  .hero-art {
    min-height: 545px;
  }

  .phone {
    width: 325px;
  }

  .f1 {
    left: -5%;
    top: 29%;
  }

  .f2 {
    right: -3%;
    top: 56%;
  }

  .f3 {
    left: -3%;
    bottom: 12%;
  }
}

/* -----------------------------------------
   COMPACT LAPTOP
   981 → 1179
   ----------------------------------------- */
@media (min-width: 981px) and (max-width: 1179px) {
  .wrap {
    width: min(calc(100% - 40px), 1040px);
  }

  .desktop {
    gap: 17px;
    font-size: 0.86rem;
  }

  .nav-actions {
    gap: 7px;
  }

  .nav-actions .btn {
    padding-inline: 14px;
    font-size: 0.88rem;
  }

  .hero {
    min-height: 100svh;
    padding-top: 112px;
    padding-bottom: 42px;
  }

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(360px, 0.92fr);
    gap: 30px;
  }

  .hero h1 {
    max-width: 610px;
    font-size: clamp(3.6rem, 5.5vw, 4.65rem);
    line-height: 0.97;
  }

  .hero-copy .lead {
    max-width: 600px;
    font-size: 1rem;
  }

  .hero-art {
    min-height: 500px;
  }

  .phone {
    width: 292px;
  }

  .float {
    font-size: 0.72rem;
  }

  .f1 {
    left: -4%;
    top: 29%;
  }

  .f2 {
    right: -2%;
    top: 55%;
  }

  .f3 {
    left: -2%;
    bottom: 11%;
  }

  .section {
    padding: 92px 0;
  }

  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -----------------------------------------
   TABLET
   768 → 980
   ----------------------------------------- */
@media (min-width: 768px) and (max-width: 980px) {
  .wrap {
    width: min(calc(100% - 40px), 820px);
  }

  .header {
    padding: 13px 0;
  }

  .hero {
    min-height: auto;
    padding-top: 126px;
    padding-bottom: 58px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero h1 {
    max-width: 720px;
    margin-inline: auto;
    font-size: clamp(4rem, 8vw, 5.3rem);
    line-height: 0.97;
  }

  .hero-copy .lead {
    max-width: 680px;
    margin-inline: auto;
  }

  .actions,
  .trust {
    justify-content: center;
  }

  .hero-art {
    min-height: 520px;
  }

  .phone {
    width: 310px;
  }

  .float {
    font-size: 0.75rem;
  }

  .f1 {
    left: 9%;
    top: 24%;
  }

  .f2 {
    right: 7%;
    top: 52%;
  }

  .f3 {
    left: 12%;
    bottom: 12%;
  }

  .section {
    padding: 86px 0;
  }

  .heading {
    margin-bottom: 38px;
  }

  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .three > :last-child {
    grid-column: 1 / -1;
  }

  .split,
  .family,
  .security,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .qr-stage {
    min-height: 460px;
  }

  .family {
    gap: 24px;
  }

  .family-art {
    min-height: 300px;
  }

  .flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .flow div {
    width: 100%;
  }

  .foot {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .foot > div:first-child {
    grid-column: 1 / -1;
  }

  .legal {
    grid-template-columns: 1fr;
  }

  .legal nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* -----------------------------------------
   LARGE MOBILE / SMALL TABLET
   651 → 767
   ----------------------------------------- */
@media (min-width: 651px) and (max-width: 767px) {
  .wrap {
    width: min(calc(100% - 32px), 700px);
  }

  .hero {
    min-height: auto;
    padding-top: 118px;
    padding-bottom: 48px;
  }

  .hero h1 {
    max-width: 650px;
    margin-inline: auto;
    font-size: clamp(3.5rem, 9vw, 4.4rem);
    line-height: 0.98;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .lead {
    margin-inline: auto;
  }

  .actions,
  .trust {
    justify-content: center;
  }

  .hero-art {
    min-height: 485px;
  }

  .phone {
    width: 285px;
  }

  .f1 {
    left: 3%;
  }

  .f2 {
    right: 3%;
  }

  .f3 {
    left: 6%;
  }

  .section {
    padding: 78px 0;
  }

  .four,
  .three,
  .two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .three > :last-child {
    grid-column: 1 / -1;
  }

  .split,
  .family,
  .security,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .foot {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot > div:first-child {
    grid-column: 1 / -1;
  }
}

/* -----------------------------------------
   MOBILE
   421 → 650
   ----------------------------------------- */
@media (min-width: 421px) and (max-width: 650px) {
  .wrap {
    width: min(calc(100% - 28px), 600px);
  }

  .header {
    padding: 11px 0;
  }

  .brand {
    font-size: 0.94rem;
  }

  .mark {
    width: 38px;
    height: 38px;
  }

  .menu {
    display: block;
  }

  .hero {
    min-height: auto;
    padding-top: 112px;
    padding-bottom: 44px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero .eyebrow {
    justify-content: center;
    font-size: 0.68rem;
  }

  .hero h1 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(2.95rem, 11.5vw, 3.85rem);
    line-height: 0.99;
    letter-spacing: -0.052em;
  }

  .hero-copy .lead {
    max-width: 100%;
    margin-inline: auto;
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 27px;
  }

  .actions .btn {
    width: 100%;
    min-height: 55px;
  }

  .trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 10px 20px;
    margin-top: 28px;
    font-size: 0.82rem;
  }

  .hero-art {
    min-height: 455px;
    overflow: visible;
  }

  .phone {
    width: 270px;
  }

  /* Floating desktop chips become cluttered on mobile */
  .float {
    display: none;
  }

  .section {
    padding: 72px 0;
  }

  h2 {
    font-size: clamp(2.3rem, 9vw, 3.15rem);
    line-height: 1.02;
  }

  .heading {
    margin-bottom: 32px;
  }

  .heading .lead {
    font-size: 0.98rem;
  }

  .four,
  .three,
  .two,
  .cards {
    grid-template-columns: 1fr;
  }

  .three > :last-child {
    grid-column: auto;
  }

  .card {
    padding: 22px;
    border-radius: 21px;
  }

  .flow {
    margin-top: 32px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 7px;
    border-radius: 24px;
  }

  .flow div {
    width: 100%;
    min-width: 0;
  }

  .flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .split,
  .family,
  .security,
  .support-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .qr-stage {
    min-height: 390px;
  }

  .rings {
    width: 310px;
    height: 310px;
  }

  .qr {
    width: 178px;
    height: 178px;
  }

  .family {
    padding: 27px 20px;
    border-radius: 26px;
  }

  .family-art {
    height: 285px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .tall {
    min-height: 330px;
  }

  .products .product {
    height: 165px;
  }

  .security {
    gap: 13px;
  }

  .security-hero {
    min-height: 355px;
    padding: 26px 20px;
  }

  .security .two {
    grid-template-columns: 1fr;
  }

  .download {
    padding: 40px 20px;
    border-radius: 27px;
  }

  .download h2 {
    font-size: clamp(2.25rem, 8.7vw, 3rem);
  }

  .download .btn {
    width: 100%;
  }

  .faq {
    gap: 8px;
  }

  .faq details {
    padding-inline: 16px;
  }

  .faq summary {
    font-size: 0.94rem;
  }

  .foot {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .foot > div:first-child {
    grid-column: auto;
  }

  .copyright {
    margin-top: 30px;
  }

  .subhero {
    padding-top: 118px;
  }

  .legal {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legal nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }
}

/* -----------------------------------------
   SMALL MOBILE
   320 → 420
   ----------------------------------------- */
@media (max-width: 420px) {
  .wrap {
    width: calc(100% - 24px);
  }

  .header {
    padding: 10px 0;
  }

  .brand {
    gap: 8px;
    font-size: 0.9rem;
  }

  .mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .menu {
    width: 44px;
    height: 44px;
  }

  .mobile {
    top: 68px;
    left: 12px;
    right: 12px;
  }

  .hero {
    min-height: auto;
    padding-top: 102px;
    padding-bottom: 38px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero .eyebrow {
    justify-content: center;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .hero h1 {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(2.6rem, 12vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.052em;
  }

  .hero-copy .lead {
    margin-inline: auto;
    font-size: 0.93rem;
    line-height: 1.72;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 24px;
  }

  .actions .btn {
    width: 100%;
    min-height: 54px;
    padding-inline: 14px;
    font-size: 0.92rem;
  }

  .trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 12px;
    margin-top: 25px;
    text-align: left;
    font-size: 0.77rem;
  }

  .hero-art {
    min-height: 405px;
  }

  .phone {
    width: min(245px, 74vw);
  }

  .float {
    display: none;
  }

  .section {
    padding: 64px 0;
  }

  h2 {
    font-size: clamp(2.15rem, 10vw, 2.85rem);
    line-height: 1.02;
  }

  .heading {
    margin-bottom: 28px;
  }

  .lead {
    font-size: 0.95rem;
  }

  .four,
  .three,
  .two,
  .cards,
  .stats {
    grid-template-columns: 1fr;
  }

  .three > :last-child {
    grid-column: auto;
  }

  .card {
    padding: 20px;
    border-radius: 20px;
  }

  .flow {
    padding: 18px;
    grid-template-columns: 1fr;
    gap: 6px;
    border-radius: 22px;
  }

  .flow div {
    min-width: 0;
    width: 100%;
  }

  .flow i {
    transform: rotate(90deg);
    text-align: center;
  }

  .split,
  .family,
  .security,
  .support-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .qr-stage {
    min-height: 350px;
  }

  .rings {
    width: 270px;
    height: 270px;
  }

  .qr {
    width: 155px;
    height: 155px;
    padding: 13px;
  }

  .qr-stage > b {
    bottom: 44px;
    font-size: 0.9rem;
  }

  .family {
    padding: 24px 17px;
    border-radius: 24px;
  }

  .family-art {
    height: 265px;
  }

  .core {
    width: 92px;
    height: 92px;
  }

  .family-art span {
    width: 62px;
    height: 62px;
  }

  .tall {
    min-height: 310px;
  }

  .products .product {
    height: 150px;
  }

  .security-hero {
    min-height: 335px;
    padding: 24px 18px;
  }

  .lock {
    width: 108px;
    height: 126px;
  }

  .download {
    padding: 34px 17px;
    border-radius: 24px;
  }

  .download .btn {
    width: 100%;
  }

  .faq details {
    padding: 0 14px;
  }

  .faq summary {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .foot {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .subhero {
    padding-top: 106px;
  }
}

/* -----------------------------------------
   SHORT HEIGHT LAPTOP / LANDSCAPE
   ----------------------------------------- */
@media (min-width: 981px) and (max-height: 760px) {
  .hero {
    min-height: auto;
    padding-top: 102px;
    padding-bottom: 35px;
  }

  .hero h1 {
    font-size: clamp(3.7rem, 5vw, 4.8rem);
  }

  .hero-art {
    min-height: 480px;
  }

  .phone {
    width: 290px;
  }

  .hero-copy .lead {
    font-size: 0.98rem;
  }

  .trust {
    margin-top: 20px;
  }
}

/* -----------------------------------------
   MOBILE LANDSCAPE
   ----------------------------------------- */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 600px) {
  .hero {
    min-height: auto;
    padding-top: 92px;
  }

  .hero-art {
    min-height: 360px;
  }

  .phone {
    width: 230px;
  }

  .float {
    display: none;
  }
}

/* -----------------------------------------
   ACCESSIBILITY / TOUCH
   ----------------------------------------- */
@media (pointer: coarse) {
  .btn,
  .menu,
  .mobile a,
  .faq summary {
    min-height: 44px;
  }

  .btn:hover {
    transform: none;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass,
  .header.scrolled,
  .mobile {
    background-color: rgba(8, 13, 20, 0.96);
  }
}
/* =========================================================
   TABLET / MOBILE — CLEAN HERO ART
   Floating alerts remain desktop-only
   ========================================================= */

@media (max-width: 980px) {
  .float {
    display: none !important;
  }
}
/* =========================================================
   RINGOWNER — PRODUCTION BRAND LOGO
   ========================================================= */

.brand-logo{width:38px;height:38px;display:block;flex:0 0 38px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 8px 18px rgba(6,182,212,.20));}

@media (max-width: 420px) {
  .brand-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* =========================================================
   RINGOWNER — BRAND-ALIGNED PRODUCTION POLISH
   Visual-only. No layout contract or JS behavior changed.
   ========================================================= */

::selection {
  background: rgba(34, 211, 238, 0.24);
  color: #F8FAFC;
}

.desktop a,
.foot a:not(.brand),
.mobile a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.desktop a:hover,
.foot a:not(.brand):hover {
  color: #CFFAFE;
}

.btn:focus-visible,
.menu:focus-visible,
.desktop a:focus-visible,
.mobile a:focus-visible,
.faq summary:focus-visible,
.brand:focus-visible {
  outline: 2px solid #22D3EE;
  outline-offset: 4px;
}

@media (hover: hover) {
  .card,
  .row-card,
  .flow div,
  .stats div,
  .faq details,
  .support-card {
    transition:
      transform .24s ease,
      border-color .24s ease,
      background-color .24s ease,
      box-shadow .24s ease;
  }

  .card:hover,
  .row-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 22px 56px rgba(0,0,0,.20);
  }
}

/* =========================================================
   RINGOWNER — REAL APP HERO SCREEN
   ========================================================= */

.phone.phone-real {
  aspect-ratio: 841 / 1870;
  padding: 8px;
  background:
    linear-gradient(
      145deg,
      #24464c,
      #071417 24%,
      #10292d 84%
    );
  box-shadow:
    0 55px 120px rgba(0,0,0,.50),
    0 0 0 1px rgba(34,211,238,.15),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.phone-real .real-app-screen {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 37px;
  background: #eef8fa;
}

.hero-app-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 420px) {
  .phone-real .real-app-screen {
    border-radius: 32px;
  }
}

/* =========================================================
   RINGOWNER — ADD VEHICLE REAL APP PREVIEW
   ========================================================= */

.vehicle-feature-stage {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(
      circle at 48% 30%,
      rgba(6,182,212,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 78% 78%,
      rgba(59,130,246,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.78),
      rgba(7,23,27,.58)
    );
}

.vehicle-feature-stage::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.10);
  box-shadow:
    0 0 0 55px rgba(34,211,238,.025),
    0 0 0 110px rgba(34,211,238,.018);
}

.feature-device {
  position: relative;
  z-index: 2;
  width: min(320px, 82%);
  aspect-ratio: 841 / 1870;
  padding: 8px;
  border-radius: 42px;
  background:
    linear-gradient(
      145deg,
      #24464c,
      #071417 24%,
      #10292d 84%
    );
  box-shadow:
    0 40px 95px rgba(0,0,0,.42),
    0 0 0 1px rgba(34,211,238,.15),
    inset 0 1px 0 rgba(255,255,255,.07);
  transform: rotate(-2deg);
}

.feature-device-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: #eef8fa;
}

.feature-app-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 980px) {
  .vehicle-feature-stage {
    min-height: 590px;
  }

  .feature-device {
    width: min(300px, 78%);
    transform: none;
  }
}

@media (max-width: 650px) {
  .vehicle-feature-stage {
    min-height: 520px;
    border-radius: 26px;
  }

  .vehicle-feature-stage::before {
    width: 320px;
    height: 320px;
  }

  .feature-device {
    width: min(260px, 78%);
    border-radius: 36px;
    padding: 7px;
  }

  .feature-device-screen {
    border-radius: 29px;
  }
}

@media (max-width: 420px) {
  .vehicle-feature-stage {
    min-height: 470px;
  }

  .feature-device {
    width: min(235px, 76%);
  }
}

/* =========================================================
   RINGOWNER — PREMIUM MARKETPLACE SHOWCASE
   Screenshots can be swapped in later without restructuring.
   ========================================================= */

.marketplace-focus {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(59,130,246,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 72%,
      rgba(6,182,212,.11),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      rgba(16,41,45,.18),
      rgba(5,20,23,.07)
    );
}

.marketplace-focus::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -260px;
  top: 12%;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,.07);
  box-shadow:
    0 0 0 70px rgba(34,211,238,.018),
    0 0 0 140px rgba(59,130,246,.012);
  pointer-events: none;
}

.marketplace-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 42px;
  align-items: end;
  margin-bottom: 42px;
}

.marketplace-copy {
  max-width: 850px;
}

.marketplace-signals {
  display: grid;
  grid-template-columns: repeat(2,auto);
  gap: 9px;
  justify-content: end;
}

.marketplace-signals span {
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.15);
  background: rgba(16,41,45,.62);
  color: #C9E8EE;
  font-size: .78rem;
  font-weight: 760;
  white-space: nowrap;
}

.marketplace-feature-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0,1.08fr)
    minmax(350px,.92fr);
  gap: 16px;
  align-items: stretch;
}

.market-feature {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.78),
      rgba(7,24,28,.54)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 24px 70px rgba(0,0,0,.18);
}

.market-feature > p {
  color: var(--muted);
  margin-bottom: 0;
}

.market-feature-top {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 17px;
}

.market-feature-top > div {
  min-width: 0;
}

.market-feature-top small {
  display: block;
  margin-bottom: 5px;
  color: var(--cyan-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.market-feature-top h3 {
  margin: 0;
  font-size: 1.42rem;
}

.market-feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(34,211,238,.16);
  background:
    linear-gradient(
      145deg,
      rgba(34,211,238,.17),
      rgba(59,130,246,.10)
    );
  color: #CFFAFE;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.market-feature-stack {
  display: grid;
  grid-template-rows: repeat(3,1fr);
  gap: 16px;
}

.market-feature-ar {
  min-height: 620px;
  display: flex;
  flex-direction: column;
}

.market-feature-ar::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -120px;
  bottom: -120px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.15),
      transparent 68%
    );
  pointer-events: none;
}

.market-ar-demo {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 380px;
  margin-top: 25px;
  border-radius: 23px;
  border: 1px solid rgba(34,211,238,.14);
  background:
    linear-gradient(
      180deg,
      rgba(134,168,168,.17),
      rgba(13,34,38,.80)
    ),
    radial-gradient(
      circle at 48% 36%,
      rgba(255,255,255,.08),
      transparent 30%
    );
}

.market-ar-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background:
    linear-gradient(
      90deg,
      transparent 49.5%,
      rgba(255,255,255,.05) 50%,
      transparent 50.5%
    ),
    linear-gradient(
      transparent 49.5%,
      rgba(255,255,255,.04) 50%,
      transparent 50.5%
    );
  background-size: 70px 70px;
}

.market-ar-toolbar {
  position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  top: 17px;
  min-height: 48px;
  padding: 7px 8px 7px 16px;
  border-radius: 15px;
  background: rgba(244,249,253,.94);
  color: #52626C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 13px 30px rgba(0,0,0,.18);
}

.market-ar-toolbar b {
  display: grid;
  place-items: center;
  height: 34px;
  min-width: 47px;
  padding-inline: 10px;
  border-radius: 11px;
  color: #062126;
  background:
    linear-gradient(
      135deg,
      #22D3EE,
      #06B6D4
    );
}

.market-ar-listing {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 52px auto;
  gap: 11px;
  align-items: center;
  min-width: 185px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(248,250,252,.96);
  color: #0F172A;
  box-shadow: 0 16px 35px rgba(0,0,0,.20);
}

.market-ar-listing-one {
  left: 10%;
  top: 31%;
}

.market-ar-listing-two {
  right: 8%;
  top: 53%;
}

.market-ar-thumb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  color: #066B80;
  font-size: .72rem;
  font-weight: 900;
  background:
    linear-gradient(
      145deg,
      #DFF8FF,
      #CFFAFE
    );
}

.market-ar-listing b,
.market-ar-listing small {
  display: block;
}

.market-ar-listing b {
  font-size: .85rem;
}

.market-ar-listing small {
  margin-top: 2px;
  color: #64748B;
}

.market-ar-reticle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 92px;
  height: 92px;
  transform: translate(-50%,-50%);
}

.market-ar-reticle::before,
.market-ar-reticle::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid rgba(207,250,254,.86);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 17px;
}

.market-ar-reticle::after {
  transform: rotate(90deg);
}

.market-ar-footer {
  position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  bottom: 17px;
  min-height: 56px;
  padding: 9px 10px 9px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 17px;
  background: rgba(4,11,13,.90);
  color: #F8FAFC;
  font-size: .82rem;
  font-weight: 750;
}

.market-ar-footer b {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: var(--cyan);
  color: #062126;
  font-size: 1.2rem;
}

.market-match-flow {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 24px;
  border-radius: 26px;
  display: grid;
  grid-template-columns:
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr);
  gap: 12px;
  align-items: center;
}

.market-match-flow > div {
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(16,41,45,.46);
  border: 1px solid rgba(255,255,255,.07);
}

.market-match-flow small,
.market-match-flow b,
.market-match-flow span {
  display: block;
}

.market-match-flow small {
  color: var(--cyan-soft);
  font-weight: 850;
  margin-bottom: 5px;
}

.market-match-flow b {
  font-size: .93rem;
}

.market-match-flow span {
  margin-top: 4px;
  color: var(--muted);
  font-size: .76rem;
}

.market-match-flow i {
  color: #66828A;
  font-style: normal;
  text-align: center;
}

/* Future real screenshots can replace the CSS mock stage
   without changing the marketplace section structure. */

@media (hover:hover) {

  .market-feature {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease;
  }

  .market-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(34,211,238,.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 28px 70px rgba(0,0,0,.23);
  }
}

@media (max-width:980px) {

  .marketplace-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .marketplace-signals {
    justify-content: start;
  }

  .marketplace-feature-layout {
    grid-template-columns: 1fr;
  }

  .market-feature-ar {
    min-height: 570px;
  }

  .market-match-flow {
    grid-template-columns: 1fr;
  }

  .market-match-flow i {
    transform: rotate(90deg);
  }
}

@media (max-width:650px) {

  .marketplace-signals {
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
  }

  .marketplace-signals span {
    text-align: center;
    white-space: normal;
  }

  .market-feature {
    padding: 21px;
    border-radius: 22px;
  }

  .market-feature-ar {
    min-height: auto;
  }

  .market-ar-demo {
    min-height: 400px;
  }

  .market-ar-listing {
    min-width: 155px;
    grid-template-columns: 42px auto;
    gap: 8px;
  }

  .market-ar-thumb {
    width: 42px;
    height: 42px;
  }

  .market-ar-listing-one {
    left: 5%;
    top: 29%;
  }

  .market-ar-listing-two {
    right: 5%;
    top: 54%;
  }

  .market-match-flow {
    padding: 18px;
    border-radius: 22px;
  }
}

@media (max-width:420px) {

  .marketplace-signals {
    gap: 7px;
  }

  .marketplace-signals span {
    padding: 8px 9px;
    font-size: .69rem;
  }

  .market-feature-top h3 {
    font-size: 1.22rem;
  }

  .market-ar-demo {
    min-height: 365px;
  }

  .market-ar-listing {
    min-width: 142px;
    padding: 8px;
  }

  .market-ar-listing b {
    font-size: .73rem;
  }

  .market-ar-listing small {
    font-size: .68rem;
  }
}

/* =========================================================
   RINGOWNER — MARKETPLACE ANCHOR / SPACING POLISH
   ========================================================= */

.marketplace-focus {
  padding-top: 76px;
}

.marketplace-focus .marketplace-copy h2 {
  max-width: 900px;
}

@media (max-width: 980px) {
  .marketplace-focus {
    padding-top: 70px;
  }
}

@media (max-width: 650px) {
  .marketplace-focus {
    padding-top: 62px;
  }
}

/* =========================================================
   RINGOWNER — MARKETPLACE FLAGSHIP CLOSE
   ========================================================= */

.marketplace-close {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: 34px;
  border-radius: 30px;

  display: grid;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(390px,.9fr);

  gap: 28px 42px;
  align-items: center;

  background:
    radial-gradient(
      circle at 96% 8%,
      rgba(59,130,246,.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 8% 94%,
      rgba(6,182,212,.14),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.88),
      rgba(7,23,27,.68)
    );
}

.marketplace-close-copy {
  position: relative;
  z-index: 1;
}

.marketplace-close-copy .eyebrow {
  margin-bottom: 11px;
}

.marketplace-close-copy h3 {
  max-width: 650px;
  margin-bottom: 14px;
  font-size: clamp(2rem,3.3vw,3.25rem);
  line-height: 1.02;
}

.marketplace-close-copy p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
}

.marketplace-close-points {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.marketplace-close-points > div {
  min-height: 105px;
  padding: 17px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(7,25,29,.54);
}

.marketplace-close-points b {
  display: grid;
  place-items: center;

  width: fit-content;
  min-width: 44px;
  height: 36px;
  padding-inline: 10px;

  border-radius: 11px;
  border: 1px solid rgba(34,211,238,.15);

  color: #CFFAFE;
  background:
    linear-gradient(
      145deg,
      rgba(34,211,238,.16),
      rgba(59,130,246,.10)
    );

  font-size: .78rem;
  font-weight: 900;
}

.marketplace-close-points span {
  margin-top: 15px;
  color: #D5E1E6;
  font-size: .84rem;
  font-weight: 720;
}

.marketplace-close-action {
  position: relative;
  z-index: 1;

  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  gap: 18px;

  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.marketplace-close-action span {
  color: var(--muted);
  font-size: .83rem;
  letter-spacing: .035em;
}

@media (hover:hover) {

  .marketplace-close-points > div {
    transition:
      transform .22s ease,
      border-color .22s ease,
      background-color .22s ease;
  }

  .marketplace-close-points > div:hover {
    transform: translateY(-2px);
    border-color: rgba(34,211,238,.18);
    background: rgba(10,34,39,.68);
  }
}

@media (max-width:980px) {

  .marketplace-close {
    grid-template-columns: 1fr;
  }

  .marketplace-close-points {
    max-width: 620px;
  }
}

@media (max-width:650px) {

  .marketplace-close {
    padding: 24px 20px;
    border-radius: 25px;
  }

  .marketplace-close-action {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .marketplace-close-action .btn {
    width: 100%;
  }

  .marketplace-close-action span {
    text-align: center;
  }
}

@media (max-width:420px) {

  .marketplace-close-points > div {
    min-height: 92px;
    padding: 14px;
  }

  .marketplace-close-points span {
    font-size: .76rem;
  }
}

/* =========================================================
   RINGOWNER — PREMIUM BUSINESS SHOWCASE
   ========================================================= */

.business-focus {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(15,23,42,.30),
      transparent 31%
    ),
    radial-gradient(
      circle at 90% 72%,
      rgba(6,182,212,.09),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(7,18,27,.26),
      rgba(16,41,45,.10)
    );
}

.business-focus::before {
  content: "";
  position: absolute;

  width: 470px;
  height: 470px;

  left: -255px;
  bottom: 8%;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.065);

  box-shadow:
    0 0 0 65px rgba(34,211,238,.015),
    0 0 0 130px rgba(59,130,246,.010);

  pointer-events: none;
}

.business-head {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 40px;
  align-items: end;

  margin-bottom: 42px;
}

.business-copy {
  max-width: 860px;
}

.business-signals {
  display: grid;

  grid-template-columns:
    repeat(2,auto);

  gap: 9px;
}

.business-signals span {
  padding: 9px 13px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.13);

  background:
    rgba(15,23,42,.46);

  color: #D7E6EC;

  font-size: .78rem;
  font-weight: 760;

  text-align: center;
}

.business-layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(420px,1.02fr)
    minmax(0,.98fr);

  gap: 16px;
}

.business-preview {
  min-height: 625px;

  padding: 28px;

  border-radius: 30px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(6,182,212,.10),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      rgba(15,23,42,.84),
      rgba(16,41,45,.68)
    );
}

.business-browser {
  width: min(100%,520px);

  overflow: hidden;

  border-radius: 27px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    linear-gradient(
      180deg,
      #F7FAFC,
      #ECF7F8
    );

  color: #0F172A;

  box-shadow:
    0 32px 80px rgba(0,0,0,.34);
}

.business-browser-top {
  min-height: 52px;

  padding: 0 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(15,23,42,.07);
}

.business-browser-top > div {
  display: flex;
  gap: 6px;
}

.business-browser-top span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #B9C7CD;
}

.business-browser-top small {
  color: #72828C;

  font-size: .73rem;
  font-weight: 700;
}

.business-profile-hero {
  padding: 27px 24px;

  display: flex;
  align-items: center;

  gap: 16px;

  background:
    linear-gradient(
      135deg,
      #0F172A,
      #1E293B 52%,
      #0D5968
    );

  color: #F8FAFC;
}

.business-avatar {
  flex: 0 0 64px;

  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.16),
      rgba(34,211,238,.18)
    );

  border:
    1px solid rgba(255,255,255,.13);

  color: #CFFAFE;

  font-weight: 900;
}

.business-profile-hero small {
  color: #A6BEC8;
}

.business-profile-hero h3 {
  margin: 3px 0 4px;

  font-size: 1.55rem;
}

.business-profile-hero p {
  margin: 0;

  color: #C2D0D7;

  font-size: .85rem;
}

.business-preview-nav {
  padding: 14px 18px;

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 7px;

  border-bottom:
    1px solid rgba(15,23,42,.07);
}

.business-preview-nav span {
  padding: 8px 5px;

  border-radius: 10px;

  background: #F4FAFB;

  color: #52636D;

  font-size: .72rem;
  font-weight: 750;

  text-align: center;
}

.business-preview-grid {
  padding: 18px;

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 10px;
}

.business-preview-grid > div {
  min-height: 104px;

  padding: 14px;

  border-radius: 16px;

  border:
    1px solid rgba(6,182,212,.11);

  background: #FFFFFF;
}

.business-preview-grid b,
.business-preview-grid small {
  display: block;
}

.business-preview-grid b {
  margin-bottom: 5px;
}

.business-preview-grid small {
  color: #72828C;

  font-size: .72rem;
}

.business-preview-cta {
  margin:
    0 18px 18px;

  min-height: 51px;

  padding: 0 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 15px;

  color: #062126;

  background:
    linear-gradient(
      135deg,
      #CFFAFE,
      #22D3EE 42%,
      #06B6D4
    );

  font-size: .8rem;
  font-weight: 820;
}

.business-preview-cta b {
  font-size: 1.15rem;
}

.business-feature-stack {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 16px;
}

.business-feature {
  position: relative;

  min-height: 295px;

  padding: 25px;

  border-radius: 25px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(15,23,42,.72),
      rgba(16,41,45,.56)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 22px 60px rgba(0,0,0,.16);
}

.business-feature-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  margin-bottom: 23px;

  border-radius: 13px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(6,182,212,.10);

  color: #67E8F9;

  font-size: .72rem;
  font-weight: 900;
}

.business-feature small {
  display: block;

  margin-bottom: 6px;

  color: #67E8F9;

  font-size: .7rem;
  font-weight: 820;

  letter-spacing: .075em;

  text-transform: uppercase;
}

.business-feature h3 {
  margin-bottom: 12px;

  font-size: 1.26rem;
}

.business-feature p {
  margin: 0;

  color: var(--muted);

  font-size: .9rem;
}

.business-flow {
  position: relative;
  z-index: 1;

  margin-top: 16px;

  padding: 24px;

  border-radius: 26px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr);

  gap: 12px;

  align-items: center;
}

.business-flow > div {
  padding: 14px;

  border-radius: 16px;

  background:
    rgba(15,23,42,.42);

  border:
    1px solid rgba(255,255,255,.07);
}

.business-flow small,
.business-flow b,
.business-flow span {
  display: block;
}

.business-flow small {
  margin-bottom: 5px;

  color: var(--cyan-soft);

  font-weight: 850;
}

.business-flow b {
  font-size: .93rem;
}

.business-flow span {
  margin-top: 4px;

  color: var(--muted);

  font-size: .76rem;
}

.business-flow i {
  color: #66828A;

  font-style: normal;

  text-align: center;
}

@media (hover:hover) {

  .business-feature {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease;
  }

  .business-feature:hover {
    transform: translateY(-3px);

    border-color:
      rgba(34,211,238,.17);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 27px 68px rgba(0,0,0,.22);
  }
}

@media (max-width:1100px) {

  .business-layout {
    grid-template-columns: 1fr;
  }

  .business-preview {
    min-height: 590px;
  }
}

@media (max-width:980px) {

  .business-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .business-signals {
    justify-content: start;
  }

  .business-flow {
    grid-template-columns: 1fr;
  }

  .business-flow i {
    transform: rotate(90deg);
  }
}

@media (max-width:650px) {

  .business-signals {
    width: 100%;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .business-preview {
    min-height: auto;

    padding: 18px;

    border-radius: 25px;
  }

  .business-feature-stack {
    grid-template-columns: 1fr;
  }

  .business-feature {
    min-height: auto;
  }

  .business-preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .business-flow {
    padding: 18px;

    border-radius: 22px;
  }
}

@media (max-width:420px) {

  .business-preview {
    padding: 12px;
  }

  .business-browser {
    border-radius: 22px;
  }

  .business-profile-hero {
    padding: 20px 16px;
  }

  .business-avatar {
    flex-basis: 54px;

    width: 54px;
    height: 54px;

    border-radius: 16px;
  }

  .business-profile-hero h3 {
    font-size: 1.25rem;
  }

  .business-preview-nav {
    grid-template-columns: repeat(2,1fr);
  }

  .business-preview-grid {
    padding: 14px;
  }

  .business-signals span {
    font-size: .7rem;
  }
}

/* =========================================================
   RINGOWNER — BUSINESS SPACING POLISH
   ========================================================= */

.business-focus {
  padding-bottom: 64px;
}

@media (max-width: 980px) {
  .business-focus {
    padding-bottom: 56px;
  }
}

@media (max-width: 650px) {
  .business-focus {
    padding-bottom: 48px;
  }
}

/* =========================================================
   RINGOWNER — PREMIUM SHOP SHOWCASE
   ========================================================= */

.shop-focus {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(6,182,212,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 82%,
      rgba(59,130,246,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(7,24,28,.06),
      rgba(16,41,45,.14)
    );
}

.shop-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 40px;

  align-items: end;

  margin-bottom: 42px;
}

.shop-copy {
  max-width: 850px;
}

.shop-signals {
  display: grid;

  grid-template-columns:
    repeat(2,auto);

  gap: 9px;
}

.shop-signals span {
  padding: 9px 13px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(16,41,45,.58);

  color: #D7E8ED;

  font-size: .77rem;
  font-weight: 760;

  text-align: center;
}

.shop-products {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 16px;
}

.shop-product {
  position: relative;
  overflow: hidden;

  min-width: 0;

  border-radius: 28px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.76),
      rgba(7,24,28,.56)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 65px rgba(0,0,0,.17);
}

.shop-product-featured {
  border-color:
    rgba(34,211,238,.22);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(6,182,212,.11),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.88),
      rgba(7,24,28,.62)
    );
}

.shop-featured-badge {
  position: absolute;
  z-index: 4;

  top: 17px;
  right: 17px;

  padding: 7px 10px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #67E8F9,
      #06B6D4
    );

  color: #062126;

  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .025em;

  box-shadow:
    0 10px 26px rgba(6,182,212,.18);
}

.shop-product-visual {
  position: relative;

  min-height: 315px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(34,211,238,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(5,20,23,.20),
      rgba(3,14,17,.48)
    );
}

.shop-product-visual::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.055);

  box-shadow:
    0 0 0 42px rgba(34,211,238,.012),
    0 0 0 84px rgba(59,130,246,.009);
}

.shop-product-content {
  padding: 25px;
}

.shop-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 13px;
}

.shop-product-meta span {
  color: #67E8F9;

  font-size: .69rem;
  font-weight: 820;

  letter-spacing: .075em;

  text-transform: uppercase;
}

.shop-product-meta b {
  color: #59747C;

  font-size: .72rem;
}

.shop-product h3 {
  margin-bottom: 11px;

  font-size: 1.45rem;
}

.shop-product p {
  min-height: 86px;

  margin: 0;

  color: var(--muted);

  font-size: .9rem;
}

.shop-product-bottom {
  margin-top: 24px;

  padding-top: 18px;

  border-top:
    1px solid rgba(255,255,255,.07);

  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 14px;
}

.shop-product-bottom strong {
  color: #F8FAFC;

  font-size: 1.55rem;
  line-height: 1;
}

.shop-product-bottom strong small {
  color: var(--muted);

  font-size: .7rem;
  font-weight: 650;
}

.shop-product-bottom > span {
  padding: 7px 9px;

  border-radius: 9px;

  border:
    1px solid rgba(34,211,238,.12);

  background:
    rgba(6,182,212,.07);

  color: #A5F3FC;

  font-size: .7rem;
  font-weight: 760;
}

/* =========================================================
   TEMP PRODUCT VISUALS
   Later replace these with real product photography.
   ========================================================= */

.shop-mini-qr {
  width: 67px;
  height: 67px;

  border-radius: 8px;

  background:
    linear-gradient(
      90deg,
      #061B20 12%,
      transparent 12% 24%,
      #061B20 24% 38%,
      transparent 38% 49%,
      #061B20 49% 63%,
      transparent 63% 75%,
      #061B20 75%
    ),
    linear-gradient(
      #061B20 12%,
      transparent 12% 24%,
      #061B20 24% 38%,
      transparent 38% 49%,
      #061B20 49% 63%,
      transparent 63% 75%,
      #061B20 75%
    ),
    #FFFFFF;

  box-shadow:
    inset 0 0 0 6px #FFFFFF;
}

/* Key ring */

.shop-keyring-visual {
  padding-top: 22px;
}

.shop-keyring-loop {
  position: absolute;

  width: 112px;
  height: 112px;

  top: 38px;

  border-radius: 50%;

  border:
    10px solid #A9B9BF;

  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.16),
    0 14px 35px rgba(0,0,0,.25);
}

.shop-keyring-body {
  position: relative;
  z-index: 2;

  width: 168px;
  min-height: 185px;

  margin-top: 73px;

  padding: 25px 20px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 15px;

  border-radius: 31px;

  background:
    linear-gradient(
      145deg,
      #D9F8FB,
      #FFFFFF
    );

  color: #08313A;

  box-shadow:
    0 25px 50px rgba(0,0,0,.28);
}

.shop-keyring-body::before {
  content: "";

  position: absolute;

  top: 13px;

  width: 19px;
  height: 19px;

  border-radius: 50%;

  background: #10292D;

  box-shadow:
    inset 0 0 0 5px #D7EFF2;
}

.shop-keyring-body span {
  font-size: .84rem;
  font-weight: 900;
}

/* Vehicle sticker */

.shop-sticker-sheet {
  position: relative;

  width: 240px;
  height: 205px;
}

.shop-sticker {
  position: absolute;

  width: 160px;
  height: 160px;

  left: 18px;
  top: 24px;

  padding: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #E4FBFD,
      #FFFFFF
    );

  color: #092D34;

  box-shadow:
    0 24px 55px rgba(0,0,0,.30);

  transform: rotate(-6deg);
}

.shop-sticker-back {
  left: 70px;
  top: 5px;

  z-index: -1;

  opacity: .52;

  transform: rotate(8deg);
}

.shop-sticker b {
  font-size: .82rem;
}

.shop-sticker small {
  color: #60757B;

  font-size: .6rem;
}

/* Business sticker */

.shop-business-card {
  position: relative;

  width: min(84%,300px);

  padding: 22px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #F7FCFD,
      #DDF7FA
    );

  color: #0F2930;

  box-shadow:
    0 28px 60px rgba(0,0,0,.30);

  transform: rotate(-3deg);
}

.shop-business-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 28px;
}

.shop-business-mark {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #06B6D4,
      #0891B2
    );

  color: #FFFFFF;

  font-size: .7rem;
  font-weight: 900;
}

.shop-business-card-top span {
  color: #597077;

  font-size: .68rem;
  font-weight: 800;
}

.shop-business-card-main {
  display: flex;
  align-items: center;

  gap: 17px;
}

.shop-business-card-main b,
.shop-business-card-main small {
  display: block;
}

.shop-business-card-main b {
  margin-bottom: 4px;
}

.shop-business-card-main small {
  color: #71858B;

  font-size: .67rem;
}

/* Closing strip */

.shop-close {
  margin-top: 16px;

  padding: 28px;

  border-radius: 27px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,.7fr)
    auto;

  gap: 28px;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      rgba(16,41,45,.78),
      rgba(7,24,28,.60)
    );
}

.shop-close small {
  color: #67E8F9;

  font-size: .69rem;
  font-weight: 820;

  letter-spacing: .07em;

  text-transform: uppercase;
}

.shop-close h3 {
  margin:
    5px 0 0;

  font-size:
    clamp(1.55rem,2.3vw,2.3rem);
}

.shop-close p {
  margin: 0;

  color: var(--muted);

  font-size: .88rem;
}

.shop-close .btn {
  white-space: nowrap;
}

@media (hover:hover) {

  .shop-product {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease;
  }

  .shop-product:hover {
    transform: translateY(-4px);

    border-color:
      rgba(34,211,238,.18);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 30px 75px rgba(0,0,0,.23);
  }
}

@media (max-width:1050px) {

  .shop-products {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .shop-product-featured {
    grid-column: span 1;
  }

  .shop-close {
    grid-template-columns: 1fr 1fr;
  }

  .shop-close .btn {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width:980px) {

  .shop-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .shop-signals {
    justify-content: start;
  }
}

@media (max-width:700px) {

  .shop-products {
    grid-template-columns: 1fr;
  }

  .shop-product p {
    min-height: auto;
  }

  .shop-product-visual {
    min-height: 290px;
  }

  .shop-close {
    grid-template-columns: 1fr;
  }

  .shop-close .btn {
    grid-column: auto;
    width: 100%;
  }
}

@media (max-width:650px) {

  .shop-signals {
    width: 100%;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .shop-product {
    border-radius: 24px;
  }

  .shop-product-content {
    padding: 21px;
  }

  .shop-close {
    padding: 22px;

    border-radius: 23px;
  }
}

@media (max-width:420px) {

  .shop-product-visual {
    min-height: 270px;
  }

  .shop-keyring-body {
    transform: scale(.90);
  }

  .shop-sticker-sheet {
    transform: scale(.90);
  }

  .shop-business-card {
    width: 90%;
  }

  .shop-product-bottom strong {
    font-size: 1.4rem;
  }

  .shop-signals span {
    font-size: .69rem;
  }
}

/* =========================================================
   RINGOWNER — PREMIUM PRIVACY SHOWCASE
   ========================================================= */

.security-focus {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(6,182,212,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 76%,
      rgba(59,130,246,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(16,41,45,.13),
      rgba(5,20,23,.08)
    );
}

.security-focus::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -280px;
  top: 18%;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.06);

  box-shadow:
    0 0 0 65px rgba(34,211,238,.015),
    0 0 0 130px rgba(59,130,246,.010);

  pointer-events: none;
}

.security-focus-head {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 42px;

  align-items: end;

  margin-bottom: 42px;
}

.security-focus-copy {
  max-width: 860px;
}

.security-focus-signals {
  display: grid;

  grid-template-columns:
    repeat(2,auto);

  gap: 9px;
}

.security-focus-signals span {
  padding: 9px 13px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(16,41,45,.58);

  color: #D7E8ED;

  font-size: .76rem;
  font-weight: 760;

  text-align: center;
}

.security-focus-layout {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(420px,1.02fr)
    minmax(0,.98fr);

  gap: 16px;
}

/* =========================================================
   PUBLIC FLOW VISUAL
   ========================================================= */

.security-public-stage {
  min-height: 620px;

  padding: 28px;

  border-radius: 30px;

  display: flex;
  flex-direction: column;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(6,182,212,.10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.80),
      rgba(7,24,28,.62)
    );
}

.security-public-label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 24px;
}

.security-public-label span {
  color: #67E8F9;

  font-size: .72rem;
  font-weight: 830;

  letter-spacing: .075em;

  text-transform: uppercase;
}

.security-public-label b {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 13px;

  border:
    1px solid rgba(34,211,238,.16);

  background:
    rgba(6,182,212,.10);

  color: #CFFAFE;

  font-size: .72rem;
}

.security-phone {
  width: min(100%,460px);

  margin: auto;

  overflow: hidden;

  border-radius: 29px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      180deg,
      #F8FCFD,
      #EAF6F8
    );

  color: #0F172A;

  box-shadow:
    0 30px 75px rgba(0,0,0,.32);
}

.security-phone-top {
  min-height: 55px;

  padding: 0 19px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(15,23,42,.07);
}

.security-phone-top span {
  color: #073642;
  font-weight: 900;
}

.security-phone-top small {
  color: #74858D;
}

.security-phone-vehicle {
  padding: 25px 22px 20px;

  background:
    linear-gradient(
      135deg,
      #0F172A,
      #15343C 55%,
      #0D6677
    );

  color: #F8FAFC;
}

.security-phone-vehicle small {
  color: #A5DDE5;
}

.security-phone-vehicle h3 {
  margin: 6px 0 0;

  font-size: 1.45rem;
}

.security-request-list {
  padding: 16px;

  display: grid;

  gap: 9px;
}

.security-request-list > div {
  padding: 13px;

  display: grid;

  grid-template-columns:
    40px 1fr;

  gap: 11px;

  align-items: center;

  border-radius: 14px;

  border:
    1px solid rgba(6,182,212,.10);

  background: #FFFFFF;
}

.security-request-list > div > span {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 12px;

  background: #E6F9FC;

  color: #0788A2;

  font-size: .68rem;
  font-weight: 900;
}

.security-request-list b,
.security-request-list small {
  display: block;
}

.security-request-list b {
  font-size: .84rem;
}

.security-request-list small {
  margin-top: 2px;

  color: #74858D;

  font-size: .68rem;
}

.security-phone-note {
  margin:
    0 16px 16px;

  padding: 13px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #DDF8FB,
      #ECFEFF
    );

  color: #315963;

  font-size: .72rem;
  font-weight: 700;

  text-align: center;
}

/* =========================================================
   PRINCIPLE CARDS
   ========================================================= */

.security-principles {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 16px;
}

.security-principle {
  min-height: 295px;

  padding: 25px;

  border-radius: 25px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.72),
      rgba(7,24,28,.54)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 22px 60px rgba(0,0,0,.16);
}

.security-principle-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  margin-bottom: 23px;

  border-radius: 13px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(6,182,212,.10);

  color: #67E8F9;

  font-size: .72rem;
  font-weight: 900;
}

.security-principle small {
  display: block;

  margin-bottom: 6px;

  color: #67E8F9;

  font-size: .69rem;
  font-weight: 820;

  letter-spacing: .075em;

  text-transform: uppercase;
}

.security-principle h3 {
  margin-bottom: 12px;

  font-size: 1.25rem;
}

.security-principle p {
  margin: 0;

  color: var(--muted);

  font-size: .89rem;
}

/* =========================================================
   FLOW
   ========================================================= */

.security-flow {
  position: relative;
  z-index: 1;

  margin-top: 16px;

  padding: 24px;

  border-radius: 26px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr) auto
    minmax(0,1fr);

  gap: 12px;

  align-items: center;
}

.security-flow > div {
  padding: 14px;

  border-radius: 16px;

  background:
    rgba(16,41,45,.48);

  border:
    1px solid rgba(255,255,255,.07);
}

.security-flow small,
.security-flow b,
.security-flow span {
  display: block;
}

.security-flow small {
  margin-bottom: 5px;

  color: var(--cyan-soft);

  font-weight: 850;
}

.security-flow b {
  font-size: .93rem;
}

.security-flow span {
  margin-top: 4px;

  color: var(--muted);

  font-size: .76rem;
}

.security-flow i {
  color: #66828A;

  font-style: normal;

  text-align: center;
}

@media (hover:hover) {

  .security-principle {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease;
  }

  .security-principle:hover {
    transform: translateY(-3px);

    border-color:
      rgba(34,211,238,.18);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 27px 68px rgba(0,0,0,.22);
  }
}

@media (max-width:1100px) {

  .security-focus-layout {
    grid-template-columns: 1fr;
  }

  .security-public-stage {
    min-height: 580px;
  }
}

@media (max-width:980px) {

  .security-focus-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .security-focus-signals {
    justify-content: start;
  }

  .security-flow {
    grid-template-columns: 1fr;
  }

  .security-flow i {
    transform: rotate(90deg);
  }
}

@media (max-width:650px) {

  .security-focus-signals {
    width: 100%;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .security-public-stage {
    min-height: auto;

    padding: 18px;

    border-radius: 25px;
  }

  .security-principles {
    grid-template-columns: 1fr;
  }

  .security-principle {
    min-height: auto;
  }

  .security-flow {
    padding: 18px;

    border-radius: 22px;
  }
}

@media (max-width:420px) {

  .security-public-stage {
    padding: 12px;
  }

  .security-phone {
    border-radius: 23px;
  }

  .security-phone-vehicle {
    padding: 21px 17px;
  }

  .security-phone-vehicle h3 {
    font-size: 1.25rem;
  }

  .security-focus-signals span {
    font-size: .68rem;
  }
}

/* =========================================================
   RINGOWNER — SECTION ANCHOR OFFSET
   Keeps section headings clear of the sticky navigation.
   ========================================================= */

#vehicle,
#family,
#business,
#marketplace,
#shop,
#security,
#download,
#faq {
  scroll-margin-top: 92px;
}

@media (max-width: 650px) {
  #vehicle,
  #family,
  #business,
  #marketplace,
  #shop,
  #security,
  #download,
  #faq {
    scroll-margin-top: 76px;
  }
}

/* =========================================================
   RINGOWNER — PREMIUM DOWNLOAD CTA
   ========================================================= */

.download-focus {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(6,182,212,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(59,130,246,.09),
      transparent 32%
    );
}

.download-stage {
  position: relative;
  overflow: hidden;

  min-height: 620px;

  padding: 52px;

  border-radius: 34px;

  display: grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(390px,.95fr);

  gap: 48px;

  align-items: center;

  background:
    radial-gradient(
      circle at 84% 20%,
      rgba(34,211,238,.12),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.88),
      rgba(6,21,25,.72)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 32px 90px rgba(0,0,0,.20);
}

.download-stage::before {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  left: -230px;
  bottom: -220px;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.07);

  box-shadow:
    0 0 0 65px rgba(34,211,238,.016),
    0 0 0 130px rgba(59,130,246,.011);

  pointer-events: none;
}

.download-copy {
  position: relative;
  z-index: 3;

  max-width: 690px;
}

.download-copy h2 {
  margin:
    14px 0 20px;

  font-size:
    clamp(2.7rem,5vw,5.4rem);

  line-height: .99;

  letter-spacing: -.045em;
}

.download-copy .lead {
  max-width: 640px;
}

.download-capabilities {
  margin-top: 27px;

  display: flex;
  flex-wrap: wrap;

  gap: 9px;
}

.download-capabilities span {
  padding: 9px 13px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.15);

  background:
    rgba(6,182,212,.07);

  color: #D5F6FA;

  font-size: .77rem;
  font-weight: 760;
}

.download-actions {
  margin-top: 31px;

  display: flex;
  flex-wrap: wrap;

  gap: 12px;
}

.download-note {
  display: block;

  max-width: 540px;

  margin-top: 17px;

  color: #718A92;

  font-size: .72rem;
}

/* =========================================================
   PHONE / APP ECOSYSTEM VISUAL
   ========================================================= */

.download-visual {
  position: relative;

  min-height: 510px;

  display: grid;
  place-items: center;
}

.download-orbit {
  position: absolute;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.09);

  pointer-events: none;
}

.download-orbit-one {
  width: 390px;
  height: 390px;
}

.download-orbit-two {
  width: 500px;
  height: 500px;

  opacity: .55;
}

.download-phone {
  position: relative;
  z-index: 2;

  width: min(100%,310px);

  padding: 12px;

  border-radius: 38px;

  background:
    linear-gradient(
      145deg,
      #F7FCFD,
      #DFF5F8
    );

  color: #0F172A;

  border:
    1px solid rgba(255,255,255,.60);

  box-shadow:
    0 34px 85px rgba(0,0,0,.38);
}

.download-phone::before {
  content: "";

  display: block;

  width: 82px;
  height: 7px;

  margin:
    2px auto 10px;

  border-radius: 999px;

  background: #C4D1D5;
}

.download-phone-top {
  min-height: 54px;

  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.download-phone-top span {
  color: #073642;

  font-weight: 900;
}

.download-phone-top b {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #06B6D4,
      #0891B2
    );

  color: #FFFFFF;

  font-size: .66rem;
}

.download-phone-hero {
  margin: 0 5px;

  padding: 22px 18px;

  border-radius: 21px;

  background:
    linear-gradient(
      135deg,
      #0F172A,
      #153B45 58%,
      #0C7082
    );

  color: #F8FAFC;
}

.download-phone-hero small,
.download-phone-hero strong {
  display: block;
}

.download-phone-hero small {
  color: #A7D8E0;

  margin-bottom: 5px;
}

.download-phone-hero strong {
  font-size: 1.27rem;
}

.download-phone-grid {
  padding: 11px 5px;

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 8px;
}

.download-phone-grid > div {
  min-height: 88px;

  padding: 13px;

  border-radius: 15px;

  background: #FFFFFF;

  border:
    1px solid rgba(6,182,212,.09);
}

.download-phone-grid b,
.download-phone-grid small {
  display: block;
}

.download-phone-grid b {
  margin-bottom: 5px;

  font-size: .82rem;
}

.download-phone-grid small {
  color: #75878E;

  font-size: .65rem;
}

.download-phone-bottom {
  min-height: 50px;

  margin: 0 5px 5px;

  padding: 0 14px;

  border-radius: 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      135deg,
      #CFFAFE,
      #22D3EE 48%,
      #06B6D4
    );

  color: #06313A;

  font-size: .74rem;
  font-weight: 850;
}

.download-phone-bottom b {
  font-size: 1.15rem;
}

/* =========================================================
   FLOATING FEATURE LABELS
   ========================================================= */

.download-float {
  position: absolute;
  z-index: 3;

  padding: 10px 13px;

  border-radius: 14px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    rgba(7,24,28,.86);

  color: #D9F8FB;

  font-size: .72rem;
  font-weight: 800;

  box-shadow:
    0 15px 35px rgba(0,0,0,.22);

  backdrop-filter: blur(10px);
}

.download-float-one {
  left: 0;
  top: 24%;
}

.download-float-two {
  right: -2%;
  top: 44%;
}

.download-float-three {
  left: 3%;
  bottom: 17%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1050px) {

  .download-stage {
    grid-template-columns: 1fr;

    padding: 44px;
  }

  .download-copy {
    max-width: 800px;
  }

  .download-visual {
    min-height: 470px;
  }
}

@media (max-width:650px) {

  .download-stage {
    min-height: auto;

    padding: 30px 21px;

    border-radius: 27px;
  }

  .download-copy h2 {
    font-size:
      clamp(2.45rem,12vw,4rem);
  }

  .download-actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .download-actions .btn {
    width: 100%;
  }

  .download-visual {
    min-height: 440px;
  }

  .download-phone {
    width: min(86vw,300px);
  }

  .download-orbit-one {
    width: 330px;
    height: 330px;
  }

  .download-orbit-two {
    width: 420px;
    height: 420px;
  }

  .download-float {
    font-size: .66rem;
  }
}

@media (max-width:420px) {

  .download-stage {
    padding:
      27px 17px;
  }

  .download-visual {
    min-height: 405px;
  }

  .download-phone {
    transform: scale(.92);
  }

  .download-float-one {
    left: -3%;
  }

  .download-float-two {
    right: -4%;
  }

  .download-float-three {
    left: 0;
  }
}

/* =========================================================
   RINGOWNER — PREMIUM FAQ AND FOOTER
   ========================================================= */

/* ---------------- FAQ ---------------- */

.faq-focus {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(6,182,212,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 82%,
      rgba(59,130,246,.07),
      transparent 30%
    );
}

.faq-focus-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,.38fr);

  gap: 36px;

  align-items: end;

  margin-bottom: 38px;
}

.faq-focus-head > div:first-child {
  max-width: 850px;
}

.faq-focus-note {
  padding: 22px;

  border-radius: 22px;
}

.faq-focus-note small,
.faq-focus-note b,
.faq-focus-note a {
  display: block;
}

.faq-focus-note small {
  margin-bottom: 7px;

  color: #67E8F9;

  font-size: .7rem;
  font-weight: 820;

  letter-spacing: .07em;

  text-transform: uppercase;
}

.faq-focus-note b {
  margin-bottom: 13px;

  font-size: .95rem;
}

.faq-focus-note a {
  width: fit-content;

  color: #A5F3FC;

  font-size: .82rem;
  font-weight: 800;
}

.faq-premium {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 12px;
}

.faq-premium details {
  align-self: start;

  overflow: hidden;

  border-radius: 20px;

  border:
    1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.68),
      rgba(7,24,28,.48)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

.faq-premium summary {
  min-height: 76px;

  padding: 19px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  cursor: pointer;

  list-style: none;

  color: #F8FAFC;

  font-weight: 790;
}

.faq-premium summary::-webkit-details-marker {
  display: none;
}

.faq-premium summary b {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(6,182,212,.08);

  color: #67E8F9;

  font-size: 1.05rem;

  transition: transform .2s ease;
}

.faq-premium details[open] summary b {
  transform: rotate(45deg);
}

.faq-premium details p {
  margin: 0;

  padding:
    0 20px 21px;

  color: var(--muted);

  font-size: .88rem;
}

@media (hover:hover) {

  .faq-premium details {
    transition:
      border-color .22s ease,
      transform .22s ease;
  }

  .faq-premium details:hover {
    transform: translateY(-2px);

    border-color:
      rgba(34,211,238,.17);
  }
}

/* ---------------- FOOTER ---------------- */

.footer-premium {
  position: relative;

  padding:
    70px 0 0;

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    radial-gradient(
      circle at 12% 30%,
      rgba(6,182,212,.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(5,20,23,.96),
      rgba(3,13,16,1)
    );
}

.footer-main {
  display: grid;

  grid-template-columns:
    minmax(280px,1.05fr)
    minmax(0,.95fr);

  gap: 70px;

  padding-bottom: 48px;
}

.footer-brand-block {
  max-width: 540px;
}

.footer-brand-block p {
  max-width: 500px;

  margin:
    21px 0 23px;

  color: var(--muted);

  font-size: .91rem;
}

.footer-status {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 9px 12px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.13);

  background:
    rgba(6,182,212,.06);

  color: #BEEBF1;

  font-size: .72rem;
  font-weight: 760;
}

.footer-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #22D3EE;

  box-shadow:
    0 0 14px rgba(34,211,238,.75);
}

.footer-links {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 34px;
}

.footer-links > div {
  display: flex;
  flex-direction: column;

  gap: 11px;
}

.footer-links b {
  margin-bottom: 6px;

  color: #F8FAFC;

  font-size: .82rem;

  text-transform: uppercase;

  letter-spacing: .06em;
}

.footer-links a {
  width: fit-content;

  color: var(--muted);

  font-size: .84rem;
}

.footer-links a:hover {
  color: #A5F3FC;
}

.footer-bottom {
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  border-top:
    1px solid rgba(255,255,255,.07);

  color: #71868D;

  font-size: .74rem;
}

.footer-bottom > div {
  display: flex;
  flex-wrap: wrap;

  gap: 19px;
}

.footer-bottom a {
  color: #85999F;
}

.footer-bottom a:hover {
  color: #A5F3FC;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width:900px) {

  .faq-focus-head {
    grid-template-columns: 1fr;
  }

  .faq-focus-note {
    max-width: 500px;
  }

  .footer-main {
    grid-template-columns: 1fr;

    gap: 45px;
  }
}

@media (max-width:700px) {

  .faq-premium {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .footer-bottom {
    padding:
      20px 0;

    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width:480px) {

  .faq-premium summary {
    min-height: 70px;

    padding:
      17px 16px;
  }

  .faq-premium details p {
    padding:
      0 16px 18px;
  }

  .footer-premium {
    padding-top: 54px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RINGOWNER — MARKETPLACE REAL APP PREVIEW
   ========================================================= */

.marketplace-real-showcase {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0,.82fr)
    minmax(360px,1.18fr);

  gap: 42px;

  align-items: center;

  margin-bottom: 18px;
  padding: 38px;

  overflow: hidden;

  border-radius: 30px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(
      circle at 78% 16%,
      rgba(6,182,212,.12),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(16,41,45,.82),
      rgba(7,24,28,.60)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 26px 75px rgba(0,0,0,.19);
}

.marketplace-real-showcase::before {
  content: "";

  position: absolute;

  width: 390px;
  height: 390px;

  right: -180px;
  bottom: -190px;

  border-radius: 50%;

  border:
    1px solid rgba(34,211,238,.07);

  box-shadow:
    0 0 0 55px rgba(34,211,238,.016),
    0 0 0 110px rgba(59,130,246,.010);

  pointer-events: none;
}

.marketplace-real-copy {
  position: relative;
  z-index: 2;

  max-width: 610px;
}

.marketplace-real-copy h3 {
  margin:
    11px 0 16px;

  font-size:
    clamp(2rem,3.4vw,3.45rem);

  line-height: 1.04;

  letter-spacing: -.03em;
}

.marketplace-real-copy p {
  margin: 0;

  color: var(--muted);

  font-size: .96rem;
}

.marketplace-real-points {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 24px;
}

.marketplace-real-points span {
  padding: 9px 12px;

  border-radius: 999px;

  border:
    1px solid rgba(34,211,238,.14);

  background:
    rgba(6,182,212,.07);

  color: #CFFAFE;

  font-size: .74rem;
  font-weight: 760;
}

/* =========================================================
   REAL SCREENSHOT DEVICE
   ========================================================= */

.marketplace-real-device {
  position: relative;
  z-index: 2;

  min-height: 650px;

  display: grid;
  place-items: center;
}

.marketplace-real-device::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.12),
      transparent 67%
    );

  pointer-events: none;
}

.marketplace-real-screen {
  position: relative;
  z-index: 2;

  width:
    min(100%,390px);

  overflow: hidden;

  border-radius: 36px;

  border:
    10px solid rgba(229,245,247,.96);

  background: #FFFFFF;

  box-shadow:
    0 35px 90px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.12);
}

.marketplace-real-screen::before {
  content: "";

  position: absolute;
  z-index: 3;

  top: 7px;
  left: 50%;

  width: 72px;
  height: 6px;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    rgba(20,38,43,.22);

  pointer-events: none;
}

.marketplace-real-screen img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

@media (hover:hover) {

  .marketplace-real-screen {
    transition:
      transform .28s ease,
      box-shadow .28s ease;
  }

  .marketplace-real-showcase:hover .marketplace-real-screen {
    transform: translateY(-4px);

    box-shadow:
      0 42px 100px rgba(0,0,0,.42),
      0 0 0 1px rgba(255,255,255,.14);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1050px) {

  .marketplace-real-showcase {
    grid-template-columns: 1fr;
  }

  .marketplace-real-copy {
    max-width: 800px;
  }

  .marketplace-real-device {
    min-height: auto;

    padding:
      18px 0 5px;
  }

  .marketplace-real-screen {
    width:
      min(100%,410px);
  }
}

@media (max-width:650px) {

  .marketplace-real-showcase {
    padding:
      26px 19px;

    border-radius: 24px;

    gap: 25px;
  }

  .marketplace-real-copy h3 {
    font-size:
      clamp(1.8rem,9vw,2.7rem);
  }

  .marketplace-real-screen {
    width:
      min(92vw,360px);

    border-width: 7px;

    border-radius: 29px;
  }

  .marketplace-real-points {
    display: grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .marketplace-real-points span {
    text-align: center;
  }
}

@media (max-width:420px) {

  .marketplace-real-showcase {
    padding:
      23px 15px;
  }

  .marketplace-real-points {
    gap: 7px;
  }

  .marketplace-real-points span {
    padding: 8px;

    font-size: .68rem;
  }

  .marketplace-real-screen {
    width: 100%;
  }
}

/* =========================================================
   RINGOWNER - MARKETPLACE CREATE LISTING SCREENSHOT
   ========================================================= */

.marketplace-real-device-pair {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .84fr);

  gap: 20px;

  align-items: center;
}

.marketplace-shot {
  position: relative;
  z-index: 2;

  width: 100%;

  display: grid;
  justify-items: center;
}

.marketplace-shot-label {
  display: inline-flex;
  align-items: center;

  margin-bottom: 10px;
  padding: 7px 11px;

  border-radius: 999px;

  border: 1px solid rgba(34,211,238,.14);

  background: rgba(6,182,212,.08);

  color: #CFFAFE;

  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .02em;
}

.marketplace-real-screen-home {
  width: min(100%, 305px);
}

.marketplace-real-screen-create {
  width: min(100%, 265px);

  transform: translateY(24px);
}

@media (hover:hover) {

  .marketplace-real-showcase:hover
  .marketplace-real-screen-create {
    transform: translateY(20px);
  }
}

@media (max-width:1050px) {

  .marketplace-real-device-pair {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    width: min(100%, 720px);
    margin-inline: auto;
  }

  .marketplace-real-screen-home {
    width: min(100%, 320px);
  }

  .marketplace-real-screen-create {
    width: min(100%, 280px);
  }
}

@media (max-width:650px) {

  .marketplace-real-device-pair {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .marketplace-real-screen-home,
  .marketplace-real-screen-create {
    width: min(92vw, 330px);
  }

  .marketplace-real-screen-create {
    transform: none;
  }

  @media (hover:hover) {
    .marketplace-real-showcase:hover
    .marketplace-real-screen-create {
      transform: translateY(-4px);
    }
  }
}

/* =========================================================
   RINGOWNER - MARKETPLACE AR REAL SCREENSHOT
   ========================================================= */

.market-ar-real-stage {
  margin-top: 20px;
  display: grid;
  gap: 11px;
}

.market-ar-real-label {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.14);
  background: rgba(6,182,212,.08);
  color: #CFFAFE;
  font-size: .7rem;
  font-weight: 760;
}

.market-ar-real-device {
  position: relative;
  overflow: hidden;

  width: min(100%, 380px);
  margin-inline: auto;

  padding: 10px;

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.72),
      rgba(7,24,28,.52)
    );

  box-shadow:
    0 24px 60px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.market-ar-real-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: contain;
}

@media (hover:hover) {
  .market-ar-real-image {
    transition: transform .28s ease;
  }

  .market-ar-real-device:hover .market-ar-real-image {
    transform: scale(1.015);
  }
}

@media (max-width:650px) {
  .market-ar-real-stage {
    margin-top: 16px;
  }

  .market-ar-real-device {
    width: min(100%, 340px);
    padding: 8px;
    border-radius: 21px;
  }

  .market-ar-real-image {
    border-radius: 15px;
  }
}
/* =================================================
   RINGOWNER - BUSINESS REAL SCREENSHOT
   ================================================= */

.business-real-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 10px;
}

.business-real-device{
  width:min(100%, 360px);
  margin-inline:auto;
  padding:12px;
  border-radius:30px;
  border:1px solid rgba(117, 232, 255, .12);
  background:linear-gradient(180deg, rgba(7, 14, 24, .98), rgba(12, 24, 38, .96));
  box-shadow:0 26px 70px rgba(0, 0, 0, .34);
}

.business-real-screen{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#eef3f8;
  aspect-ratio:9 / 19.5;
}

.business-real-screen img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

@media (max-width: 1100px){
  .business-real-device{
    width:min(100%, 340px);
  }
}

@media (max-width: 767px){
  .business-real-stage{
    padding:6px 2px 0;
  }

  .business-real-device{
    width:min(100%, 320px);
    padding:10px;
    border-radius:26px;
  }

  .business-real-screen{
    border-radius:20px;
  }
}

/* =========================================================
   RINGOWNER - BUSINESS REAL SCREENSHOT COMPACT FINAL
   ========================================================= */

.business-real-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 8px;
}

.business-real-device {
  width: min(100%, 330px);
  margin-inline: auto;
  padding: 9px;
  overflow: hidden;

  border-radius: 26px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.76),
      rgba(7,24,28,.58)
    );

  box-shadow:
    0 26px 65px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.business-real-image {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 19px;

  object-fit: contain;
}

@media (max-width:1050px) {

  .business-real-device {
    width: min(100%, 320px);
  }
}

@media (max-width:650px) {

  .business-real-stage {
    padding: 8px 0;
  }

  .business-real-device {
    width: min(100%, 300px);
    padding: 7px;
    border-radius: 22px;
  }

  .business-real-image {
    border-radius: 16px;
  }
}
/* RINGOWNER - BUSINESS PROFILE SHOWCASE */
.business-profile-showcase{
  margin-top: 18px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.business-profile-showcase img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   RINGOWNER - BUSINESS PROFILE SECONDARY SHOWCASE
   ========================================================= */

.business-secondary-showcase {
  margin-top: 22px;
  padding: 18px;

  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 18px 40px rgba(0,0,0,.20);
}

.business-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  flex-wrap: wrap;

  margin-bottom: 14px;
}

.business-secondary-head span {
  font-size: .92rem;
  font-weight: 700;
}

.business-secondary-head small {
  color: rgba(255,255,255,.68);
}

.business-secondary-frame {
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  padding: 12px;

  border-radius: 22px;

  background:
    rgba(7,14,24,.72);
}

.business-secondary-image {
  display: block;

  width: min(100%, 390px);
  max-width: 100%;
  height: auto;

  border-radius: 18px;

  object-fit: contain;

  box-shadow:
    0 20px 48px rgba(0,0,0,.28);
}

@media (max-width: 991px) {

  .business-secondary-showcase {
    margin-top: 18px;
    padding: 16px;
  }

  .business-secondary-image {
    width: min(100%, 350px);
  }
}

@media (max-width: 640px) {

  .business-secondary-showcase {
    padding: 13px;
    border-radius: 22px;
  }

  .business-secondary-frame {
    padding: 8px;
    border-radius: 18px;
  }

  .business-secondary-image {
    width: 100%;
    border-radius: 15px;
  }
}

/* =========================================================
   RINGOWNER - BUSINESS FEATURE CARDS COMPACT FINAL
   Prevent feature cards stretching to screenshot height
   ========================================================= */

.business-layout {
  align-items: start !important;
}

.business-feature-stack {
  align-self: start !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  grid-auto-rows: auto !important;

  gap: 18px !important;

  height: auto !important;
  min-height: 0 !important;
}

.business-feature {
  height: auto !important;
  min-height: 0 !important;

  align-self: start !important;
  align-content: start !important;

  padding: 24px !important;

  border-radius: 24px !important;
}

.business-feature > div {
  align-self: start;
}

.business-feature h3 {
  margin-top: 7px;
  margin-bottom: 12px;
}

.business-feature p {
  margin-bottom: 0;
  line-height: 1.7;
}

.business-feature-icon {
  margin-bottom: 20px;
}

/* Tablet */
@media (max-width: 1050px) {

  .business-feature-stack {
    gap: 16px !important;
  }

  .business-feature {
    padding: 22px !important;
  }
}

/* Mobile */
@media (max-width: 720px) {

  .business-feature-stack {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .business-feature {
    padding: 20px !important;
  }
}

/* =========================================================
   RINGOWNER - BUSINESS PREVIEW MOSAIC FINAL
   Main dashboard + 4 supporting mini cards
   ========================================================= */

.business-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.business-preview {
  display: block !important;
  min-width: 0 !important;
  padding: 26px !important;
}

.business-preview-main {
  display: grid;
  gap: 22px;
}

.business-real-stage {
  margin: 0 !important;
}

.business-real-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.business-real-stage-head span {
  font-size: 1.06rem;
  font-weight: 800;
  color: #f5fbff;
}

.business-real-stage-head small {
  font-size: 0.92rem;
  color: rgba(223, 240, 255, 0.82);
}

.business-real-device {
  max-width: 390px;
  margin: 0 auto;
}

.business-real-screen {
  overflow: hidden;
  border-radius: 28px;
}

.business-real-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.business-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.business-mini-shot {
  border-radius: 22px;
  border: 1px solid rgba(117, 211, 255, 0.16);
  background: rgba(8, 18, 33, 0.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 14px;
}

.business-mini-shot-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.business-mini-shot-top small {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(19, 194, 255, 0.14);
  border: 1px solid rgba(117, 211, 255, 0.18);
  color: #66e2ff;
  font-weight: 800;
  font-size: 0.86rem;
}

.business-mini-shot-top h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: #f7fbff;
}

.business-mini-shot-top p {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(219, 234, 248, 0.82);
}

.business-mini-frame {
  overflow: hidden;
  border-radius: 18px;
  background: #08111b;
  aspect-ratio: 4 / 3;
}

.business-mini-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.22);
  transform-origin: center;
}

.business-mini-image-info {
  object-position: 18% 14%;
}

.business-mini-image-services {
  object-position: 82% 18%;
}

.business-mini-image-trust {
  object-position: 82% 78%;
}

.business-mini-image-contact {
  object-position: 18% 82%;
}

.business-feature-stack {
  align-self: start !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  height: auto !important;
  min-height: 0 !important;
}

.business-feature {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  align-content: start !important;
  padding: 24px !important;
  border-radius: 24px !important;
}

.business-feature-icon {
  margin-bottom: 20px;
}

.business-feature h3 {
  margin-top: 7px;
  margin-bottom: 12px;
}

.business-feature p {
  margin-bottom: 0;
  line-height: 1.7;
}

@media (max-width: 1200px) {
  .business-layout {
    grid-template-columns: 1fr !important;
  }

  .business-preview {
    padding: 24px !important;
  }
}

@media (max-width: 720px) {
  .business-preview {
    padding: 20px !important;
  }

  .business-real-device {
    max-width: 320px;
  }

  .business-mini-grid {
    grid-template-columns: 1fr;
  }

  .business-feature-stack {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .business-feature {
    padding: 20px !important;
  }
}

/* =========================================================
   RINGOWNER - BUSINESS DASHBOARD ONLY FINAL
   ========================================================= */

.business-layout {
  align-items: start !important;
}

.business-preview {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  min-width: 0 !important;

  padding: 28px !important;
}

.business-dashboard-only {
  width: 100%;
  display: grid;
  justify-items: center;
}

.business-dashboard-head {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 14px;

  margin-bottom: 20px;
}

.business-dashboard-head span {
  color: #F5FBFF;

  font-size: 1rem;
  font-weight: 800;
}

.business-dashboard-head small {
  color: rgba(220,236,245,.70);

  font-size: .8rem;
}

.business-dashboard-device {
  width: min(100%, 350px);

  margin-inline: auto;

  padding: 9px;

  overflow: hidden;

  border-radius: 28px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.76),
      rgba(7,24,28,.58)
    );

  box-shadow:
    0 28px 65px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.business-dashboard-image {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 19px;

  object-fit: contain;
}

/* Do not stretch right-side feature cards */
.business-feature-stack {
  align-self: start !important;

  height: auto !important;
  min-height: 0 !important;

  grid-auto-rows: auto !important;
}

.business-feature {
  height: auto !important;
  min-height: 0 !important;

  align-self: start !important;
}

@media (max-width: 1050px) {

  .business-dashboard-device {
    width: min(100%, 330px);
  }
}

@media (max-width: 650px) {

  .business-preview {
    padding: 20px !important;
  }

  .business-dashboard-head {
    align-items: flex-start;
    flex-direction: column;

    gap: 5px;

    margin-bottom: 15px;
  }

  .business-dashboard-device {
    width: min(100%, 300px);

    padding: 7px;

    border-radius: 23px;
  }

  .business-dashboard-image {
    border-radius: 16px;
  }
}

/* RINGOWNER - BUSINESS SECTION MARKETPLACE BALANCE START */

.business-layout{
  display:grid !important;
  grid-template-columns:minmax(360px,1.1fr) minmax(320px,.9fr) !important;
  gap:28px !important;
  align-items:start !important;
}

.business-preview{
  padding:28px !important;
  min-height:0 !important;
  height:auto !important;
  display:block !important;
  overflow:hidden !important;
}

.business-dashboard-only{
  width:100% !important;
  display:block !important;
}

.business-dashboard-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:18px !important;
}

.business-dashboard-head span{
  display:inline-block !important;
  color:#f5fbff !important;
  font-size:1rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

.business-dashboard-head small{
  color:rgba(219,234,244,.78) !important;
  font-size:.82rem !important;
  line-height:1.3 !important;
  text-align:right !important;
}

.business-dashboard-device{
  width:min(100%,360px) !important;
  margin-inline:auto !important;
  padding:10px !important;
  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(145deg,rgba(18,41,48,.72),rgba(8,20,25,.58)) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.business-dashboard-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:22px !important;
}

.business-feature-stack{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:24px !important;
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

.business-feature{
  height:auto !important;
  min-height:250px !important;
  padding:28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:18px !important;
  align-self:start !important;
}

.business-feature-icon{
  width:54px !important;
  height:54px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  flex:0 0 auto !important;
}

.business-feature small{
  display:block !important;
  margin-bottom:10px !important;
  line-height:1.3 !important;
}

.business-feature h3{
  margin:0 0 12px 0 !important;
  line-height:1.15 !important;
}

.business-feature p{
  margin:0 !important;
  line-height:1.7 !important;
}

.business-flow{
  margin-top:28px !important;
}

@media (max-width:1200px){
  .business-layout{
    grid-template-columns:1fr !important;
  }

  .business-feature-stack{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:780px){
  .business-preview{
    padding:20px !important;
  }

  .business-dashboard-head{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
  }

  .business-dashboard-head small{
    text-align:left !important;
  }

  .business-dashboard-device{
    width:min(100%,310px) !important;
    padding:8px !important;
    border-radius:24px !important;
  }

  .business-dashboard-image{
    border-radius:18px !important;
  }

  .business-feature-stack{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .business-feature{
    min-height:0 !important;
    padding:22px !important;
  }
}

/* RINGOWNER - BUSINESS SECTION MARKETPLACE BALANCE END */

/* =========================================================
   RINGOWNER - MARKETPLACE COMPACT 4 CARDS FINAL
   ========================================================= */

.marketplace-feature-layout {
  align-items: start !important;
  gap: 24px !important;
}

/* Right-side Marketplace cards */
.market-feature-stack {
  align-self: start !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;

  gap: 16px !important;

  height: auto !important;
  min-height: 0 !important;
}

.market-feature-stack > .market-feature {
  height: auto !important;
  min-height: 0 !important;

  align-self: start !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 15px !important;

  padding: 22px !important;

  border-radius: 24px !important;
}

.market-feature-stack > .market-feature .market-feature-top {
  display: flex !important;
  align-items: flex-start !important;

  gap: 14px !important;

  margin: 0 !important;
}

.market-feature-stack > .market-feature .market-feature-icon {
  flex: 0 0 auto !important;

  width: 48px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;

  margin: 0 !important;
}

.market-feature-stack > .market-feature small {
  display: block !important;

  margin: 1px 0 7px !important;

  font-size: .69rem !important;
  line-height: 1.25 !important;

  letter-spacing: .07em !important;
}

.market-feature-stack > .market-feature h3 {
  margin: 0 !important;

  font-size: clamp(1.08rem,1.45vw,1.38rem) !important;
  line-height: 1.18 !important;
}

.market-feature-stack > .market-feature p {
  margin: 0 !important;

  font-size: .92rem !important;
  line-height: 1.6 !important;
}

/* Keep the REAL AR screenshot card; do not stretch it */
.market-feature-ar {
  height: auto !important;
  min-height: 0 !important;

  align-self: start !important;
}

/* Old HTML demo is removed, but neutralize any stale CSS impact */
.market-ar-demo {
  display: none !important;
}

@media (max-width: 1080px) {

  .marketplace-feature-layout {
    grid-template-columns: 1fr !important;
  }

  .market-feature-stack {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 680px) {

  .market-feature-stack {
    grid-template-columns: 1fr !important;

    gap: 14px !important;
  }

  .market-feature-stack > .market-feature {
    padding: 20px !important;
  }
}

/* =========================================================
   RINGOWNER - SECURITY REAL PUBLIC SCREEN FINAL
   ========================================================= */

.security-public-stage {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

.security-real-stage {
  width: 100%;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding: 20px 6px 4px;
}

.security-real-device {
  width: min(100%, 360px);

  margin-inline: auto;
  padding: 9px;

  overflow: hidden;

  border-radius: 30px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    linear-gradient(
      145deg,
      rgba(16,41,45,.78),
      rgba(7,24,28,.58)
    );

  box-shadow:
    0 30px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.security-real-image {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 22px;

  object-fit: contain;
}

@media (max-width: 1050px) {

  .security-real-device {
    width: min(100%, 340px);
  }
}

@media (max-width: 650px) {

  .security-real-stage {
    padding: 14px 0 2px;
  }

  .security-real-device {
    width: min(100%, 310px);

    padding: 7px;

    border-radius: 24px;
  }

  .security-real-image {
    border-radius: 18px;
  }
}

/* =========================================================
   RINGOWNER - SHOP REAL QR PRODUCT VISUALS FINAL
   Vehicle QR + Business QR
   Key Ring remains untouched
   ========================================================= */

.shop-product-real-visual {
  min-height: 260px !important;
  height: 260px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(6,182,212,.10),
      transparent 65%
    ),
    rgba(255,255,255,.025) !important;
}

.shop-product-real-image {
  display: block;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.22));
}

/* Landscape vehicle sticker */

.shop-product-real-image-vehicle {
  width: 100%;
  height: auto;

  border-radius: 18px;
}

/* Circular business QR sticker */

.shop-product-real-image-business {
  width: min(100%, 225px);
  height: auto;

  border-radius: 50%;
}

/* Prevent existing decorative pseudo-elements
   from interfering with real product artwork */

.shop-product-real-visual::before,
.shop-product-real-visual::after {
  display: none !important;
  content: none !important;
}

@media (hover:hover) {

  .shop-product-real-image {
    transition:
      transform .28s ease,
      filter .28s ease;
  }

  .shop-product:hover .shop-product-real-image {
    transform: translateY(-3px);

    filter:
      drop-shadow(0 22px 34px rgba(0,0,0,.28));
  }
}

@media (max-width: 900px) {

  .shop-product-real-visual {
    min-height: 240px !important;
    height: 240px !important;
  }

  .shop-product-real-image-business {
    width: min(100%, 205px);
  }
}

@media (max-width: 650px) {

  .shop-product-real-visual {
    min-height: 220px !important;
    height: 220px !important;

    padding: 12px !important;
  }

  .shop-product-real-image-vehicle {
    border-radius: 14px;
  }

  .shop-product-real-image-business {
    width: min(100%, 190px);
  }
}

/* =========================================================
   RINGOWNER - DRIVER MODE AND KEY RING REAL VISUAL FINAL
   ========================================================= */


/* ---------------------------------------------------------
   DRIVER MODE — compact real screenshot inside row card
   --------------------------------------------------------- */

.driver-mode-card {
  display: grid !important;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    145px !important;

  align-items: center !important;

  gap: 18px !important;
}

.driver-mode-copy {
  min-width: 0;
}

.driver-mode-copy h3 {
  margin: 0 0 6px;
}

.driver-mode-copy p {
  margin: 0;
}

.driver-mode-preview {
  width: 145px;
  height: 172px;

  overflow: hidden;

  border-radius: 20px;

  border:
    1px solid rgba(6,182,212,.18);

  background:
    rgba(255,255,255,.04);

  box-shadow:
    0 16px 34px rgba(0,0,0,.20);
}

.driver-mode-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
    Focuses on Driver Mode modal rather than
    making the full phone screenshot extremely tall.
  */
  object-position: center 47%;
}


/* ---------------------------------------------------------
   KEY RING — real product artwork
   --------------------------------------------------------- */

.shop-product-real-keyring {
  min-height: 260px !important;
  height: 260px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(6,182,212,.14),
      transparent 66%
    ),
    rgba(255,255,255,.025) !important;
}

.shop-product-real-image-keyring {
  display: block;

  width: auto !important;
  height: min(100%, 230px) !important;

  max-width: 100% !important;
  max-height: 230px !important;

  object-fit: contain !important;

  border-radius: 22px;

  filter:
    drop-shadow(0 20px 32px rgba(0,0,0,.30));
}

.shop-product-real-keyring::before,
.shop-product-real-keyring::after {
  display: none !important;
  content: none !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .driver-mode-card {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      125px !important;

    gap: 14px !important;
  }

  .driver-mode-preview {
    width: 125px;
    height: 150px;
  }

  .shop-product-real-keyring {
    min-height: 240px !important;
    height: 240px !important;
  }

  .shop-product-real-image-keyring {
    max-height: 210px !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

  .driver-mode-card {
    grid-template-columns:
      auto
      minmax(0, 1fr) !important;

    align-items: start !important;
  }

  .driver-mode-preview {
    grid-column: 1 / -1;

    width: min(100%, 190px);
    height: 215px;

    margin-inline: auto;
  }

  .shop-product-real-keyring {
    min-height: 220px !important;
    height: 220px !important;

    padding: 10px !important;
  }

  .shop-product-real-image-keyring {
    max-height: 195px !important;

    border-radius: 18px;
  }
}