/* Keldma — main.css
   Editorial de luxo, zero clichê IA. Whitespace, assimetria e sofisticação.
   Android: sem esticar com 2 dedos, mas ROLAGEM 100% livre (1 dedo + mouse).
*/
*{ box-sizing:border-box; margin:0; padding:0 }
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  width:100%;
  overflow-x:hidden;
  touch-action: pan-x pan-y;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.6;
  width:100%;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-x pan-y;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit }
::selection{ background:var(--accent); color:var(--on-accent) }
*{ -webkit-tap-highlight-color: transparent }
@media(max-width: 768px){ input, select, textarea{ font-size:16px !important } }
@media(hover:hover) and (pointer:fine){
  body{ cursor: none }
  .cursor-dot{ position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%; background:var(--accent); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition: width .2s var(--ease), height .2s var(--ease), background .2s, opacity .2s; }
  .cursor-ring{ position:fixed; top:0; left:0; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.3); pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s, opacity .2s, transform .15s; }
  body.hovering .cursor-dot{ width:10px; height:10px; background:var(--accent) }
  body.hovering .cursor-ring{ width:44px; height:44px; border-color: rgba(212,175,90,.45) }
}
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease-slow), transform .8s var(--ease-slow) }
[data-reveal].is-in{ opacity:1; transform:none }
[data-reveal][data-delay="1"]{ transition-delay:.08s }
[data-reveal][data-delay="2"]{ transition-delay:.16s }
[data-reveal][data-delay="3"]{ transition-delay:.24s }
.hairline{ height:1px; background: var(--line); width:100% }
.topbar{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:var(--paper-3); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:.8rem; padding:.55rem 1rem; text-align:center; width:100%; overflow:hidden; }
.topbar strong{ color:var(--ink-2); font-weight:600; letter-spacing:.12em }
.topbar .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); display:inline-block; flex-shrink:0 }
.header{ position:sticky; top:0; z-index:40; background:rgba(46,46,51,.92); backdrop-filter:blur(14px) saturate(1.15); border-bottom:2px solid var(--accent); width:100%; }
.header-inner{ max-width:1280px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; }
.brand-mark{ display:flex; align-items:center; gap:.9rem; min-width:0 }
.brand-icon{ width:38px; height:38px; border-radius:50%; border:1px solid var(--accent); display:grid; place-items:center; background:var(--surface); color:var(--accent-2); font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.06em; flex-shrink:0; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.42rem; letter-spacing:.16em; line-height:1; color:var(--ink); }
.brand-name span{ font-weight:400; font-style:italic; letter-spacing:.04em; font-size:1.02rem; color:var(--muted); display:block; margin-top:.05rem }
.nav{ display:flex; align-items:center; gap:.6rem; flex-shrink:0 }
.nav-link{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:.45rem .7rem; border-radius:999px; }
.nav-link:hover{ color:var(--ink) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem 1.05rem; border-radius:999px; font-weight:600; font-size:.84rem; letter-spacing:.02em; border:1px solid transparent; cursor:pointer; transition: all .2s var(--ease); white-space:nowrap; }
.btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.btn-primary:hover{ background:var(--accent-3); transform:translateY(-1px); box-shadow:0 8px 22px rgba(43,43,46,.14) }
.btn-champagne{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.btn-champagne:hover{ background:var(--accent-2); transform:translateY(-1px); box-shadow:0 8px 22px var(--accent-glow) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong) }
.btn-ghost:hover{ border-color:var(--ink); background:var(--surface) }
.btn-small{ padding:.5rem .85rem; font-size:.8rem }
.hero{ max-width:1280px; margin:0 auto; padding: 28px 24px 0; width:100%; overflow:hidden }
.hero-grid{ display:grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items:center; padding: 36px 0 44px; width:100%; max-width:100%; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:.38rem .7rem; border-radius:999px; max-width:100%; }
.eyebrow em{ font-style:normal; color:var(--accent-2); font-weight:700 }
.hero-title{ font-family:var(--font-display); font-weight:500; line-height:.92; letter-spacing:-.03em; font-size: clamp(2.4rem, 5.8vw, 4.9rem); color:var(--ink); margin:18px 0 14px; word-break: break-word; }
.hero-title i{ font-weight:400; font-style:italic; color:var(--accent-2); }
.hero-title .line{ display:block }
.hero-sub{ color:var(--ink-3); font-size:1.02rem; line-height:1.65; max-width:46ch; font-weight:400 }
.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:22px }
.hero-trust{ display:flex; align-items:center; gap:.9rem; margin-top:22px; border-top:1px solid var(--line); padding-top:18px; max-width:420px; flex-wrap:wrap }
.stars{ color:var(--accent); letter-spacing:.08em; font-size:.86rem }
.trust-text{ font-size:.82rem; color:var(--muted); line-height:1.45 }
.trust-text strong{ color:var(--ink); font-weight:600 }
.hero-visual{ position:relative; padding: 10px 0 18px 8px; width:100%; max-width:100%; min-width:0 }
.hero-photo-wrap{ position:relative; width:100%; aspect-ratio: 4 / 5.05; border-radius: var(--radius-xl); overflow:hidden; background:var(--paper-2); border:1px solid var(--line); box-shadow: var(--shadow-med); }
.hero-photo-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-slow) }
.hero-photo-wrap:hover img{ transform:scale(1.03) }
.photo-caption{ position:absolute; left:14px; bottom:14px; background:rgba(46,46,51,.92); backdrop-filter:blur(8px); border:1px solid var(--line); padding:.6rem .75rem; border-radius:12px; box-shadow:0 8px 20px rgba(43,43,46,.08); display:flex; gap:.6rem; align-items:center; min-width: 160px; max-width: calc(100% - 28px); }
.photo-caption b{ font-size:.82rem; color:var(--ink); display:block; line-height:1.2 }
.photo-caption span{ font-size:.72rem; color:var(--muted) }
.float-card{ position:absolute; right:-10px; top:26px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:.8rem .9rem; box-shadow:var(--shadow-soft); display:flex; gap:.7rem; align-items:center; max-width:210px; }
.float-card .icon{ width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-2); font-size:1rem; flex-shrink:0 }
.float-card b{ font-size:.82rem; line-height:1.2; color:var(--ink) }
.float-card p{ font-size:.72rem; color:var(--muted); line-height:1.35 }
.ornament{ position:absolute; right:-18px; bottom:-6px; width:120px; height:120px; border-radius:50%; border:1px solid var(--line); opacity:.55; pointer-events:none; display:none; }
.divider{ max-width:1280px; margin:0 auto; padding:0 24px; width:100% }
.divider-line{ height:1px; background: var(--line); position:relative; width:100% }
.divider-line::after{ content:""; position:absolute; left:0; top:0; width:72px; height:1px; background:var(--accent) }
.section{ max-width:1280px; margin:0 auto; padding: 56px 24px; width:100%; overflow:hidden }
.section-kicker{ font-size:.70rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); font-weight:700 }
.section-title{ font-family:var(--font-display); font-size: clamp(1.7rem, 3.2vw, 3rem); line-height:.98; letter-spacing:-.02em; color:var(--ink); margin:8px 0 12px; font-weight:500; word-break: break-word; }
.section-title i{ font-weight:400; font-style:italic; color:var(--accent-2) }
.section-lead{ color:var(--ink-3); font-size:1rem; line-height:1.7; max-width:56ch }
.philosophy{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items:start; background:var(--paper-3); border:1px solid var(--line); border-radius: var(--radius-xl); padding: 34px; box-shadow: var(--shadow-card); width:100%; max-width:100% }
.pillars{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:6px; width:100% }
.pillar{ display:grid; grid-template-columns: 46px 1fr; gap:14px; padding:16px 16px 16px 14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; width:100% }
.pillar-num{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; color:var(--accent-2); border:1px solid var(--line); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--paper); flex-shrink:0 }
.pillar h4{ font-size:.98rem; color:var(--ink); line-height:1.25; margin-bottom:.25rem }
.pillar p{ font-size:.85rem; color:var(--ink-3); line-height:1.6 }
.quote-block{ border-left:2px solid var(--accent); padding-left:16px; margin-top:18px }
.quote-block p{ font-family:var(--font-display); font-style:italic; font-size:1.22rem; line-height:1.45; color:var(--ink-2) }
.quote-block cite{ display:block; margin-top:.5rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-style:normal }
.catalog-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:18px; width:100% }
.tabs{ display:flex; gap:.45rem; flex-wrap:wrap; background:var(--paper-3); border:1px solid var(--line); padding:6px; border-radius:999px; width:fit-content; max-width:100% }
.tab{ padding:.52rem .95rem; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--ink-3); font-weight:600; font-size:.80rem; cursor:pointer; transition: all .2s var(--ease); white-space:nowrap; }
.tab.active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:0 6px 18px rgba(43,43,46,.11) }
.tab:hover:not(.active){ background:var(--surface); border-color:var(--line) }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; width:100%; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); position:relative; box-shadow: var(--shadow-card); min-width:0; width:100%; }
.card:hover{ transform:translateY(-4px); border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(43,43,46,.08) }
.card.featured{ grid-column: span 6 }
.card.regular{ grid-column: span 4 }
.card-img{ height: 236px; overflow:hidden; background:var(--paper-2); position:relative; width:100% }
.card.featured .card-img{ height: 288px }
.card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease-slow) }
.card:hover .card-img img{ transform:scale(1.05) }
.card-badges{ position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:start; pointer-events:none; gap:.4rem }
.badge-promo{ background:var(--accent); color:var(--on-accent); font-size:.66rem; letter-spacing:.10em; text-transform:uppercase; font-weight:700; padding:.34rem .52rem; border-radius:7px; box-shadow:0 4px 14px rgba(0,0,0,.14); max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge-soft{ background:rgba(46,46,51,.92); backdrop-filter:blur(6px); border:1px solid var(--line); color:var(--ink-3); font-size:.70rem; font-weight:600; padding:.34rem .5rem; border-radius:999px; white-space:nowrap; }
.card-body{ padding:16px 16px 14px; display:flex; flex-direction:column; flex:1; min-width:0 }
.card-kicker{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.card-title{ font-family:var(--font-display); font-size:1.28rem; line-height:1.15; color:var(--ink); margin:4px 0 6px; font-weight:600; letter-spacing:-.015em; word-break: break-word }
.card-desc{ font-size:.86rem; color:var(--ink-3); line-height:1.55; flex:1; word-break: break-word }
.gift{ margin-top:12px; background:var(--accent-softer); border:1px solid rgba(212,175,90,.20); border-left:3px solid var(--accent); padding:.55rem .65rem; border-radius:10px; font-size:.79rem; color:var(--accent-2); display:flex; gap:.45rem; align-items:start; line-height:1.4; word-break: break-word; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap }
.price{ font-family:var(--font-display); font-size:1.45rem; color:var(--accent); font-weight:600; letter-spacing:-.02em; line-height:1; min-width:0 }
.price small{ font-family:var(--font-sans); font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:2px }
.card-cta{ display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); padding:.58rem .82rem; border-radius:999px; font-weight:700; font-size:.78rem; cursor:pointer; transition: all .2s var(--ease); white-space:nowrap }
.card-cta:hover{ background:var(--accent-3); transform:translateY(-1px) }
.card-cta .arr{ transition: transform .2s var(--ease) }
.card-cta:hover .arr{ transform:translateX(3px) }
.section-dark{ background:var(--paper-3); color:var(--ink); border-top:1px solid #3A3A3E; border-bottom:1px solid #3A3A3E; width:100%; overflow:hidden; }
.section-dark .section-kicker{ color:var(--accent-3) }
.section-dark .section-title{ color:var(--ink) }
.section-dark .section-lead{ color:rgba(250,250,250,.72) }
.testis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:22px; width:100%; }
.tcard{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px; backdrop-filter:blur(6px); min-width:0 }
.tstars{ color:var(--accent-3); font-size:.82rem; letter-spacing:.08em }
.tcard p{ margin:10px 0 14px; font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.90); word-break: break-word }
.tauthor{ display:flex; align-items:center; gap:.7rem }
.avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; font-weight:700; font-size:.78rem; color:white; border:1px solid rgba(255,255,255,.14); flex-shrink:0 }
.tauthor b{ font-size:.84rem; color:white; line-height:1.1; display:block }
.tauthor span{ font-size:.74rem; color:rgba(255,255,255,.62) }
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; width:100% }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; position:relative; overflow:hidden; min-width:0 }
.step::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), transparent) }
.step-num{ font-family:var(--font-display); font-size:2.6rem; line-height:1; font-weight:500; color:var(--line-strong); letter-spacing:-.03em }
.step h4{ margin:8px 0 6px; font-size:1rem; color:var(--ink) }
.step p{ font-size:.86rem; color:var(--ink-3); line-height:1.6; word-break: break-word }
.cta-band{ background: linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%); border:1px solid var(--line); border-radius: var(--radius-xl); padding: 28px; display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:center; box-shadow: var(--shadow-card); width:100%; }
.cta-title{ font-family:var(--font-display); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height:.98; letter-spacing:-.02em; color:var(--ink); font-weight:500; word-break: break-word }
.cta-title i{ font-style:italic; color:var(--accent-2); font-weight:400 }
.cta-sub{ color:var(--ink-3); font-size:.95rem; line-height:1.65; margin-top:8px; max-width:54ch }
.cta-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:16px }
.cta-visual{ border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1.2/1; background:var(--paper-2); width:100% }
.cta-visual img{ width:100%; height:100%; object-fit:cover }
.footer{ border-top:2px solid var(--accent); background:var(--paper-2); padding: 22px 24px; margin-top:46px; width:100%; overflow:hidden }
.footer-inner{ max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; width:100% }
.footer small{ color:var(--muted); font-size:.78rem; line-height:1.5; word-break: break-word }
.footer a{ text-decoration:underline; text-underline-offset:3px }
.footer-nav{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.footer-nav a{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; border:1px solid var(--line); padding:.4rem .7rem; border-radius:999px; background:var(--surface) }
.footer-nav a:hover{ border-color:var(--ink) }
.lock-link{ opacity:.28; font-size:.95rem; line-height:1; padding:.42rem .52rem; border:1px solid transparent; border-radius:10px; text-decoration:none !important; transition: opacity .2s, border-color .2s, background .2s, transform .2s; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; }
.lock-link:hover{ opacity:.85; border-color: var(--line); background:var(--surface); transform: translateY(-1px) }
.pwa-banner{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%) translateY(14px); background:var(--paper-3); color:white; border:1px solid var(--line-strong); border-radius:16px; padding:.75rem .85rem; display:none; align-items:center; gap:.7rem; z-index:70; box-shadow:0 16px 40px rgba(0,0,0,.22); width:min(96%, 440px); opacity:0; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pwa-banner.show{ display:flex; opacity:1; transform:translateX(-50%) translateY(0) }
.pwa-banner b{ font-size:.84rem; display:block; line-height:1.2 }
.pwa-banner span{ font-size:.74rem; color:rgba(255,255,255,.7); line-height:1.3 }
.pwa-banner .btn{ padding:.5rem .8rem; font-size:.78rem; flex-shrink:0 }
.backdrop{ position:fixed; inset:0; background:rgba(43,43,46,.46); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:80; padding:14px; width:100% }
.backdrop.open{ display:flex }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow: var(--shadow-med); width:min(520px, 100%); max-height:92vh; overflow:auto; max-width:100% }
.modal-head{ padding:18px 18px 0 }
.modal-head h3{ font-family:var(--font-display); font-size:1.5rem; line-height:1.1; color:var(--ink); font-weight:600; letter-spacing:-.02em }
.modal-head p{ color:var(--muted); font-size:.84rem; margin-top:6px; line-height:1.5 }
.modal-body{ padding:16px 18px 18px }
.field{ margin-bottom:12px; min-width:0 }
.field label{ display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--line-strong); background:var(--paper-3); color:var(--ink); border-radius:12px; padding:.7rem .85rem; outline:none; font-size:.88rem; transition: border-color .2s, background .2s, box-shadow .2s; max-width:100%; }
.field input:focus, .field select:focus, .field textarea:focus{ background:var(--surface); border-color:var(--accent-2); box-shadow:0 0 0 4px var(--accent-soft) }
.preview{ margin-top:8px; border:1px dashed var(--line-strong); border-radius:12px; background:var(--paper); height:150px; overflow:hidden; display:grid; place-items:center; color:var(--muted); font-size:.82rem; position:relative; width:100% }
.preview img{ width:100%; height:100%; object-fit:cover; display:none }
.preview.has-img img{ display:block }
.preview.has-img span{ display:none }
.order-summary{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap }
.order-summary img{ width:58px; height:58px; border-radius:10px; object-fit:cover; border:1px solid var(--line); flex-shrink:0 }
.order-summary b{ display:block; color:var(--ink); font-size:.92rem; line-height:1.2 }
.order-summary span{ font-size:.78rem; color:var(--muted) }
.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px); background:var(--paper-3); color:white; border:1px solid var(--line-strong); padding:.9rem 1.05rem; border-radius:14px; box-shadow: 0 16px 40px rgba(0,0,0,.22); font-size:.84rem; line-height:1.4; text-align:center; width:min(92%, 420px); opacity:0; pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index:90; max-width:92vw; word-break: break-word; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.admin-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin: 12px 0 18px; width:100% }
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:18px; width:100% }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; min-width:0 }
.stat-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.stat-val{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--ink); margin-top:4px; letter-spacing:-.02em; word-break: break-word }
.table-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:auto; box-shadow: var(--shadow-card); width:100%; max-width:100%; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; min-width:720px }
th{ text-align:left; background:var(--paper-3); color:var(--accent-2); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap }
td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:.84rem; vertical-align:middle }
.truncate{ max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.icon-btn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface); display:inline-grid; place-items:center; cursor:pointer; transition: all .18s }
.icon-btn:hover{ border-color:var(--ink); transform:translateY(-1px) }
.icon-btn.danger{ color:var(--danger); border-color: rgba(192,57,43,.22) }
.icon-btn.danger:hover{ background:var(--danger); color:white }
@media(max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:22px; padding-top:18px }
  .hero-visual{ order:-1; max-width:560px; margin:0 auto; width:100% }
  .float-card{ right:8px; top:14px; max-width:180px }
  .philosophy{ grid-template-columns:1fr }
  .card.featured, .card.regular{ grid-column: span 12 }
  .testis{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .cta-band{ grid-template-columns:1fr }
  .stats{ grid-template-columns: repeat(2, 1fr) }
}
@media(max-width: 560px){
  .header-inner{ padding:0 14px; height:60px }
  .brand-name{ font-size:1.15rem; letter-spacing:.12em }
  .brand-name span{ font-size:.92rem }
  .hero{ padding:16px 14px 0 }
  .section{ padding: 34px 14px }
  .tabs{ width:100%; overflow:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .tabs::-webkit-scrollbar{ display:none }
  .card-img{ height:210px }
  .card.featured .card-img{ height:210px }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; min-width: 140px }
  .philosophy{ padding:18px }
  .topbar{ font-size:.66rem; padding:.5rem .7rem; gap:.5rem; flex-wrap:wrap; justify-content:center }
  .footer-inner{ justify-content:center; text-align:center }
}