:root{
  color-scheme:light;
  --bg:#fbfbfa; --surface:#ffffff; --surface-2:#f4f3f0; --border:#eae7e1;
  --text:#1a1a1a; --text-muted:#79766f;
  --accent:#ff6b5e; --accent-strong:#e04a3d; --accent-tint:#fff0ee; --accent-ink:#2a0704;
  --good:#1f9d55; --good-tint:#e6f6ec;
  --info:#1c6fd8; --info-tint:#e8f1fd;
  --warn:#b3760f; --warn-tint:#fbf0dd;
  --shadow:0 1px 2px rgba(20,15,10,.04), 0 12px 32px rgba(20,15,10,.06);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0a0a0a; --surface:#151513; --surface-2:#1d1c1a; --border:#2c2a27;
    --text:#f5f4f1; --text-muted:#98958d;
    --accent:#ff8a7e; --accent-strong:#ff6b5e; --accent-tint:#2a1512; --accent-ink:#1a0402;
    --good:#3fce7d; --good-tint:#102a1a;
    --info:#6ba8f0; --info-tint:#122236;
    --warn:#e0ac4f; --warn-tint:#332609;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px;}
h1,h2,h3{font-family:"Manrope",-apple-system,sans-serif; margin:0; letter-spacing:-.01em;}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;}
::selection{background:var(--accent); color:#fff;}

header.top{padding-block:20px; position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px);}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand svg{width:30px; height:30px; flex:none;}
.brand .word{font-family:"Manrope"; font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--text);}
.brand .word span{font-weight:500; color:var(--text-muted);}
.header-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:700; font-size:13.5px;
  padding:10px 16px; border-radius:100px; font-family:"Manrope",sans-serif; letter-spacing:-.01em; border:none; cursor:pointer;
}
.btn-solid{background:var(--text); color:var(--bg);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-ghost{border:1.5px solid var(--border); color:var(--text); background:none;}
.btn-lg{padding:15px 26px; font-size:15px;}

.hero{padding-block:64px 56px; text-align:center; overflow:hidden;}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-muted);
  background:var(--surface-2); padding:6px 14px; border-radius:100px; margin-bottom:28px; border:1px solid var(--border);
}
.eyebrow i{width:6px;height:6px;border-radius:50%; background:var(--accent); display:inline-block;}
h1.headline{font-size:clamp(34px,6.5vw,66px); line-height:1.05; font-weight:800; max-width:18ch; margin-inline:auto;}
.rotator{color:var(--accent); display:inline-block;}
@keyframes swapfade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.rotator.swap{animation:swapfade .38s ease;}
.sub{font-size:18px; color:var(--text-muted); max-width:44ch; margin:22px auto 0; line-height:1.5;}
.hero-actions{display:flex; gap:12px; margin-top:34px; justify-content:center; flex-wrap:wrap;}

/* ---- hero entrance choreography (Apple-style staggered reveal) ---- */
@keyframes heroRise{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes glowPulse{ 0%,100%{opacity:.25; transform:translate(-50%,-50%) scale(1);} 50%{opacity:.45; transform:translate(-50%,-50%) scale(1.1);} }
@keyframes floatPhone{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@keyframes shadowBreathe{ 0%,100%{transform:scaleX(1); opacity:.14;} 50%{transform:scaleX(.88); opacity:.1;} }
@keyframes crackAppear{ from{opacity:0;} to{opacity:1;} }
@keyframes crackFade{ to{opacity:0;} }
@keyframes shineSweep{ from{transform:translateX(-40px) skewX(-18deg);} to{transform:translateX(300px) skewX(-18deg);} }
@keyframes ringPop{ 0%{opacity:0; transform:scale(.3);} 55%{opacity:1; transform:scale(1.2);} 100%{opacity:1; transform:scale(1);} }
@keyframes checkDraw{ to{ stroke-dashoffset:0; } }

.hero-visual{margin-top:52px; display:flex; justify-content:center; position:relative;}
.hero-visual .glow{
  position:absolute; top:46%; left:50%; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 72%);
  transform:translate(-50%,-50%); filter:blur(4px); opacity:.3; pointer-events:none;
}
.hero-visual svg{width:100%; max-width:200px; height:auto; position:relative;}
.hero-visual .phone-shadow{ transform-origin:120px 364px; }
.hero-visual .phone-group{ transform-origin:120px 190px; }
.hero-visual .cracks{ opacity:0; fill:none; }
.hero-visual .cracks path{ stroke:#f2f4f8; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.hero-visual .shine{ transform:translateX(-40px) skewX(-18deg); }
.hero-visual .fix-badge{ transform-origin:128px 150px; opacity:1; }
.hero-visual .fix-badge .check{ stroke-dasharray:32; stroke-dashoffset:0; }

@media (prefers-reduced-motion: no-preference){
  .eyebrow, h1.headline, .sub, .hero-actions{ animation:heroRise .7s cubic-bezier(.22,1,.36,1) both; }
  .eyebrow{ animation-delay:.02s; }
  h1.headline{ animation-delay:.1s; }
  .sub{ animation-delay:.2s; }
  .hero-actions{ animation-delay:.3s; }
  .hero-visual{ opacity:0; animation:heroRise .8s cubic-bezier(.22,1,.36,1) .4s both; }
  .hero-visual .glow{ animation:glowPulse 4.5s ease-in-out 1.4s infinite; }
  .hero-visual .phone-group{ animation:floatPhone 5s ease-in-out 1.4s infinite; }
  .hero-visual .phone-shadow{ animation:shadowBreathe 5s ease-in-out 1.4s infinite; }
  .hero-visual .cracks{ animation:crackAppear .12s ease 1.1s forwards, crackFade .5s ease 2s forwards; }
  .hero-visual .shine{ animation:shineSweep 1s cubic-bezier(.4,0,.2,1) 2s forwards; }
  .hero-visual .fix-badge{ opacity:0; transform:scale(.3); animation:ringPop .5s cubic-bezier(.34,1.56,.64,1) 2.6s forwards; }
  .hero-visual .fix-badge .check{ stroke-dashoffset:32; animation:checkDraw .3s ease 2.9s forwards; }
}

.breadcrumb{font-size:13px; color:var(--text-muted); margin-bottom:24px;}
.breadcrumb a{color:var(--text-muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent-strong);}

.service-band{background:var(--text); color:var(--bg); padding-block:13px;}
.service-band .wrap{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; font-size:13.5px; font-weight:600;}
.service-band span{display:inline-flex; align-items:center; gap:8px;}

section{padding-block:64px;}
section.tight{padding-block:40px;}
.section-head{margin-bottom:32px; text-align:center;}
.section-head .tag{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.section-head h2, .section-head h1{font-size:clamp(26px,4vw,38px); margin-top:8px; font-weight:800;}
.section-sub{font-size:15px; color:var(--text-muted); margin-top:10px; max-width:56ch; margin-inline:auto;}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
@media (max-width:760px){ .stat-row{grid-template-columns:repeat(2,1fr);} }
.stat{background:var(--surface); padding:26px 18px; text-align:center;}
.stat .n{font-family:"Manrope"; font-weight:800; font-size:32px; letter-spacing:-.02em;}
.stat .l{font-size:12.5px; color:var(--text-muted); margin-top:6px;}

.ptabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:32px;}
.ptab{
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-muted); text-decoration:none;
  padding:10px 18px; border-radius:100px; font-size:13.5px; font-weight:700;
  font-family:"Manrope",sans-serif; display:inline-block;
}
.ptab.active{background:var(--text); border-color:var(--text); color:var(--bg);}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.brand-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px;
  text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:6px;
}
.brand-card:hover{border-color:var(--accent);}
.brand-card .bname{font-family:"Manrope"; font-weight:800; font-size:16px;}
.brand-card .bcount{font-size:12.5px; color:var(--text-muted); font-family:"IBM Plex Mono";}

.model-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.model-table a.row{display:flex; justify-content:space-between; gap:10px; padding:14px 20px; text-decoration:none; color:inherit; border-bottom:1px solid var(--border);}
.model-table a.row:last-child{border-bottom:none;}
.model-table a.row:hover{background:var(--accent-tint);}
.model-table a.row:hover .mname{color:var(--accent-strong);}
.mname{color:var(--text-muted); font-size:14px;}
.mprice{font-weight:700; white-space:nowrap; font-size:14px;}

.search-row{margin-bottom:20px;}
.search-row input[type="search"]{
  width:100%; padding:15px 18px; border-radius:100px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:15px; font-family:"Hanken Grotesk",sans-serif;
}
.search-row input:focus{outline:none; border-color:var(--accent);}

.finder{
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; text-align:left;
  max-width:640px; margin:0 auto; box-shadow:var(--shadow); position:relative;
}
.finder-field{flex:1 1 180px; min-width:150px; display:flex; flex-direction:column; gap:7px; position:relative;}
.finder-field label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);}
.finder .btn{flex:1 1 100%; height:47px; justify-content:center;}
@media (min-width:520px){.finder .btn{flex:none;}}
.hero-finder{margin:32px auto; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:640px;}
.finder-eyebrow{font-size:13px; font-weight:700; color:var(--text-muted); text-align:center;}

/* custom combobox ("xselect") — replaces native <select> for a 2026-grade look */
.xselect{position:relative;}
.xselect-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--text); font-size:15px; font-family:"Hanken Grotesk",sans-serif; cursor:pointer;
  text-align:left; transition:border-color .15s ease;
}
.xselect-trigger:hover{border-color:var(--accent);}
.xselect.open .xselect-trigger{border-color:var(--accent);}
.xselect-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.xselect-value.placeholder{color:var(--text-muted);}
.xselect-chevron{flex:none; color:var(--text-muted); transition:transform .18s ease;}
.xselect.open .xselect-chevron{transform:rotate(180deg); color:var(--accent);}
.xselect[data-disabled] .xselect-trigger{opacity:.5; cursor:not-allowed;}
.xselect-panel{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top center;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.xselect.open .xselect-panel{opacity:1; visibility:visible; transform:translateY(0) scale(1); transition:opacity .16s ease, transform .16s ease;}
.xselect-search{
  width:100%; padding:10px 12px; margin-bottom:6px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px; font-family:"Hanken Grotesk",sans-serif; box-sizing:border-box;
}
.xselect-search:focus{outline:none; border-color:var(--accent);}
.xselect-options{max-height:236px; overflow-y:auto;}
.xselect-option{padding:10px 12px; border-radius:9px; font-size:14.5px; cursor:pointer; color:var(--text); line-height:1.3;}
.xselect-option:hover, .xselect-option.active{background:var(--accent-tint); color:var(--accent-strong);}
.xselect-empty{padding:10px 12px; font-size:13.5px; color:var(--text-muted);}

.model-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px;}
.model-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, border-color .15s ease;
}
.model-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.model-card .n{font-size:14.5px; font-weight:600; color:var(--text); line-height:1.35;}
.model-card .p{font-family:"IBM Plex Mono"; font-weight:700; font-size:15px; color:var(--accent-strong);}
.model-card .foot-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}

.tier-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; white-space:nowrap; letter-spacing:.01em;}
.tier-badge.org{color:var(--good); background:var(--good-tint);}
.tier-badge.sup{color:var(--info); background:var(--info-tint);}
.tier-badge.cmp{color:var(--warn); background:var(--warn-tint);}

.brand-note{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; margin-top:22px; max-width:760px;}
.brand-note p{margin:0; font-size:14.5px; color:var(--text-muted); line-height:1.6;}

.soon-card, .flat-price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);
  display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; max-width:720px; margin-inline:auto;
}
.flat-price-card .badge{
  width:52px;height:52px;border-radius:14px; background:var(--accent-tint); color:var(--accent-strong);
  display:flex;align-items:center;justify-content:center; font-size:24px; flex:none;
}
.flat-price-card h3, .soon-card h3{font-size:19px; margin-bottom:8px; font-weight:800;}
.flat-price-card p, .soon-card p{margin:0; font-size:14.5px; color:var(--text-muted); line-height:1.55; max-width:56ch;}
.price.big{font-family:"IBM Plex Mono"; font-size:24px; font-weight:700; color:var(--accent-strong); margin-top:14px;}
.soon-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}

.parts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media (max-width:820px){ .parts-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .parts-grid{grid-template-columns:1fr;} }
.part-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:9px;}
.part-card:hover{border-color:var(--accent);}
.part-card .picon{font-size:22px;}
.part-card h4{font-family:"Manrope"; font-size:15px; font-weight:800; margin:0;}
.part-card p{margin:0; font-size:13px; color:var(--text-muted); line-height:1.45; flex:1;}
.part-card a{font-size:13px; font-weight:700; color:var(--accent-strong); text-decoration:none;}

.model-hero{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;}
@media (max-width:760px){ .model-hero{grid-template-columns:1fr;} }
.model-photo{background:var(--surface-2); border-radius:24px; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border);}
.model-photo img{width:100%; height:100%; object-fit:cover;}
.model-photo svg{width:52%; height:auto;}
.model-info .tag{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.model-info h1{font-size:clamp(26px,4vw,40px); margin-top:10px; font-weight:800;}
.model-price{font-family:"IBM Plex Mono"; font-size:30px; font-weight:700; margin-top:18px;}
.model-price .unit{font-size:15px; color:var(--text-muted); font-weight:400; margin-left:6px;}
.model-meta{display:flex; gap:22px; margin-top:20px; flex-wrap:wrap;}
.model-meta div{font-size:12.5px; color:var(--text-muted);}
.model-meta b{display:block; color:var(--text); font-size:14px; font-weight:700;}
.model-actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
.related-models{margin-top:14px; display:flex; flex-direction:column; gap:6px;}
.related-models a{font-size:13.5px; color:var(--text-muted); text-decoration:none;}
.related-models a:hover{color:var(--accent-strong);}

.timeline{max-width:640px; margin-inline:auto;}
.step{display:flex; gap:20px; padding-block:20px; border-bottom:1px solid var(--border);}
.step:last-child{border-bottom:none;}
.step .num{font-family:"Manrope"; font-weight:800; font-size:24px; color:var(--accent); width:38px; flex:none;}
.step h3{font-size:16.5px; font-weight:800;}
.step p{margin:5px 0 0; font-size:14px; color:var(--text-muted); max-width:52ch; line-height:1.5;}

.brand-bars{display:flex; flex-direction:column; gap:12px; max-width:640px; margin:0 auto;}
.bbar{display:flex; align-items:center; gap:14px; font-size:14px;}
.bbar .name{width:120px; flex:none; font-weight:600;}
.bbar .track{flex:1; height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden;}
.bbar .fill{height:100%; background:var(--accent); border-radius:5px;}
.bbar .pct{width:44px; text-align:right; font-family:"IBM Plex Mono"; flex:none; color:var(--text-muted);}

.faq{max-width:720px; margin-inline:auto; display:flex; flex-direction:column; gap:2px;}
.faq details{border-bottom:1px solid var(--border); padding-block:18px;}
.faq summary{list-style:none; cursor:pointer; font-weight:700; font-size:15.5px; font-family:"Manrope"; display:flex; justify-content:space-between; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--accent); font-size:20px; font-weight:400;}
.faq details[open] summary::after{content:"\2013";}
.faq p{margin:12px 0 0; font-size:14.5px; color:var(--text-muted); line-height:1.6; max-width:62ch;}

.cta-band{background:var(--text); color:var(--bg); border-radius:24px; padding:48px 36px; text-align:center;}
.cta-band h2{color:var(--bg); font-size:clamp(26px,4.5vw,38px); font-weight:800;}
.cta-band p{color:color-mix(in srgb, var(--bg) 65%, transparent); margin:10px 0 0; font-size:15px;}
.cta-band .btn-ghost{border-color:color-mix(in srgb, var(--bg) 30%, transparent); color:var(--bg);}

footer.foot{padding-block:40px 56px; border-top:1px solid var(--border); text-align:center;}
footer.foot .word{font-family:"Manrope"; font-weight:800; font-size:16px;}
footer.foot p{font-size:13px; color:var(--text-muted); margin-top:8px; line-height:1.6;}
footer.foot a{color:var(--accent-strong); text-decoration:none; font-weight:700;}

@media (max-width:600px){
  .hero-actions{flex-direction:column; align-items:stretch;}
  .header-actions .btn span.lbl{display:none;}
}


header.wp-block-template-part, footer.wp-block-template-part{display:none!important;}
.wp-block-post-title{display:none!important;}
.wp-site-blocks{padding:0!important;}
body{background:var(--bg);}