/* global React */
// Variant 1: PREMIUM EDITORIAL
// Magazine-style, sober, Fraunces-heavy. Paper-inspired but with
// a wider type/whitespace presence. Aimed at the "premium" feel.

const PremiumSite = ({ lang = 'FR' }) => {
  const t = STRINGS[lang];

  return (
    <div className="premium-site">
      <style>{premiumCss}</style>

      {/* TOP BAR */}
      <header className="pr-header">
        <div className="pr-wordmark">Smarter Life Apps</div>
        <nav className="pr-nav">
          <a href="#vibelist">Vibelist</a>
          <a href="#features">{t.navFeatures}</a>
          <a href="#pricing">{t.navPricing}</a>
          <a href="#contact">{t.navContact}</a>
        </nav>
      </header>

      {/* HERO */}
      <section className="pr-hero">
        <div className="pr-hero-brand">
          <img className="pr-hero-icon" src="assets/app-icon.jpeg" alt="" />
          Vibelist
        </div>
        <div className="pr-hero-eyebrow">
          <span className="pr-dot" />
          {t.heroEyebrow}
        </div>

        <h1 className="pr-hero-title">
          {t.heroTitleA}<br />
          <em>{t.heroTitleB}</em>
        </h1>

        <p className="pr-hero-sub">{t.heroSub}</p>

        <div className="pr-hero-cta">
          <button className="pr-btn pr-btn-dark">
            <AppleGlyph /> {t.btnSoon}
          </button>
          <a href="#vibelist" className="pr-btn pr-btn-ghost">
            {t.btnDiscover} →
          </a>
        </div>

        <div className="pr-hero-art">
          <div className="pr-hero-phone-wrap">
            <div className="phone-frame">
              <img className="phone-screen" src="assets/screen-list-hero.png" alt="Vibelist liste" />
            </div>
            <div className="pr-hero-phone-bg phone-frame">
              <img className="phone-screen" src="assets/screen-categories-hero.png" alt="" />
            </div>
          </div>
        </div>
      </section>

      {/* RULE */}
      <hr className="pr-rule" />

      {/* VIBELIST INTRO */}
      <section id="vibelist" className="pr-section pr-intro">
        <div className="pr-section-num">01</div>
        <div className="pr-section-body">
          <div className="pr-section-eyebrow">{t.introEyebrow}</div>
          <h2 className="pr-h2">
            {t.introTitleA}<br />
            <em>{t.introTitleB}</em>
          </h2>
          <p className="pr-lead">{t.introLead}</p>
        </div>
      </section>

      {/* FEATURES — editorial three-col */}
      <section id="features" className="pr-section pr-features">
        <div className="pr-section-num">02</div>
        <div className="pr-section-body">
          <div className="pr-section-eyebrow">{t.featuresEyebrow}</div>
          <h2 className="pr-h2">{t.featuresTitle}</h2>

          <div className="pr-feature-grid">
            {t.features.map((f, i) => (
              <article className="pr-feature" key={i}>
                <div className="pr-feature-num">{String(i + 1).padStart(2, '0')}</div>
                <h3 className="pr-feature-title">{f.title}</h3>
                <p className="pr-feature-text">{f.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* DEMO STRIP — quote + screenshot */}
      <section className="pr-demo">
        <div className="pr-demo-text">
          <div className="pr-section-eyebrow pr-light">{t.demoEyebrow}</div>
          <p className="pr-demo-quote">
            <span className="pr-quote-mark">“</span>
            {t.demoQuote}
          </p>
          <div className="pr-demo-meta">{t.demoMeta}</div>
        </div>
        <div className="pr-demo-art">
          <div className="phone-frame pr-demo-phone">
            <img className="phone-screen" src="assets/screen-recording.png" alt="" />
          </div>
          <div className="phone-frame pr-demo-phone pr-demo-phone-2">
            <img className="phone-screen" src="assets/screen-preview.png" alt="" />
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="pr-section pr-gallery">
        <div className="pr-section-num">03</div>
        <div className="pr-section-body">
          <div className="pr-section-eyebrow">{t.galleryEyebrow}</div>
          <h2 className="pr-h2">{t.galleryTitle}</h2>

          <div className="pr-gallery-grid">
            {[
              ['assets/screen-recording.png', t.gal0],
              ['assets/screen-preview.png', t.gal1],
              ['assets/screen-list.png', t.gal2],
              ['assets/screen-categories.png', t.gal3],
              ['assets/screen-recettes.png', t.gal4],
            ].map(([src, cap], i) => (
              <figure className="pr-gallery-item" key={i}>
                <div className="phone-frame phone-sm">
                  <img className="phone-screen" src={src} alt={cap} />
                </div>
                <figcaption>
                  <span className="pr-cap-num">{String(i + 1).padStart(2, '0')}</span>
                  {cap}
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* MORE FEATURES */}
      <section className="pr-section pr-more">
        <div className="pr-section-num">04</div>
        <div className="pr-section-body">
          <div className="pr-section-eyebrow">{t.moreEyebrow}</div>
          <h2 className="pr-h2">{t.moreTitle}</h2>
          <div className="pr-more-grid">
            {t.moreFeatures.map((f, i) => (
              <div className="pr-more-card" key={i}>
                <div className="pr-more-num">{String(i + 1).padStart(2, '0')}</div>
                <h3 className="pr-more-title">{f.title}</h3>
                <p className="pr-more-text">{f.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="pr-section pr-pricing">
        <div className="pr-section-num">05</div>
        <div className="pr-section-body">
          <div className="pr-section-eyebrow">{t.pricingEyebrow}</div>
          <h2 className="pr-h2">{t.pricingTitle}</h2>
          <p className="pr-lead" style={{marginBottom: 32}}>{t.pricingLead}</p>

          <div className="pr-pricing-grid">
            <div className="pr-plan">
              <div className="pr-plan-name">{t.planFree}</div>
              <div className="pr-plan-price">0€</div>
              <div className="pr-plan-note">&nbsp;</div>
              <ul className="pr-plan-feats">
                {t.freeFeats.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              <button className="pr-btn pr-btn-ghost">{t.btnSoon}</button>
            </div>
            <div className="pr-plan pr-plan-pro">
              <div className="pr-plan-tag">Premium</div>
              <div className="pr-plan-name">{t.planPro}</div>
              <div className="pr-plan-prices">
                <div className="pr-plan-price">{t.priceMonth}<span>/{t.month}</span></div>
                <div className="pr-plan-or">{t.year === 'year' ? 'or' : 'ou'}</div>
                <div className="pr-plan-price pr-plan-price-alt">{t.priceYear}<span>/{t.year}</span></div>
              </div>
              <div className="pr-plan-note">{t.priceYearNote}</div>
              <ul className="pr-plan-feats">
                {t.proFeats.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
              <button className="pr-btn pr-btn-dark">{t.btnSoon}</button>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" className="pr-contact">
        <h2 className="pr-h2 pr-h2-light">{t.contactTitle}</h2>
        <p className="pr-contact-sub">{t.contactSub}</p>
        <a className="pr-contact-mail" href="mailto:contact@smarterlifeapps.com">
          contact@smarterlifeapps.com
        </a>
      </section>

      {/* FOOTER */}
      <footer className="pr-footer">
        <div className="pr-footer-brand">
          <div className="pr-footer-word">Smarter Life Apps</div>
          <div className="pr-footer-form">SASU · {t.footerForm}</div>
        </div>
        <div className="pr-footer-cols">
          <div>
            <div className="pr-footer-h">{t.footerProducts}</div>
            <a href="#vibelist">Vibelist</a>
          </div>
          <div>
            <div className="pr-footer-h">{t.footerSupport}</div>
            <a href="mailto:contact@smarterlifeapps.com">Contact</a>
            <a href="mentions-legales.html">{t.footerPrivacy}</a>
            <a href="mentions-legales.html">{t.footerTerms}</a>
          </div>
          <div>
            <div className="pr-footer-h">{t.footerLegal}</div>
            <a href="mentions-legales.html">{lang === 'FR' ? 'Mentions légales' : 'Legal notice'}</a>
            <div className="pr-footer-mute">© 2026 Smarter Life Apps</div>
          </div>
        </div>
      </footer>
    </div>
  );
};

const AppleGlyph = () => (
  <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" aria-hidden>
    <path d="M11.18 8.5c-.02-2.1 1.71-3.1 1.79-3.15-.98-1.43-2.5-1.62-3.04-1.65-1.29-.13-2.52.76-3.18.76-.66 0-1.67-.74-2.75-.72-1.41.02-2.72.82-3.45 2.09-1.47 2.55-.38 6.32 1.06 8.39.7 1.02 1.54 2.16 2.62 2.12 1.05-.04 1.45-.68 2.72-.68 1.27 0 1.62.68 2.74.66 1.13-.02 1.84-1.03 2.53-2.06.8-1.18 1.13-2.32 1.15-2.38-.03-.01-2.2-.84-2.22-3.34zM9.07 2.4c.58-.7.97-1.67.86-2.65-.83.03-1.83.55-2.43 1.25-.54.62-1.01 1.61-.88 2.57.93.07 1.87-.47 2.45-1.17z"/>
  </svg>
);

const STRINGS = {
  FR: {
    navFeatures: 'Fonctionnalités',
    navPricing: 'Tarifs',
    navContact: 'Contact',
    heroEyebrow: 'Bientôt sur l\'App Store',
    heroTitleA: 'La liste de courses',
    heroTitleB: 'qui comprend ce que vous dites.',
    heroSub: 'Parlez. Photographiez. Collez un lien. Ajoutez depuis une recette. Vibelist transforme tout en une liste claire — sans jamais avoir à écrire.',
    btnSoon: 'Bientôt disponible',
    btnDiscover: 'Découvrir Vibelist',
    introEyebrow: 'Vibelist',
    introTitleA: 'Faire ses courses',
    introTitleB: 'sans rien écrire.',
    introLead: 'Vibelist est une liste de courses pensée pour la voix. Vous dictez, l\'application comprend, structure, et range. Vous validez d\'un geste. Le reste — quantités, doublons, catégories — se fait tout seul.',
    featuresEyebrow: 'Fonctionnalités',
    featuresTitle: 'Quatre façons d\'ajouter, une seule liste.',
    features: [
      { title: 'À la voix', text: 'Dictez librement, en phrases longues. Vibelist sépare les ingrédients, déduit les quantités et propose une mise en forme avant de l\'ajouter.' },
      { title: 'Par photo', text: 'Photographiez une recette, un menu, une étiquette. Le texte est extrait et transformé en items vérifiables.' },
      { title: 'Depuis un lien', text: 'Collez l\'URL d\'une recette web. Les ingrédients sont extraits automatiquement, prêts à être ajoutés.' },
      { title: 'Depuis vos recettes', text: 'Vos recettes enregistrées sont à portée de main. Un appui — la liste se remplit, classée par recette ou par rayon.' },
    ],
    demoEyebrow: 'En pratique',
    demoQuote: 'Pour ma recette de lasagnes végétarienne j\'ai besoin d\'un paquet de feuilles de lasagnes, 300 g d\'épinards, 200 g de champignons et 250 g de ricotta.',
    demoMeta: '— ce que vous dites · ce que Vibelist comprend',
    galleryEyebrow: 'Galerie',
    galleryTitle: 'L\'application en cinq écrans.',
    gal0: 'Enregistrement vocal en cours',
    gal1: 'Aperçu des suggestions à valider',
    gal2: 'Liste classée par recette',
    gal3: 'Liste classée par rayon',
    gal4: 'Bibliothèque de recettes',
    pricingEyebrow: 'Tarifs',
    pricingTitle: 'Gratuit pour commencer.',
    pricingLead: 'Vibelist est gratuit. Premium retire les publicités et multiplie par 5 vos quotas d\'utilisation IA.',
    planFree: 'Gratuit',
    planPro: 'Premium',
    month: 'mois',
    year: 'an',
    priceMonth: '1,49€',
    priceYear: '12€',
    priceYearNote: 'soit 1€/mois — économisez 33 %',
    freeFeats: ['Listes illimitées', 'Saisie vocale & manuelle', 'Catégorisation automatique', 'Export & partage de liste', 'Quota IA standard', 'Avec publicités'],
    proFeats: ['Tout du plan Gratuit', 'Sans aucune publicité', 'Quotas IA × 5 (voix, photo, lien)', 'Synchronisation multi-appareil', 'Bibliothèque de recettes étendue', 'Cartes de fidélité enregistrées'],
    moreEyebrow: 'Et aussi',
    moreTitle: 'Conçu pour le quotidien.',
    moreFeatures: [
      { title: 'Partage de liste', text: 'Partagez une liste avec votre famille ou colocataires. Les items cochés se synchronisent en direct, sur tous les appareils.' },
      { title: 'Vos recettes', text: 'Enregistrez vos recettes préférées et retrouvez-les en un geste. Ouvrez la page d\'origine directement dans le navigateur intégré, sans quitter l\'app.' },
      { title: 'Cartes de fidélité', text: 'Enregistrez vos cartes Carrefour, Monoprix, Leclerc et compagnie. Sortez la bonne carte sans fouiller votre portefeuille.' },
      { title: 'Tri par rayon', text: 'Vibelist range automatiquement vos items par rayon de magasin — fruits & légumes, frais, épicerie. Les courses vont plus vite.' },
      { title: 'Quatre thèmes' , text: 'Minuit, Ardoise, Papier, Clarté. Cinq ambiances visuelles pour adapter l\'app à votre humeur.' },
    ],
    contactTitle: 'Une question ?',
    contactSub: 'Pour le support, la presse ou un partenariat — un seul email.',
    footerForm: 'Société par actions simplifiée unipersonnelle',
    footerProducts: 'Produits',
    footerSupport: 'Support',
    footerLegal: 'Légal',
    footerPrivacy: 'Confidentialité',
    footerTerms: 'Conditions',
  },
  EN: {
    navFeatures: 'Features',
    navPricing: 'Pricing',
    navContact: 'Contact',
    heroEyebrow: 'Coming soon on the App Store',
    heroTitleA: 'The shopping list',
    heroTitleB: 'that understands what you say.',
    heroSub: 'Speak. Photograph. Paste a link. Add from a recipe. Vibelist turns it all into a clear list — without ever typing.',
    btnSoon: 'Coming soon',
    btnDiscover: 'Discover Vibelist',
    introEyebrow: 'Vibelist',
    introTitleA: 'Shopping lists',
    introTitleB: 'without writing.',
    introLead: 'Vibelist is a shopping list built for the voice. You speak, the app understands, structures and sorts. You confirm with a tap. Quantities, duplicates, aisles — handled.',
    featuresEyebrow: 'Features',
    featuresTitle: 'Four ways to add, one list.',
    features: [
      { title: 'By voice', text: 'Talk freely, in full sentences. Vibelist separates ingredients, infers quantities and proposes the entries before adding them.' },
      { title: 'By photo', text: 'Snap a recipe, a menu, a label. Text is extracted and turned into reviewable items.' },
      { title: 'From a link', text: 'Paste a recipe URL. Ingredients are pulled automatically, ready to add.' },
      { title: 'From your recipes', text: 'Your saved recipes are one tap away. The list fills in, grouped by recipe or by aisle.' },
    ],
    demoEyebrow: 'In practice',
    demoQuote: 'For my vegetarian lasagna I need a pack of lasagna sheets, 300 g of spinach, 200 g of mushrooms and 250 g of ricotta.',
    demoMeta: '— what you say · what Vibelist understands',
    galleryEyebrow: 'Gallery',
    galleryTitle: 'The app in five screens.',
    gal0: 'Voice recording in progress',
    gal1: 'Suggestion preview',
    gal2: 'List grouped by recipe',
    gal3: 'List grouped by aisle',
    gal4: 'Recipes library',
    pricingEyebrow: 'Pricing',
    pricingTitle: 'Free to start.',
    pricingLead: 'Vibelist is free. Premium removes ads and multiplies your AI usage quotas by 5.',
    planFree: 'Free',
    planPro: 'Premium',
    month: 'month',
    year: 'year',
    priceMonth: '€1.49',
    priceYear: '€12',
    priceYearNote: '€1/month — save 33%',
    freeFeats: ['Unlimited lists', 'Voice & manual input', 'Automatic categorisation', 'Export & share lists', 'Standard AI quota', 'With ads'],
    proFeats: ['Everything in Free', 'No ads at all', 'AI quotas × 5 (voice, photo, link)', 'Multi-device sync', 'Extended recipes library', 'Saved loyalty cards'],
    moreEyebrow: 'And also',
    moreTitle: 'Built for everyday life.',
    moreFeatures: [
      { title: 'Shared lists', text: 'Share a list with family or flatmates. Checked items sync live across every device.' },
      { title: 'Your recipes', text: 'Save your favourite recipes and open them in one tap. The original web page loads in the built-in browser — no need to leave the app.' },
      { title: 'Loyalty cards', text: 'Store your supermarket cards in the app. The right card is one tap away — no more wallet digging.' },
      { title: 'Aisle sorting', text: 'Vibelist groups your items by aisle automatically — produce, fresh, dry goods. Shopping goes faster.' },
      { title: 'Five themes', text: 'Midnight, Deep Blue, Slate, Paper, Clarity. Five visual moods to match yours.' },
    ],
    contactTitle: 'A question?',
    contactSub: 'Support, press or partnerships — a single email.',
    footerForm: 'Single-shareholder simplified joint-stock company',
    footerProducts: 'Products',
    footerSupport: 'Support',
    footerLegal: 'Legal',
    footerPrivacy: 'Privacy',
    footerTerms: 'Terms',
  },
};

const premiumCss = `
.premium-site {
  --bg:        #F4F3F0;
  --bg-soft:   #FFFFFF;
  --bg-deep:   #0E1A12;
  --ink:       #14201A;
  --ink-soft:  #3A4A3F;
  --ink-mute:  #7A8A80;
  --rule:      rgba(20, 32, 26, 0.14);
  --accent:    #1F7E37;
  --accent-bright: #28AF4B;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  min-height: 100%;
  padding-bottom: 0;
}
.premium-site em { font-style: italic; }

/* HEADER */
.pr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 140px 28px 56px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: rgba(244, 243, 240, 0.88);
  backdrop-filter: blur(12px);
}
.pr-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.01em;
}
.pr-nav { display: flex; gap: 36px; align-items: center; font-size: 14px; }
.pr-nav a { color: var(--ink); opacity: 0.78; transition: opacity .2s; }
.pr-nav a:hover { opacity: 1; }
.pr-lang { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-mute); }
.pr-lang em { color: var(--ink); font-style: normal; font-weight: 600; }

/* HERO */
.pr-hero {
  padding: 80px 56px 60px;
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto auto auto auto auto;
  column-gap: 80px;
  row-gap: 22px;
  min-height: 760px;
}
.pr-hero-brand {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(64px, 8.8vw, 104px);
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 20px;
}
.pr-hero-icon {
  width: 1em; height: 1em;
  max-width: 88px; max-height: 88px;
  border-radius: 22%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.pr-hero-eyebrow {
  grid-column: 1; grid-row: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pr-hero-title {
  grid-column: 1; grid-row: 3;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "WONK" 0;
}
.pr-hero-title em { color: var(--ink-soft); font-weight: 400; }
.pr-hero-sub {
  grid-column: 1; grid-row: 4;
  max-width: 520px;
  font-size: 17px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.pr-hero-cta {
  grid-column: 1; grid-row: 5;
  display: flex; gap: 14px; align-items: center; margin-top: 12px;
}
.pr-hero-art {
  grid-column: 2; grid-row: 1 / span 5;
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.pr-hero-phone-wrap {
  position: relative;
  width: 320px;
  margin-right: 40px;
}
.pr-hero-phone-bg {
  position: absolute !important;
  top: 64px; left: -120px;
  width: 260px;
  opacity: 0.55;
  transform: rotate(-6deg);
  z-index: 0;
  filter: saturate(0.85);
}
.pr-hero-phone-wrap > .phone-frame:first-child {
  position: relative; z-index: 1;
  transform: rotate(2deg);
}

/* BUTTONS */
.pr-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: transform .15s, background .2s, color .2s;
  white-space: nowrap;
}
.pr-btn:hover { transform: translateY(-1px); }
.pr-btn-dark { background: var(--bg-deep); color: #F4F3F0; }
.pr-btn-dark:hover { background: #000; }
.pr-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.pr-btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* RULE */
.pr-rule { border: 0; border-top: 1px solid var(--rule); margin: 0 56px; }

/* SECTIONS */
.pr-section {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 110px 56px;
  gap: 40px;
  border-bottom: 1px solid var(--rule);
}
.pr-section-num {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.pr-section-eyebrow {
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 22px;
  font-weight: 500;
}
.pr-section-eyebrow.pr-light { color: rgba(244, 243, 240, 0.65); }
.pr-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 18ch;
}
.pr-h2 em { color: var(--ink-soft); font-weight: 400; }
.pr-h2-light { color: #F4F3F0; }
.pr-lead {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-soft); max-width: 64ch;
  margin: 0;
}

/* FEATURES */
.pr-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
  margin-top: 44px;
}
.pr-feature { border-top: 1px solid var(--rule); padding-top: 24px; }
.pr-feature-num {
  font-family: var(--font-display);
  font-size: 13px; color: var(--accent); font-weight: 600;
  margin-bottom: 12px; letter-spacing: 0.06em;
}
.pr-feature-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.pr-feature-text {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft); margin: 0;
}

/* DEMO STRIP */
.pr-demo {
  background: var(--bg-deep);
  color: #F4F3F0;
  padding: 100px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.pr-demo-quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.25;
  color: #F4F3F0;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pr-quote-mark {
  display: inline-block;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.2em;
  color: var(--accent);
  margin-right: 6px;
}
.pr-demo-meta {
  margin-top: 28px;
  font-size: 13px; color: rgba(244,243,240,0.55);
  letter-spacing: 0.04em;
}
.pr-demo-art {
  position: relative; height: 540px;
  display: flex; justify-content: center;
}
.pr-demo-phone {
  position: absolute;
  width: 290px;
}
.pr-demo-phone:first-child {
  left: 8%; top: 0; transform: rotate(-4deg);
  z-index: 1;
}
.pr-demo-phone-2 {
  right: 8%; top: 40px; transform: rotate(5deg);
  z-index: 2;
}

/* GALLERY */
.pr-gallery-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 28px; margin-top: 44px;
}
.pr-gallery-item { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pr-gallery-item .phone-frame { width: 100%; }
.pr-gallery-item figcaption {
  font-size: 14px; color: var(--ink-soft);
  display: flex; gap: 8px;
  line-height: 1.4;
}
.pr-cap-num {
  font-family: var(--font-display);
  font-weight: 600; color: var(--accent);
}

/* PRICING */
.pr-pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 44px;
}
.pr-plan {
  background: var(--bg-soft);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--rule);
  position: relative;
}
.pr-plan-prices { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.pr-plan-or { font-size: 14px; color: var(--ink-mute); font-style: italic; }
.pr-plan-pro .pr-plan-or { color: rgba(244,243,240,0.5); }
.pr-plan-price-alt { font-size: 36px !important; opacity: 0.78; }
.pr-plan-note { font-size: 13px; color: var(--ink-mute); margin-top: -4px; min-height: 1em; }
.pr-plan-pro .pr-plan-note { color: rgba(244,243,240,0.55); }

/* MORE features */
.pr-more-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 44px;
}
.pr-more-card { border-top: 1px solid var(--rule); padding-top: 22px; }
.pr-more-num {
  font-family: var(--font-display);
  font-size: 13px; color: var(--accent); font-weight: 600;
  margin-bottom: 10px; letter-spacing: 0.06em;
}
.pr-more-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.pr-more-text { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.pr-plan-pro { background: var(--bg-deep); color: #F4F3F0; border-color: var(--bg-deep); }
.pr-plan-pro .pr-plan-feats li { color: rgba(244,243,240,0.78); }
.pr-plan-pro .pr-plan-feats li::before { background: var(--accent-bright); }
.pr-plan-pro .pr-btn-dark { background: var(--accent-bright); color: #fff; }
.pr-plan-name { font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.pr-plan-price {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1;
}
.pr-plan-price span { font-size: 16px; color: var(--ink-mute); margin-left: 4px; font-weight: 400; }
.pr-plan-pro .pr-plan-price span { color: rgba(244,243,240,0.55); }
.pr-plan-feats { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.pr-plan-feats li {
  font-size: 14px; color: var(--ink-soft);
  padding-left: 22px; position: relative; line-height: 1.5;
}
.pr-plan-feats li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 1px; background: var(--ink-soft);
}
.pr-plan-tag {
  position: absolute; top: 28px; right: 32px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}

/* CONTACT */
.pr-contact {
  background: var(--bg-deep);
  color: #F4F3F0;
  text-align: center;
  padding: 110px 56px;
  border-bottom: 1px solid rgba(244,243,240,0.1);
}
.pr-contact .pr-h2 { margin: 0 auto 16px; }
.pr-contact-sub {
  color: rgba(244,243,240,0.65);
  max-width: 50ch; margin: 0 auto 36px;
  font-size: 16px; line-height: 1.5;
}
.pr-contact-mail {
  font-family: var(--font-display);
  font-size: 36px;
  color: #F4F3F0;
  border-bottom: 1px solid rgba(244,243,240,0.4);
  padding-bottom: 6px;
  display: inline-block;
  transition: color .2s, border-color .2s;
}
.pr-contact-mail:hover { color: var(--accent); border-color: var(--accent); }

/* FOOTER */
.pr-footer {
  background: var(--bg-deep);
  color: rgba(244,243,240,0.7);
  padding: 60px 56px 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  font-size: 13px;
}
.pr-footer-word {
  font-family: var(--font-display);
  font-size: 22px;
  color: #F4F3F0;
  font-weight: 600;
  margin-bottom: 6px;
}
.pr-footer-form { color: rgba(244,243,240,0.5); }
.pr-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pr-footer-cols a, .pr-footer-mute { display: block; padding: 4px 0; color: rgba(244,243,240,0.7); }
.pr-footer-cols a:hover { color: #F4F3F0; }
.pr-footer-h {
  font-family: var(--font-display);
  font-size: 13px; color: #F4F3F0;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
`;

window.PremiumSite = PremiumSite;