/* DESIGN2CUT — ugyanaz a nyelv, mint az appban (app.designtocut.com).
     A paletta a termék saját DECORS[] listájából jön: Vanília U108 = --board,
     Sonoma H1145 = --oak, a Dió sötétítve = --ink. Nem UI-színek: ez az az anyag,
     amit a vevő megrendel. Színenként EGY jelentés: --signal az EGYETLEN akciószín,
     az --emerald kizárólag a "benne van / rendben" jelölésé. */
  :root {
    --ink:#17110B; --ink-deep:#100C07; --panel:#1C150E; --panel-2:#241C12;
    --rule:#33281B; --rule-2:#4A3B29;
    --board:#EADFC0; --oak:#C79B62; --walnut:#7A5636;
    --signal:#FFB020; --signal-ink:#5C4110; --emerald:#10B981;
    --fg:#F6F1E6; --fg-2:#A99C86; --fg-3:#7A6A52;
    --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
    --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
    --mono:"Space Mono",ui-monospace,Consolas,monospace;
    /* A RÉGI nevek élnek tovább: a törzsben van pár inline var(--bg2) / var(--muted). */
    --bg:var(--ink); --bg2:var(--panel); --card:var(--panel); --border:var(--rule);
    --text:var(--fg); --muted:var(--fg-2); --accent:var(--signal); --accent2:var(--signal);
    --blue:var(--signal);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:var(--sans); background:var(--ink); color:var(--fg); line-height:1.6; position:relative; }
  /* Finom szemcse — ugyanaz, mint az app .grain-overlay-je. */
  body::before {
    content:""; position:fixed; inset:0; z-index:99; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap { max-width:1080px; margin:0 auto; padding:0 24px; }

  /* --- FEJLÉC: tábla-sáv + rétegelt lemez éle, akárcsak az appban --- */
  nav { display:flex; justify-content:space-between; align-items:center; padding:16px 0; }
  .logo { display:flex; align-items:center; gap:10px; font-family:var(--display); text-transform:uppercase;
          font-size:1.6rem; font-weight:800; letter-spacing:.015em; line-height:1; }
  /* A .lw burok is .logo span, ezért KELL a mélyebb szelektor — különben az egész
     szóvédjegy jelzőszínűvé válik, nem csak a "2". */
  .logo .lw { color:var(--fg); }
  .logo .lw span { color:var(--signal); }
  .logo svg { flex:0 0 auto; }
  .navr { display:flex; align-items:center; gap:12px; }
  .lang { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--fg-3); text-decoration:none;
          border:1px solid var(--rule); padding:7px 10px; }
  .lang:hover { color:var(--fg); border-color:var(--fg-3); }
  nav a.cta-s { font-family:var(--display); text-transform:uppercase; color:var(--fg); text-decoration:none;
                font-size:1.05rem; font-weight:700; border:1px solid var(--rule); padding:6px 16px; transition:.15s; }
  nav a.cta-s:hover { border-color:var(--signal); color:var(--signal); }
  .plyline { height:4px; background:repeating-linear-gradient(to bottom,
             #EADFC0 0 1px,#B08A55 1px 2px,#EADFC0 2px 3px,#8A6A3E 3px 4px); }

  /* --- HERO --- */
  .hero { padding:72px 0 56px; text-align:center; }
  .badge { display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:700; color:var(--signal);
           border:1px solid var(--signal); background:rgba(255,176,32,.08); padding:6px 12px; margin-bottom:24px;
           letter-spacing:.05em; text-transform:uppercase; }
  h1 { font-family:var(--display); text-transform:uppercase; font-size:clamp(2.4rem,6vw,4.6rem); font-weight:800;
       letter-spacing:.01em; line-height:.98; max-width:900px; margin:0 auto 20px; }
  h1 em { font-style:normal; color:var(--signal); }
  .sub { font-size:clamp(1rem,1.8vw,1.15rem); color:var(--fg-2); max-width:660px; margin:0 auto 34px; }
  .ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--display); text-transform:uppercase;
         font-size:1.3rem; font-weight:800; text-decoration:none; padding:13px 30px; transition:.15s; line-height:1; }
  .btn-primary { background:var(--signal); color:var(--ink); }
  .btn-primary:hover { filter:brightness(1.1); }
  .btn-ghost { color:var(--fg); border:1px solid var(--rule); }
  .btn-ghost:hover { border-color:var(--fg-3); }
  .hint { margin-top:16px; font-family:var(--mono); font-size:.72rem; color:var(--fg-3); letter-spacing:.02em; }

  /* --- SZEKCIÓK --- */
  section { padding:60px 0; }
  h2 { font-family:var(--display); text-transform:uppercase; font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800;
       letter-spacing:.015em; line-height:1; text-align:center; margin-bottom:12px; }
  .lead { text-align:center; color:var(--fg-2); max-width:640px; margin:0 auto 40px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
  .card { background:var(--panel); border:1px solid var(--rule); padding:26px; }
  .card .ic { width:42px; height:42px; background:rgba(255,176,32,.12); display:flex; align-items:center;
              justify-content:center; margin-bottom:16px; }
  .card .ic svg { width:22px; height:22px; stroke:var(--signal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .card h3 { font-family:var(--display); text-transform:uppercase; font-size:1.35rem; font-weight:700; line-height:1.05; margin-bottom:8px; }
  .card p { font-size:.94rem; color:var(--fg-2); }

  /* --- LÉPÉSEK: a sorszám bélyegzett négyzet, nem korong --- */
  .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; counter-reset:step; }
  .step { position:relative; background:var(--panel); border:1px solid var(--rule); padding:30px 24px 24px; }
  .step::before { counter-increment:step; content:counter(step); position:absolute; top:-1px; left:-1px;
                  width:30px; height:30px; background:var(--signal); color:var(--ink); font-family:var(--mono);
                  font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
  .step h3 { font-family:var(--display); text-transform:uppercase; font-size:1.25rem; font-weight:700; line-height:1.05; margin-bottom:6px; }
  .step p { font-size:.9rem; color:var(--fg-2); }

  .final { text-align:center; border-top:1px solid var(--rule); }
  footer { border-top:1px solid var(--rule); padding:26px 0; display:flex; justify-content:space-between;
           align-items:center; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:.72rem; color:var(--fg-3); }
  footer a { color:var(--fg-3); }
  footer a:hover { color:var(--signal); }

  /* --- ÁRAZÁS --- */
  .price { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch; }
  .tier { background:var(--panel); border:1px solid var(--rule); padding:26px; display:flex; flex-direction:column; }
  .tier.best { border:2px solid var(--signal); }
  .tier .tag { font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.08em;
               text-transform:uppercase; color:var(--fg-3); }
  .tier.best .tag { color:var(--signal); }
  .tier .amt { font-family:var(--display); font-size:3rem; font-weight:800; letter-spacing:.01em; line-height:1; margin:8px 0 4px; }
  .tier .per { font-family:var(--mono); font-size:.72rem; color:var(--fg-3); margin-bottom:18px; }
  .tier ul { list-style:none; font-size:.92rem; color:var(--fg-2); display:grid; gap:9px; flex:1; margin-bottom:20px; }
  /* Az --emerald KIZÁRÓLAG itt: a pipa "benne van" jelentése = teljesített ellenőrzés. */
  .tier li::before { content:"\2713"; color:var(--emerald); font-weight:700; margin-right:8px; }
  .tier .btn { justify-content:center; padding:12px 20px; font-size:1.15rem; }

  .band { background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--signal);
          padding:26px 28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .band h3 { font-family:var(--display); text-transform:uppercase; font-size:1.3rem; font-weight:700; line-height:1.05; margin-bottom:6px; }
  .band p { font-size:.9rem; color:var(--fg-2); max-width:560px; }
  .note { font-family:var(--mono); font-size:.72rem; color:var(--fg-3); text-align:center; margin-top:18px; }

  /* --- CÍMKÉK: bélyegzett négyzetek, nem pirulák --- */
  .chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .chip { font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.02em; color:var(--fg-2);
          background:var(--panel); border:1px solid var(--rule); padding:8px 13px; }
  .chip.star { border-color:var(--signal); color:var(--signal); background:rgba(255,176,32,.08); }

  /* --- GYIK. Sima <details>, hogy JS NÉLKÜL nyíljon: a kereső a csukott választ is
         olvassa, és a lap JavaScript nélkül is teljes értékű marad.
         A 44 px-es érintési célpont a summary paddingjéből jön ki (16+19+16). --- */
  .faq { max-width:820px; margin:0 auto; display:grid; gap:10px; }
  .faq details { background:var(--panel); border:1px solid var(--rule); }
  .faq summary { cursor:pointer; list-style:none; padding:16px 20px; font-family:var(--display);
                 text-transform:uppercase; font-size:1.2rem; font-weight:700; line-height:1.1;
                 display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; font-family:var(--mono); font-size:1.15rem; color:var(--signal); flex:0 0 auto; }
  .faq details[open] summary::after { content:"\2212"; }
  .faq details[open] summary { border-bottom:1px solid var(--rule); }
  .faq summary:hover { color:var(--signal); }
  .faq .a { padding:16px 20px; font-size:.94rem; color:var(--fg-2); }
  .faq .a p + p { margin-top:10px; }