/*
Theme Name: NM AI Tools
Theme URI: https://nm-ai-tools.local
Author: Sandra
Author URI: https://nm-ai-tools.local
Description: Minimali custom tema AI turinio strategijos įrankiams. Šviesus modernus dizainas su piltuvėlio metodika.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: nm-ai-tools
*/


  /* AI turinio strategas - landing (NM stilius 1.0). Tokenai = :root; komponentuose tik var(--nm-*). */
  :root{
    --nm-primary:#726aaf; --nm-primary-dark:#5a5399; --nm-primary-darker:#4055a4; --nm-primary-light:#7068bf;
    --nm-accent:#f06365; --nm-accent-hover:#f55052; --nm-accent-light:#f8a8a8; --nm-accent-soft:#fcd5d5;
    --nm-bg:#edecf0; --nm-bg-lavender:#e4e1ec; --nm-surface:#ffffff; --nm-surface-soft:#f5f4f8;
    --nm-text:#2c2d33; --nm-text-soft:#5a5b60; --nm-text-heading:#726aaf; --nm-text-muted:#b2b2b3; --nm-text-inverse:#ffffff;
    --nm-border:#dedfe0; --nm-border-soft:#edecf0;
    --nm-shadow-sm:0 2px 8px rgba(114,106,175,.08);
    --nm-shadow-md:0 8px 24px rgba(114,106,175,.12);
    --nm-shadow-lg:0 16px 48px rgba(114,106,175,.16);
    --nm-font-heading:"Oswald","Impact","Helvetica Neue",Arial,sans-serif;
    --nm-font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
    --nm-radius-sm:12px; --nm-radius-md:20px; --nm-radius-lg:24px; --nm-radius-xl:40px; --nm-radius-pill:50px;
    --nm-container:1200px;
    --nm-line:rgba(114,106,175,.16);
    --nm-glow:rgba(248,168,168,.30);
    --nm-footer-line:rgba(255,255,255,.22);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--nm-font-body);background:var(--nm-bg);color:var(--nm-text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-family:var(--nm-font-heading);font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--nm-text-heading);text-transform:none}
  a{color:inherit;text-decoration:none}
  em,.em{font-style:normal;color:var(--nm-accent)}
  :focus-visible{outline:2px solid var(--nm-primary);outline-offset:3px;border-radius:6px}

  .wrap{max-width:var(--nm-container);margin:0 auto;padding:0 24px}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--nm-font-heading);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nm-primary-dark)}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--nm-accent);border-radius:2px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--nm-font-heading);font-weight:600;font-size:.95rem;letter-spacing:.01em;padding:1rem 2.25rem;border-radius:var(--nm-radius-pill);border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
  .btn-primary{background:var(--nm-accent);color:var(--nm-text-inverse);box-shadow:var(--nm-shadow-md)}
  .btn-primary:hover{background:var(--nm-accent-hover);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--nm-primary);border-color:var(--nm-primary)}
  .btn-ghost:hover{background:var(--nm-primary);color:var(--nm-text-inverse)}

  /* NAV */
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(237,236,240,.86);border-bottom:1px solid transparent;transition:.3s}
  header.scrolled{border-color:var(--nm-line);box-shadow:var(--nm-shadow-sm)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center}
  .brand-logo{height:34px;width:auto;display:block}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a.txt{font-size:.94rem;font-weight:500;color:var(--nm-text)}
  .nav-links a.txt:hover{color:var(--nm-primary)}
  .nav-cta{padding:.625rem 1.5rem;font-size:.8125rem}

  /* HERO */
  .hero{position:relative;padding:72px 0 44px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(2.8rem,5.6vw,4rem);line-height:1.05}
  .hero .lead{font-size:1.125rem;color:var(--nm-text);margin:24px 0 32px;max-width:34ch}
  .hero .lead b{font-weight:600;color:var(--nm-primary-dark)}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .hero-cta .btn-primary{padding:1.125rem 2.75rem;font-size:1rem}
  .trust{margin-top:24px;font-size:.875rem;color:var(--nm-text-soft);display:flex;flex-wrap:wrap;gap:8px 18px}
  .trust span{display:inline-flex;align-items:center;gap:7px}
  .trust .chk{flex:none;width:18px;height:18px;border-radius:50%;background:var(--nm-accent);color:var(--nm-text-inverse);display:grid;place-items:center}
  .rating{display:flex;align-items:center;gap:12px;margin-top:26px}
  .stars{color:var(--nm-accent);letter-spacing:2px;font-size:1.05rem}
  .rating small{font-size:.875rem;color:var(--nm-text-soft)}

  /* HERO PHOTO */
  .hero-photo-wrap{position:relative}
  .hero-photo{width:100%;height:auto;display:block;border-radius:var(--nm-radius-lg);box-shadow:var(--nm-shadow-lg);border:1px solid var(--nm-border-soft)}
  .float{position:absolute;background:var(--nm-surface);color:var(--nm-primary);border-radius:var(--nm-radius-md);padding:14px 18px;box-shadow:var(--nm-shadow-md);font-family:var(--nm-font-heading);font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:10px}
  .float .ic{width:30px;height:30px;border-radius:10px;background:var(--nm-accent);color:var(--nm-text-inverse);display:grid;place-items:center;flex:none}
  .float.f2{bottom:20px;right:-22px}

  .strip{background:var(--nm-bg-lavender);padding:26px 0;margin-top:48px}
  .strip .wrap{display:flex;flex-wrap:wrap;gap:16px 44px;align-items:center;justify-content:center;font-size:.9375rem;color:var(--nm-text-soft)}
  .strip b{font-family:var(--nm-font-heading);font-weight:600;color:var(--nm-primary);letter-spacing:.01em}

  section[id]{scroll-margin-top:88px}
  section.block{padding:96px 0}
  .bg{background:var(--nm-bg)}
  .lavender{background:var(--nm-bg-lavender)}
  .surface{background:var(--nm-surface)}
  .section-head{max-width:660px;margin-bottom:56px}
  .section-head h2{font-size:clamp(2rem,3.6vw,2.75rem);margin:16px 0 14px}
  .section-head p{font-size:1.125rem;color:var(--nm-text-soft)}
  .center{text-align:center;margin-left:auto;margin-right:auto}
  .center .eyebrow{justify-content:center}

  /* PROBLEM */
  .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
  .pain-card{background:var(--nm-surface);border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-lg);padding:32px;box-shadow:var(--nm-shadow-sm)}
  .pain-card .q{font-family:var(--nm-font-heading);font-size:1.25rem;font-weight:700;color:var(--nm-text-heading);line-height:1.15;margin-bottom:10px}
  .pain-card p{color:var(--nm-text-soft);font-size:.9375rem}

  /* DIFFERENTIATOR */
  .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
  .vs-col{border-radius:var(--nm-radius-lg);padding:36px;position:relative}
  .vs-col.bad{background:var(--nm-surface-soft);border:1px solid var(--nm-border)}
  .vs-col.good{background:var(--nm-surface);border:2px solid var(--nm-accent);box-shadow:var(--nm-shadow-md)}
  .vs-col h3{font-size:1.35rem;margin-bottom:22px;display:flex;align-items:center;gap:12px}
  .vs-tag{font-family:var(--nm-font-heading);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--nm-radius-pill)}
  .vs-col.bad .vs-tag{background:var(--nm-border);color:var(--nm-text-soft)}
  .vs-col.good .vs-tag{background:var(--nm-accent-soft);color:var(--nm-primary-darker)}
  .vs-list{list-style:none;display:flex;flex-direction:column;gap:14px}
  .vs-list li{display:flex;gap:12px;font-size:1rem;align-items:flex-start;color:var(--nm-text)}
  .vs-list .ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;margin-top:4px;color:var(--nm-text-inverse)}
  .bad .ic{background:var(--nm-text-muted)}
  .good .ic{background:var(--nm-accent)}

  /* STEPS */
  .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
  .step{background:var(--nm-surface);border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-lg);padding:30px 26px;position:relative;box-shadow:var(--nm-shadow-sm)}
  .step .num{font-family:var(--nm-font-heading);font-size:2.5rem;font-weight:700;color:var(--nm-accent);line-height:1;margin-bottom:14px}
  .step h3{font-size:1.15rem;margin-bottom:8px;line-height:1.15}
  .step p{color:var(--nm-text-soft);font-size:.9375rem}

  /* DEMO */
  .demo-intro{max-width:760px;margin:0 auto 40px;text-align:center}
  .demo-intro h2{font-size:clamp(1.875rem,3.4vw,2.5rem);margin:16px 0 18px}
  .demo-intro p{font-size:1.0625rem;color:var(--nm-text-soft);margin-bottom:16px}
  .demo-generate{display:inline-flex;align-items:center;gap:10px;font-family:var(--nm-font-heading);font-weight:600;color:var(--nm-primary-dark);font-size:1rem}
  .demo-generate .arrow{color:var(--nm-accent);display:grid;place-items:center}
  .demo-card{max-width:720px;margin:0 auto;background:var(--nm-surface);border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-lg);box-shadow:var(--nm-shadow-lg);overflow:hidden}
  .demo-card-head{padding:28px 32px 22px;text-align:center;border-bottom:1px solid var(--nm-border-soft)}
  .demo-card-head h3{font-size:1.35rem}
  .demo-body{padding:24px 32px 30px}
  .demo-group{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--nm-surface-soft);border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-md);padding:16px 20px;margin:14px 0}
  .demo-group .g-left{display:flex;align-items:baseline;gap:10px}
  .demo-group b{font-family:var(--nm-font-heading);font-weight:600;color:var(--nm-text-heading);font-size:1.05rem;letter-spacing:.01em}
  .demo-group small{color:var(--nm-text-muted);font-size:.8125rem}
  .demo-group .chev{color:var(--nm-primary);flex:none}
  .demo-q{font-family:var(--nm-font-heading);font-weight:600;color:var(--nm-text-heading);font-size:1.0625rem;margin:22px 4px 14px}
  .opt{display:flex;align-items:center;gap:14px;padding:12px 4px;color:var(--nm-text);font-size:1rem}
  .radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--nm-border);display:grid;place-items:center}
  .radio.on{border-color:var(--nm-accent)}
  .radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--nm-accent)}
  .demo-foot{margin-top:26px;text-align:center}
  .demo-foot .btn{width:100%;max-width:280px}

  /* BENEFITS */
  .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
  .ben{padding:32px;border-radius:var(--nm-radius-lg);border:1px solid var(--nm-border-soft);background:var(--nm-surface);box-shadow:var(--nm-shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
  .ben:hover{transform:translateY(-4px);box-shadow:var(--nm-shadow-md)}
  .ben .ic{width:56px;height:56px;border-radius:var(--nm-radius-md);background:var(--nm-accent);color:var(--nm-text-inverse);display:grid;place-items:center;margin-bottom:20px}
  .ben h3{font-size:1.2rem;margin-bottom:8px;line-height:1.15}
  .ben p{color:var(--nm-text-soft);font-size:.9375rem}

  /* AUDIENCE */
  .aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;margin-top:8px}
  .aud-item{display:flex;gap:14px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--nm-border)}
  .aud-item .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--nm-accent);color:var(--nm-text-inverse);display:grid;place-items:center;font-size:.78rem;margin-top:2px}
  .aud-item b{font-family:var(--nm-font-heading);font-weight:600;color:var(--nm-text-heading);letter-spacing:.01em}
  .aud-item span{color:var(--nm-text-soft);font-size:.9375rem}

  /* CREATORS */
  .creators-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;max-width:820px}
  .creator{background:var(--nm-surface);border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-lg);box-shadow:var(--nm-shadow-sm);overflow:hidden;padding:18px}
  .creator img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:16px;display:block;background:var(--nm-surface-soft)}
  .creator .who{padding:18px 8px 8px}
  .creator .name{font-family:var(--nm-font-heading);font-weight:700;font-size:1.35rem;color:var(--nm-text-heading);line-height:1.1}
  .creator .role{color:var(--nm-text-soft);font-size:.9375rem;margin-top:4px}

  /* PRICING */
  .price-card{max-width:560px;margin:0 auto;background:var(--nm-surface);border-radius:var(--nm-radius-xl);box-shadow:var(--nm-shadow-lg);overflow:hidden;border:1px solid var(--nm-border-soft)}
  .price-top{background:var(--nm-bg-lavender);padding:38px 40px;position:relative;overflow:hidden}
  .price-top::after{content:"";position:absolute;top:-40%;right:-10%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--nm-glow),transparent 68%)}
  .price-badge{position:relative;font-family:var(--nm-font-heading);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nm-primary-dark)}
  .price-amt{position:relative;display:flex;align-items:baseline;gap:10px;margin-top:12px}
  .price-amt .num{font-family:var(--nm-font-heading);font-size:4rem;font-weight:700;line-height:1;color:var(--nm-text-heading)}
  .price-amt .per{color:var(--nm-text-soft);font-size:1rem}
  .price-sub{position:relative;color:var(--nm-text-soft);margin-top:10px;font-size:.9375rem}
  .price-body{padding:36px 40px}
  .price-body h3{font-size:1.125rem;margin-bottom:20px}
  .incl{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
  .incl li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--nm-text)}
  .incl .ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--nm-accent);color:var(--nm-text-inverse);display:grid;place-items:center;font-size:.72rem;margin-top:3px}
  .price-body .btn{width:100%}
  .price-note{text-align:center;color:var(--nm-text-soft);font-size:.875rem;margin-top:16px}

  /* FAQ */
  .faq-wrap{max-width:820px;margin:0 auto}
  details{border:1px solid var(--nm-border-soft);border-radius:var(--nm-radius-md);margin-bottom:12px;background:var(--nm-surface);overflow:hidden;transition:box-shadow .2s ease}
  details[open]{box-shadow:var(--nm-shadow-md);border-color:transparent}
  summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:var(--nm-font-heading);font-weight:600;font-size:1.0625rem;line-height:1.25;color:var(--nm-text-heading);display:flex;justify-content:space-between;align-items:center;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary .plus{flex:none;width:28px;height:28px;border-radius:50%;background:var(--nm-bg);color:var(--nm-accent);display:grid;place-items:center;transition:.25s;font-size:1.1rem;line-height:1}
  details[open] summary .plus{background:var(--nm-accent);color:var(--nm-text-inverse);transform:rotate(45deg)}
  details .ans{padding:0 26px 24px;color:var(--nm-text);font-size:1rem}

  /* FINAL CTA */
  .final{position:relative;overflow:hidden;text-align:center}
  .final::before{content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--nm-glow),transparent 62%)}
  .final .wrap{position:relative}
  .final h2{font-size:clamp(2.2rem,4.5vw,3.2rem);max-width:17ch;margin:14px auto 20px;line-height:1.05}
  .final p{color:var(--nm-text-soft);font-size:1.125rem;max-width:46ch;margin:0 auto 32px}
  .final .btn-primary{font-size:1rem;padding:1.125rem 2.75rem}

  /* FOOTER - realus nekenciumarketingo.lt footer (violetinis fonas, sąmoninga išimtis pagal pageidavimą) */
  footer{background:var(--nm-primary);color:var(--nm-text-inverse);padding:64px 0 32px}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .foot-logo{height:40px;width:auto;display:block;margin-bottom:22px}
  .foot-social{display:flex;gap:14px}
  .foot-social a{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--nm-footer-line);display:grid;place-items:center;color:var(--nm-text-inverse);transition:background .2s ease,border-color .2s ease}
  .foot-social a:hover{background:var(--nm-accent);border-color:var(--nm-accent)}
  .foot-col h4{font-family:var(--nm-font-heading);font-weight:600;font-size:1.35rem;color:var(--nm-text-inverse);margin-bottom:18px;letter-spacing:.01em}
  .foot-col a,.foot-col p{display:block;font-size:1rem;margin-bottom:12px;color:var(--nm-text-inverse);opacity:.92}
  .foot-col a:hover{opacity:1;color:var(--nm-accent-light)}
  .foot-bottom{border-top:1px solid var(--nm-footer-line);margin-top:48px;padding-top:22px;font-size:.8125rem;color:var(--nm-text-inverse);opacity:.75}

  .reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .hero{padding:40px 0 20px}
    .vs-grid{grid-template-columns:1fr}
    .steps-grid{grid-template-columns:1fr 1fr}
    .ben-grid{grid-template-columns:1fr}
    .pain-grid{grid-template-columns:1fr}
    .aud-grid{grid-template-columns:1fr;gap:0}
    .brand{display:none}
    .nav-links .nav-hide-mobile{display:none}
    .nav-links{width:100%;justify-content:space-between;gap:16px}
    .foot{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media(max-width:560px){
    .wrap{padding:0 18px}
    section.block{padding:64px 0}
    .section-head{margin-bottom:40px}
    .steps-grid{grid-template-columns:1fr}
    .creators-grid{grid-template-columns:1fr}
    .hero-cta{flex-direction:column;align-items:stretch}
    .hero-cta .btn{width:100%}
    .price-body,.price-top,.demo-body,.demo-card-head{padding-left:22px;padding-right:22px}
    .nav-cta{padding:.5rem 1.125rem;font-size:.78rem}
    .foot{grid-template-columns:1fr;gap:28px}
    .float.f2{right:0}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none!important;animation:none!important}
    .reveal{opacity:1;transform:none}
  }


/* ============================================
   CUSTOMIZATIONS
   ============================================ */

@media only screen and (max-width: 600px) {
	.hide-on-mobile {
	display: none!important;
}
	.hide-on-desktop {
		display:flex;
	}
}

@media only screen and (min-width: 601px) {
	.hide-on-mobile {
	display: flex;
}
	.hide-on-desktop {
		display: none!important;
	}
}

/* ============================================
   DESIGN SYSTEM — CSS Variables
   ============================================ */
:root {
  /* ─── Brand colors ─── */
  --nm-primary: #726aaf;
  --nm-primary-dark: #5a5399;
  --nm-primary-darker: #4055a4;
  --nm-primary-light: #7068bf;

  --nm-accent: #f06365;
  --nm-accent-hover: #f55052;
  --nm-accent-soft: #fcd5d5;

  /* ─── Backgrounds & surfaces ─── */
  --nm-bg: #edecf0;
  --nm-bg-lavender: #e4e1ec;
  --nm-surface: #ffffff;
  --nm-surface-soft: #f5f4f8;

  /* ─── Text ─── */
  --nm-text: #2c2d33;
  --nm-text-heading: #726aaf;
  --nm-text-muted: #b2b2b3;
  --nm-text-inverse: #ffffff;

  /* ─── Funnel stages ─── */
  --nm-tofu: #7068bf;
  --nm-mofu: #f8a8a8;
  --nm-bofu: #4055a4;

  /* ─── States ─── */
  --nm-success: #7ba88f;
  --nm-warning: #f8a8a8;
  --nm-error: #f06365;

  /* ─── Borders ─── */
  --nm-border: #dedfe0;
  --nm-border-soft: #edecf0;

  /* ─── Shadows ─── */
  --nm-shadow-sm: 0 2px 8px rgba(114, 106, 175, 0.08);
  --nm-shadow-md: 0 8px 24px rgba(114, 106, 175, 0.12);
  --nm-shadow-lg: 0 16px 48px rgba(114, 106, 175, 0.16);

  /* ─── Typography ─── */
  --nm-font-heading: "Oswald", "Impact", "Helvetica Neue", Arial, sans-serif;
  --nm-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --nm-text-xs: 0.75rem;
  --nm-text-sm: 0.875rem;
  --nm-text-base: 1rem;
  --nm-text-lg: 1.125rem;
  --nm-text-xl: 1.5rem;
  --nm-text-2xl: 2rem;
  --nm-text-3xl: 2.75rem;
  --nm-text-4xl: 4rem;
  --nm-text-5xl: 5.5rem;

  /* ─── Spacing ─── */
  --nm-space-1: 0.25rem;
  --nm-space-2: 0.5rem;
  --nm-space-3: 0.75rem;
  --nm-space-4: 1rem;
  --nm-space-6: 1.5rem;
  --nm-space-8: 2rem;
  --nm-space-12: 3rem;
  --nm-space-16: 4rem;
  --nm-space-20: 5rem;
  --nm-space-24: 6rem;

  /* ─── Border radius ─── */
  --nm-radius-sm: 12px;
  --nm-radius-md: 20px;
  --nm-radius-lg: 24px;
  --nm-radius-xl: 40px;
  --nm-radius-pill: 50px;

  /* ─── Layout ─── */
  --nm-container: 1200px;
  --nm-container-narrow: 860px;

  /* ─── Transitions ─── */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--nm-font-body);
  font-size: var(--nm-text-base);
  line-height: 1.6;
  color: var(--nm-text);
  background-color: var(--nm-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--nm-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--nm-primary-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nm-font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--nm-text-heading);
}

h1 {
  font-size: var(--nm-text-4xl);
}
h2 {
  font-size: var(--nm-text-3xl);
}
h3 {
  font-size: var(--nm-text-2xl);
}
h4 {
  font-size: var(--nm-text-xl);
}

p {
  margin-bottom: var(--nm-space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: var(--nm-container);
  margin: 0 auto;
  padding: 0 var(--nm-space-6);
}

.container--narrow {
  max-width: var(--nm-container-narrow);
}

.site-content {
  flex: 1;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  border-bottom: 1px solid var(--nm-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--nm-space-3);
  font-family: var(--nm-font-heading);
  font-weight: 700;
  font-size: var(--nm-text-xl);
  color: var(--nm-primary);
  text-decoration: none;
}

.site-logo:hover {
  color: var(--nm-primary-dark);
}

.site-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--nm-primary);
  border-radius: var(--nm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nm-text-inverse);
  font-size: var(--nm-text-lg);
}

/* Navigation */
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--nm-space-1);
}

.main-nav a {
  display: block;
  padding: 0.5rem var(--nm-space-4);
  color: var(--nm-primary);
  font-family: var(--nm-font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: all var(--transition-fast);
}

.main-nav a:hover {
  color: var(--nm-primary-dark);
}

.main-nav .current-menu-item a {
  color: var(--nm-accent-hover);
}

.main-nav .current-menu-item a:hover {
  color: var(--nm-accent-hover);
}

/* Header user actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--nm-space-3);
}

.mobile-auth {
  display: none;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--nm-space-2);
  cursor: pointer;
  color: var(--nm-primary);
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: all var(--transition-fast);
  border-radius: 2px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nm-space-2);
  padding: 1rem 2.25rem;
  font-family: var(--nm-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--nm-primary);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--nm-accent);
  color: var(--nm-text-inverse);
  border-color: var(--nm-accent);
}

.btn--primary:hover {
  background: var(--nm-accent-hover);
  border-color: var(--nm-accent-hover);
  color: var(--nm-text-inverse);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--nm-primary);
  border-color: var(--nm-primary);
}

.btn--secondary:hover {
  background: var(--nm-primary-dark);
  color: var(--nm-text-inverse);
}

.btn--ghost {
  background: transparent;
  color: var(--nm-primary);
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--nm-primary-dark);
  background: var(--nm-surface-soft);
}

.btn--text {
  background: none;
  border: none;
  color: var(--nm-primary);
  font-family: var(--nm-font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
}

.btn--text::after {
  content: " →";
}

.btn--text:hover {
  color: var(--nm-primary-dark);
}

.nm-coupon-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: transparent;
  color: var(--nm-primary);
  border: 2px solid var(--nm-primary);
  padding: var(--nm-space-2) var(--nm-space-4);
  border-radius: var(--nm-radius-pill);
  font-family: var(--nm-font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.nm-coupon-copy:hover {
  background: var(--nm-primary);
  color: var(--nm-text-inverse);
}

.nm-coupon-copy.is-copied {
  background: var(--nm-success);
  border-color: var(--nm-success);
  color: var(--nm-text-inverse);
  cursor: default;
}

.nm-coupon-copy strong {
  font-weight: 700;
}

.btn--sm {
  padding: 0.625rem 1.5rem;
  font-size: 0.8125rem;
}

.btn--lg {
  padding: 1.125rem 2.75rem;
  font-size: 1rem;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  padding: var(--nm-space-6);
  box-shadow: var(--nm-shadow-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--nm-primary-light);
  box-shadow: var(--nm-shadow-md);
}

.card__header {
  margin-bottom: var(--nm-space-3);
}

.card__title {
  font-family: var(--nm-font-heading);
  font-weight: 700;
  font-size: var(--nm-text-xl);
  color: var(--nm-primary);
  line-height: 1.2;
  margin-bottom: var(--nm-space-2);
}

.card__description {
  color: var(--nm-text);
  font-size: var(--nm-text-sm);
  line-height: 1.55;
}

.card__price {
  font-family: var(--nm-font-heading);
  font-weight: 700;
  color: var(--nm-primary);
  font-size: var(--nm-text-lg);
}

.card__cta {
  margin-top: var(--nm-space-4);
}

.card__cta .btn {
  width: 100%;
}

.card__badge {
  position: absolute;
  top: var(--nm-space-4);
  right: var(--nm-space-4);
  background: var(--nm-primary);
  color: var(--nm-text-inverse);
  font-family: var(--nm-font-heading);
  font-size: var(--nm-text-xs);
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: var(--nm-radius-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 1;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
  margin-bottom: var(--nm-space-6);
}

.form-label {
  display: block;
  font-size: var(--nm-text-sm);
  font-weight: 600;
  color: var(--nm-text);
  margin-bottom: var(--nm-space-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--nm-space-3) var(--nm-space-4);
  font-family: var(--nm-font-body);
  font-size: var(--nm-text-base);
  color: var(--nm-text);
  background: var(--nm-surface);
  border: 2px solid var(--nm-border);
  border-radius: var(--nm-radius-md);
  transition: all var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--nm-primary);
  box-shadow: 0 0 0 3px var(--nm-bg-lavender);
}

.form-input::placeholder {
  color: var(--nm-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  font-size: var(--nm-text-xs);
  color: var(--nm-text-muted);
  margin-top: var(--nm-space-1);
}

.form-error {
  font-size: var(--nm-text-xs);
  color: var(--nm-error);
  margin-top: var(--nm-space-1);
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--nm-space-1) var(--nm-space-3);
  font-size: var(--nm-text-xs);
  font-weight: 600;
  border-radius: var(--nm-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.badge--tofu {
  background: var(--nm-bg-lavender);
  border-color: var(--nm-tofu);
  color: var(--nm-tofu);
}

.badge--mofu {
  background: var(--nm-accent-soft);
  border-color: var(--nm-mofu);
  color: var(--nm-primary-darker);
}

.badge--bofu {
  background: var(--nm-bg-lavender);
  border-color: var(--nm-bofu);
  color: var(--nm-bofu);
}

.badge--active {
  background: var(--nm-surface-soft);
  border-color: var(--nm-success);
  color: var(--nm-success);
}

.badge--expired {
  background: var(--nm-surface-soft);
  border-color: var(--nm-error);
  color: var(--nm-error);
}

.badge--public {
  background: transparent;
  border-color: var(--nm-primary);
  color: var(--nm-primary);
}

.tool-comments {
  margin-top: var(--nm-space-12);
}

.tool-comments .comments-title {
  font-size: var(--nm-text-xl);
  margin-bottom: var(--nm-space-6);
}

.tool-comments .comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--nm-space-8);
}

.tool-comments .comment-list li {
  padding: var(--nm-space-4) 0;
  border-bottom: 1px solid var(--nm-border-soft);
}

.tool-comments .comment-form-comment textarea {
  width: 100%;
  padding: var(--nm-space-3) var(--nm-space-4);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-sm);
  font-family: var(--nm-font-body);
  font-size: var(--nm-text-base);
  resize: vertical;
}

/* ============================================
   FEATURE BLOCKS
   ============================================ */
.features-section {
  padding: var(--nm-space-16) 0;
  background: var(--nm-bg);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nm-space-10);
}
.feature {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--nm-space-6);
  align-items: start;
}

.feature__icon {
  width: 72px;
  height: 72px;
  background: var(--nm-accent);
  border-radius: var(--nm-radius-md);
  display: grid;
  place-items: center;
  color: var(--nm-text-inverse);
}

.feature__icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.5;
}

.feature__title {
  font-family: var(--nm-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--nm-primary);
  line-height: 1.2;
  margin-bottom: var(--nm-space-2);
}

.feature__desc {
  color: var(--nm-text);
  line-height: 1.6;
}

/* ============================================
   ALERTS & NOTICES
   ============================================ */
.alert {
  padding: var(--nm-space-4) var(--nm-space-6);
  border-radius: var(--nm-radius-md);
  font-size: var(--nm-text-sm);
  border: 1px solid;
  margin-bottom: var(--nm-space-6);
}

.alert--info {
  background: var(--nm-bg-lavender);
  border-color: var(--nm-primary-light);
  color: var(--nm-primary-dark);
}

.alert--success {
  background: var(--nm-surface-soft);
  border-color: var(--nm-success);
  color: var(--nm-success);
}

.alert--warning {
  background: var(--nm-accent-soft);
  border-color: var(--nm-warning);
  color: var(--nm-primary-dark);
}

.alert--error {
  background: var(--nm-surface-soft);
  border-color: var(--nm-error);
  color: var(--nm-error);
}

/* ============================================
   HERO SECTION (front-page)
   ============================================ */
.hero {
  background: var(--nm-bg);
  padding: 4rem 0 5rem;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nm-space-12);
  align-items: center;
}

.hero__title {
  font-family: var(--nm-font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  color: var(--nm-text-heading);
  margin-bottom: var(--nm-space-4);
}

.hero__subtitle {
  font-size: var(--nm-text-base);
  color: var(--nm-text-muted);
  margin-bottom: var(--nm-space-8);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: var(--nm-space-4);
  flex-wrap: wrap;
}

.hero__portrait {
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-blob {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  background: linear-gradient(
    135deg,
    var(--nm-accent) 0%,
    var(--nm-primary) 100%
  );
  border-radius: 48% 52% 45% 55% / 50% 45% 55% 50%;
  overflow: hidden;
  position: relative;
}

.portrait-blob__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   TOOLS GRID (front-page)
   ============================================ */
.tools-section {
  padding: var(--nm-space-20) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--nm-space-12);
}

.section-header h2 {
  margin-bottom: var(--nm-space-3);
}

.section-header p {
  color: var(--nm-text-muted);
  font-size: var(--nm-text-lg);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 320px);
  gap: var(--nm-space-8);
  justify-content: center;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tool-card__media {
  position: relative;
  margin-bottom: var(--nm-space-4);
}

.tool-card__image {
  position: relative;
}

.tool-card--locked .tool-card__image img,
.tool-card--locked .tool-card__placeholder {
  filter: grayscale(1);
  opacity: 0.75;
}

.tool-card__lock {
  position: absolute;
  top: var(--nm-space-3);
  left: var(--nm-space-3);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--nm-surface);
  color: var(--nm-primary);
  border-radius: 50%;
  box-shadow: var(--nm-shadow-sm);
}

.tool-card__lock svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

.tool-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--nm-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--nm-primary);
  background: var(--nm-surface-soft);
  border: 1px solid var(--nm-border-soft);
}

.tool-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nm-space-2);
  margin-top: auto;
  padding-top: var(--nm-space-4);
  border-top: 1px solid var(--nm-border-soft);
}

/* ============================================
   SINGLE TOOL PAGE
   ============================================ */
.tool-header {
  padding: var(--nm-space-12) 0;
  background: var(--nm-surface);
  border-bottom: 1px solid var(--nm-border);
}

.tool-header__breadcrumb {
  font-size: var(--nm-text-sm);
  color: var(--nm-text-muted);
  margin-bottom: var(--nm-space-4);
}

.tool-header__breadcrumb a {
  color: var(--nm-text-muted);
}

.tool-content {
  padding: var(--nm-space-12) 0;
}

.tool-form-section {
  max-width: var(--nm-container-narrow);
  margin: 0 auto;
}

/* Results area */
.tool-results {
  margin-top: var(--nm-space-12);
}

.tool-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--nm-space-8);
}

/* ============================================
   ACCOUNT PAGE
   ============================================ */
.account-layout {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-8);
  padding: var(--nm-space-8) 0 var(--nm-space-12);
}

.account-tabs {
  display: flex;
  justify-content: center;
}

.account-nav {
  list-style: none;
  display: flex;
  gap: var(--nm-space-3);
  margin: 0;
  padding: 0;
}

.account-nav li {
  margin: 0;
}

.account-nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--nm-space-3) var(--nm-space-6);
  border-radius: 999px;
  border: 1px solid var(--nm-primary);
  background: transparent;
  color: var(--nm-primary);
  font-size: var(--nm-text-base);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.account-nav a:hover {
  background: var(--nm-bg-lavender);
}

.account-nav .active a {
  background: var(--nm-accent);
  border-color: var(--nm-accent);
  color: var(--nm-text-inverse);
}

.account-nav .active a:hover {
  background: var(--nm-accent-hover);
  border-color: var(--nm-accent-hover);
  color: var(--nm-text-inverse);
}

.account-main {
  min-width: 0;
}

.account-section {
  margin-bottom: var(--nm-space-8);
}

.account-section__title {
  font-size: var(--nm-text-xl);
  margin-bottom: var(--nm-space-6);
}

.tools-grid--capped {
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  justify-content: start;
}

/* Access list */
.access-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nm-space-4) 0;
  border-bottom: 1px solid var(--nm-border-soft);
}

.access-item:last-child {
  border-bottom: none;
}

.access-item__info {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4);
}

.access-item__dates {
  font-size: var(--nm-text-sm);
  color: var(--nm-text-muted);
}

/* ============================================
   AUTH PAGES (login/register)
   ============================================ */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 72px - 200px);
  padding: var(--nm-space-12) 0;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-xl);
  padding: var(--nm-space-8);
  box-shadow: var(--nm-shadow-lg);
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--nm-space-8);
}

.auth-card__header h1 {
  font-size: var(--nm-text-2xl);
  margin-bottom: var(--nm-space-2);
}

.auth-card__header p {
  color: var(--nm-text-muted);
  font-size: var(--nm-text-sm);
}

.auth-card__footer {
  text-align: center;
  margin-top: var(--nm-space-6);
  padding-top: var(--nm-space-6);
  border-top: 1px solid var(--nm-border-soft);
  font-size: var(--nm-text-sm);
  color: var(--nm-text-muted);
}

.auth-card__footer a {
  font-weight: 600;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4);
  margin: var(--nm-space-6) 0;
  font-size: var(--nm-text-sm);
  color: var(--nm-text-muted);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nm-border);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--nm-surface);
  border-top: 1px solid var(--nm-border);
  padding: var(--nm-space-8) 0;
  margin-top: auto;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--nm-text-sm);
  color: var(--nm-text-muted);
}

.footer-links {
  display: flex;
  gap: var(--nm-space-6);
  list-style: none;
}

.footer-links a {
  color: var(--nm-text-muted);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--nm-primary);
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--nm-border);
  border-top-color: var(--nm-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--nm-border-soft) 25%,
    var(--nm-border) 50%,
    var(--nm-border-soft) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--nm-radius-sm);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.text-primary {
  color: var(--nm-primary);
}
.text-secondary {
  color: var(--nm-text-muted);
}
.text-muted {
  color: var(--nm-text-muted);
}
.text-success {
  color: var(--nm-success);
}
.text-error {
  color: var(--nm-error);
}
.text-warning {
  color: var(--nm-accent-hover);
}

.mt-4 {
  margin-top: var(--nm-space-4);
}
.mt-8 {
  margin-top: var(--nm-space-8);
}
.mb-4 {
  margin-bottom: var(--nm-space-4);
}
.mb-8 {
  margin-bottom: var(--nm-space-8);
}

.hidden {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .account-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .account-nav li {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --nm-text-4xl: 1.875rem;
    --nm-text-3xl: 1.5rem;
  }

  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 60px;
  }

  .menu-toggle {
    display: block;
    grid-column: 3 / 4;
    grid-row: 1;
    justify-self: end;
  }

  .site-logo {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: center;
  }

  .header-actions {
    display: none;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nm-surface);
    border-bottom: 1px solid var(--nm-border);
    padding: var(--nm-space-4);
    box-shadow: var(--nm-shadow-lg);
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
  }

  .main-nav a {
    padding: var(--nm-space-3) var(--nm-space-4);
  }

  .mobile-auth {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-2);
    margin-top: var(--nm-space-4);
    padding-top: var(--nm-space-4);
    border-top: 1px solid var(--nm-border-soft);
  }

  .mobile-auth .btn {
    width: 100%;
  }

  .hero {
    padding: var(--nm-space-12) 0;
  }

  .hero .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "portrait"
      "subtitle"
      "actions";
  }

  .hero__content {
    display: contents;
  }

  .hero__title {
    grid-area: title;
  }
  .hero__subtitle {
    grid-area: subtitle;
  }
  .hero__actions {
    grid-area: actions;
  }
  .hero__portrait {
    grid-area: portrait;
  }

  .hero__portrait .portrait-blob {
    max-width: 280px;
    margin: 0 auto;
  }

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

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--nm-space-8);
  }

  .feature {
    grid-template-columns: 64px 1fr;
    gap: var(--nm-space-4);
  }

  .feature__icon {
    width: 64px;
    height: 64px;
  }

  .footer-content {
    flex-direction: column;
    gap: var(--nm-space-4);
    text-align: center;
  }

  .auth-card {
    padding: var(--nm-space-6);
    border-radius: var(--nm-radius-lg);
  }
}