/* ==========================================================================
   Froko design language, "Csempe" (2026-11-04)
   A dark, warm, bento-built page. ONE accent, the brand yellow; its tints do the work other palettes do with many colours.
   Built from what the owner's 21st.dev references share: bento panels, solid colour blocks among dark panels, a dithered tile ground,
   glass-like cards, device frames, chips. Nothing here copies a component; the rules are the language.
   Loaded after styles.css. Documentation: brain/design-nyelv.md. A showcase: /design-lab.html
   ========================================================================== */
:root {
  /* the yellow and its tints (the only accent) */
  --y: #D4A017;
  --y-8: rgba(212, 160, 23, 0.08);
  --y-14: rgba(212, 160, 23, 0.14);
  --y-24: rgba(212, 160, 23, 0.24);
  --y-50: rgba(212, 160, 23, 0.5);
  /* warm surfaces, three steps up from the ground */
  --s-0: #0A0A0A;
  --s-1: #121110;
  --s-2: #1A1815;
  --s-3: #232019;
  --line: rgba(245, 242, 236, 0.09);
  --line-strong: rgba(245, 242, 236, 0.16);
  --ink: #F5F2EC;
  --ink-2: #B8B2A7;
  --ink-3: #8E887D;
  /* shapes */
  --r-tile: 25%;
  --r-panel: 22px;
  --r-chip: 999px;
  --gap: 12px;
}

/* ---------- 1. The tile ground: a grid of small rounded squares that fades into the dark, a few of them lit.
   Pure CSS (two tiled SVGs and a mask): no canvas, no script, nothing moves, so it is free on a slow phone. ---------- */
.tile-field {
  --cell: 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tf-height, 340px);
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='72'%3E%3Cg fill='%23D4A017'%3E%3Crect x='27' y='27' width='16' height='16' rx='4'/%3E%3Crect x='99' y='3' width='16' height='16' rx='4'/%3E%3Crect x='123' y='51' width='16' height='16' rx='4'/%3E%3Crect x='171' y='27' width='16' height='16' rx='4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='16' height='16' rx='4' fill='%23D4A017' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-size: 192px 72px, 24px 24px;
  background-position: center bottom, center bottom;
  -webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 100% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
.tile-field--top { bottom: auto; top: 0; transform: scaleY(-1); }
/* a thin band: a divider between two sections */
.tile-field--band { position: relative; height: 72px; max-width: var(--max-width, 1200px); margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
/* a section that carries a tile ground keeps its own content above it */
.has-tile-field { position: relative; isolation: isolate; }
.has-tile-field > :not(.tile-field) { position: relative; z-index: 1; }

/* ---------- 2. The bento: panels of different sizes on one grid, small equal gaps ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.bento > .span-3 { grid-column: span 3; } .bento > .span-4 { grid-column: span 4; } .bento > .span-5 { grid-column: span 5; }
.bento > .span-6 { grid-column: span 6; } .bento > .span-7 { grid-column: span 7; } .bento > .span-8 { grid-column: span 8; } .bento > .span-12 { grid-column: span 12; }
@media (max-width: 860px) { .bento > [class*="span-"] { grid-column: span 12; } }

.panel {
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.4vw, 26px);
  color: var(--ink);
  min-width: 0;
}
.panel h3 { font-family: var(--font-headline, ui-serif, Georgia, serif); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; margin: 0 0 8px; }
.panel p { color: var(--ink-2); margin: 0; }
/* a solid block among the dark panels (the coloured blocks of the references, in our one colour) */
.panel--solid { background: var(--y); border-color: transparent; color: #0A0A0A; }
.panel--solid p, .panel--solid h3 { color: #0A0A0A; }
.panel--tint { background: var(--y-8); border-color: var(--y-24); }
.panel--raised { background: var(--s-2); border-color: var(--line-strong); }
/* a glass-like card: a lit top edge and a faint inner glow; no backdrop blur on purpose (it is slow on mid-range phones) */
.panel--glass {
  background: linear-gradient(180deg, rgba(245, 242, 236, 0.07), rgba(245, 242, 236, 0.025));
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(245, 242, 236, 0.14), inset 0 -24px 40px rgba(212, 160, 23, 0.04);
}

/* ---------- 3. Chips and labels ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.75em; border-radius: var(--r-chip); border: 1px solid var(--line-strong); font: 500 0.72rem/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); background: var(--s-2); }
.chip--y { background: var(--y-14); border-color: var(--y-24); color: var(--y); }
.chip .tile { width: 0.6em; height: 0.6em; }

/* ---------- 4. A stacked list: rows that sit on each other, each with a tile marker and a chip ---------- */
.stack { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stack > li { display: flex; align-items: center; gap: 0.8em; padding: 12px 14px; background: var(--s-2); border: 1px solid var(--line); border-radius: 16px; }
.stack > li > .grow { flex: 1; min-width: 0; }
.stack > li small { display: block; color: var(--ink-3); }
.stack > li:nth-child(2) { margin-inline: 10px; opacity: 0.92; }
.stack > li:nth-child(3) { margin-inline: 20px; opacity: 0.8; }

/* ---------- 5. A device frame for the real product views (the owner's own screenshots go in here; nothing is faked) ---------- */
.device { position: relative; background: var(--s-2); border: 1px solid var(--line-strong); border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); max-width: 340px; }
.device::before { content: ""; position: absolute; top: 14px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 6px; background: var(--s-0); }
.device > .screen { border-radius: 26px; background: var(--s-0); min-height: 380px; padding: 28px 16px 16px; border: 1px solid var(--line); }
.device--tilt { transform: rotate(-3deg); }

/* ---------- 6. Block letters: heavy letters, each in its own block ---------- */
.block-word { display: inline-flex; gap: 0.12em; font: 800 clamp(2rem, 7vw, 4.5rem)/1 var(--font-display, "Space Grotesk", sans-serif); }
.block-word > span { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; background: var(--y); color: #0A0A0A; border-radius: var(--r-tile); }
.block-word > span:nth-child(even) { background: var(--s-2); color: var(--y); border: 1px solid var(--y-24); }

/* ---------- 7. Rhythm ---------- */
.section-tight { padding-block: clamp(56px, 8vw, 96px); }
.eyebrow { font: 500 0.75rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.6em; }
.eyebrow::before { content: ""; width: 0.6em; height: 0.6em; border-radius: var(--r-tile); background: var(--y); }

@media (prefers-reduced-motion: reduce) { .device--tilt { transform: none; } }

/* The tile ground in the page's own sections: the hero's is a taller hill, the closing call to action's sits behind its text */
.hero { position: relative; }
.tile-field--hero { --tf-height: 420px; }
.bottom-cta { position: relative; overflow: hidden; }
.bottom-cta .container { position: relative; z-index: 1; }

/* ==========================================================================
   Page layer (2026-11-04): the whole landing page in the Csempe language.
   Every card type becomes a panel; the grids become bento; one plan is the solid block; tile grounds run through the sections.
   ========================================================================== */
.tile-field--sec { opacity: 0.5; }
.has-tile-field { overflow: hidden; }

/* every card type: a panel */
.advantage-card, .feature-card, .voice-card, .compare-card, .cost-card, .faq-item, .pricing-tier-card, .connect-tile, .stat-block, .trust-row, .calculator-panel, .who-we-are {
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: none;
}
.advantage-card:hover, .feature-card:hover, .pricing-tier-card:hover { transform: none; border-color: var(--y-24); box-shadow: none; }
.advantage-card p, .feature-card p { color: var(--ink-2); }
.advantage-title, .feature-title, .compare-card-title, .pricing-tier-name { font-family: var(--font-headline, ui-serif, Georgia, serif); font-weight: 600; }

/* "Why Froko": a bento, the first benefit is the big one, in solid yellow */
.advantages-grid { gap: var(--gap); }
.advantages-grid > .advantage-card:first-child { grid-column: span 2; background: var(--y); border-color: transparent; color: #0A0A0A; }
.advantages-grid > .advantage-card:first-child * { color: #0A0A0A; }
.advantages-grid > .advantage-card:first-child .advantage-icon { background: rgba(10, 10, 10, 0.12); }
.advantages-grid > .advantage-card:nth-child(5) { background: var(--y-8); border-color: var(--y-24); }
@media (max-width: 860px) { .advantages-grid > .advantage-card:first-child { grid-column: auto; } }

/* features: the middle one is a tinted panel */
.features-grid { gap: var(--gap); }
.features-grid > .feature-card:nth-child(2) { background: var(--y-8); border-color: var(--y-24); }

/* pricing: the Pro plan is the solid block */
.pricing-grid { gap: var(--gap); }
.pricing-tier-featured { background: var(--y); border-color: transparent; box-shadow: none; color: #0A0A0A; }
.pricing-tier-featured:hover { background: var(--y); border-color: transparent; box-shadow: none; }
.pricing-tier-featured :is(.pricing-tier-name, .pricing-tier-audience, .pricing-tier-price, .price-val, .price-freq, .pricing-tier-feature, .pricing-tier-header, .pricing-tier-body, p, li, span, small) { color: #0A0A0A; }
.pricing-tier-featured .pricing-tier-feature svg, .pricing-tier-featured .pricing-tier-feature::before { color: #0A0A0A; fill: currentColor; }
.pricing-tier-featured .pricing-tier-badge { background: #0A0A0A; color: var(--y); }
.pricing-tier-featured .btn { background: #0A0A0A; color: var(--y); border-color: #0A0A0A; }
.pricing-tier-featured .btn:hover { background: var(--s-2); }

/* the cost comparison and the compare cards: ours is the lit one */
.cost-card-solution, .compare-card-us { background: var(--y-8); border-color: var(--y-24); box-shadow: none; }

/* trust, faq: rows are stacked panels with a little room between */
.trust-list, .faq-list { gap: 8px; }
.faq-item, .trust-row { transition: border-color 0.2s ease; }
.faq-item:hover, .trust-row:hover { border-color: var(--line-strong); }

/* stats: three panels instead of three columns and rules */
.stats-grid { gap: var(--gap); }
.stat-divider { display: none; }
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr !important; } }
.stat-block { padding: clamp(18px, 2.4vw, 26px); }

/* section headings: the eyebrow-like label gets the tile */
.section-label, .section-eyebrow { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.1em; text-transform: uppercase; }

/* the connect dock: tiles are panels, a touch of room */
.connect-dock { gap: var(--gap); }

/* buttons: the primary one is the solid yellow, rounded like the tiles' family */
.btn-primary { border-radius: 14px; }
.btn-secondary, .btn-ghost { border-radius: 14px; border-color: var(--line-strong); }

.who-we-are { padding: clamp(18px, 2.4vw, 26px); }

/* the rest of the page: call flow, how it works, who it is for, voices, footer */
.callflow-step-card, .who-for-card, .howitworks-step, .about-text, .trust-payments-row {
  background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: none;
}
.callflow-step-card { padding: clamp(16px, 2.2vw, 24px); }
.callflow-step-card:hover { transform: none; border-color: var(--y-24); box-shadow: none; }
.callflow-step:nth-child(odd) .callflow-step-card { background: var(--s-1); }
.callflow-step-quote { background: var(--y-8); border: 1px solid var(--y-24); border-radius: 14px; }
.callflow-step-icon { border-radius: 14px; background: var(--y-14); }
.howitworks-steps { gap: var(--gap); }
.howitworks-step { padding: clamp(16px, 2.2vw, 22px); }
.howitworks-step:first-child { background: var(--y); border-color: transparent; }
.howitworks-step:first-child * { color: #0A0A0A; }
.howitworks-step:first-child::before { background: #0A0A0A; color: var(--y); }
.voice-card:first-child { background: var(--y-8); border-color: var(--y-24); }
.footer { border-top: 1px solid var(--line); background: var(--s-0); }
.footer-col-title { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; color: var(--ink-3); }

/* ==========================================================================
   App icons (from the references: rounded-square icons that sit on a card like a small stack of icons).
   Every card is: the icon, the title, one line. Nothing else.
   ========================================================================== */
.advantage-icon, .feature-icon, .callflow-step-icon {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 28%;
  display: grid; place-items: center;
  color: #0A0A0A;
  background: linear-gradient(160deg, #F0C13A 0%, var(--y) 55%, #A87A0C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.18), 0 10px 22px -8px rgba(212, 160, 23, 0.55);
  margin-bottom: 18px;
  isolation: isolate;
}
.advantage-icon svg, .feature-icon svg, .callflow-step-icon svg { width: 26px; height: 26px; stroke-width: 2; }
/* two ghost icons behind, fanned out, as the icons in the folder reference */
.advantage-icon::before, .advantage-icon::after, .feature-icon::before, .feature-icon::after, .callflow-step-icon::before, .callflow-step-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 28%; z-index: -1;
  background: var(--s-3); border: 1px solid var(--line-strong);
}
.advantage-icon::before, .feature-icon::before, .callflow-step-icon::before { transform: rotate(-12deg) translate(-9px, 2px); }
.advantage-icon::after, .feature-icon::after, .callflow-step-icon::after { transform: rotate(11deg) translate(9px, 1px); background: var(--y-14); border-color: var(--y-24); }
/* every second icon is the dark glass one, the yellow only in the glyph */
.advantages-grid > .advantage-card:nth-child(even) .advantage-icon,
.features-grid > .feature-card:nth-child(even) .feature-icon,
.callflow-step:nth-child(even) .callflow-step-icon {
  color: var(--y);
  background: linear-gradient(160deg, #2A261D 0%, #17140F 100%);
  box-shadow: inset 0 1px 0 rgba(245, 242, 236, 0.18), 0 10px 22px -10px rgba(0, 0, 0, 0.9);
  border: 1px solid var(--line-strong);
}
/* on the solid yellow card the icon turns dark */
.advantages-grid > .advantage-card:first-child .advantage-icon { color: var(--y); background: linear-gradient(160deg, #2A261D, #0A0A0A); box-shadow: inset 0 1px 0 rgba(245,242,236,.2), 0 10px 22px -8px rgba(0,0,0,.6); }
.advantages-grid > .advantage-card:first-child .advantage-icon::before, .advantages-grid > .advantage-card:first-child .advantage-icon::after { background: rgba(10,10,10,.14); border-color: rgba(10,10,10,.22); }
.advantage-card, .feature-card { padding-top: clamp(22px, 3vw, 32px); }

/* the call flow: icon + title, no paragraph, no quote */
.callflow-step-desc, .callflow-step-quote { display: none; }
.callflow-step-card { display: flex; align-items: center; gap: 18px; }
.callflow-step-card .callflow-step-icon { margin: 0; flex: 0 0 auto; }
.callflow-step-title { margin: 0; font-family: var(--font-headline, ui-serif, Georgia, serif); font-size: clamp(1.1rem, 2vw, 1.35rem); }

/* the bottom of the page: short */
.about-text + .about-text, .footer-desc-text { display: none; }
.advantages-grid > .advantage-card:nth-child(even) .advantage-icon,
.features-grid > .feature-card:nth-child(even) .feature-icon,
.callflow-step:nth-child(even) .callflow-step-icon { background: linear-gradient(160deg, #3A3426 0%, #221E16 100%); border-color: rgba(245, 242, 236, 0.22); }
.advantage-icon::before, .feature-icon::before, .callflow-step-icon::before { background: #1F1B14; transform: rotate(-10deg) translate(-8px, 3px); }
.advantage-card, .feature-card { overflow: visible; }

/* Icons, simpler and readable: one glossy rounded-square per card, slightly tilted, big glyph. No ghost icons behind. */
.advantage-icon::before, .advantage-icon::after, .feature-icon::before, .feature-icon::after, .callflow-step-icon::before, .callflow-step-icon::after { display: none; }
.advantage-icon, .feature-icon, .callflow-step-icon { width: 60px; height: 60px; border: 0; transform: rotate(-5deg); }
.advantage-icon svg, .feature-icon svg, .callflow-step-icon svg { width: 30px; height: 30px; stroke-width: 2.2; }
.advantages-grid > .advantage-card:nth-child(even) .advantage-icon,
.features-grid > .feature-card:nth-child(even) .feature-icon,
.callflow-step:nth-child(even) .callflow-step-icon { color: #FFD45A; background: linear-gradient(160deg, #4A4230 0%, #26211A 100%); border: 1px solid rgba(255, 212, 90, 0.35); }
.features-grid > .feature-card:nth-child(even) .feature-icon { transform: rotate(5deg); }
.advantages-grid > .advantage-card:first-child .advantage-icon { color: #FFD45A; background: linear-gradient(160deg, #2A261D, #0A0A0A); }
.advantages-grid > .advantage-card:first-child .advantage-icon, .advantages-grid > .advantage-card:first-child .advantage-icon * { color: #FFD45A !important; }

/* One icon style only: the dark glass squircle with a yellow glyph (no alternating colours) */
.advantage-icon, .feature-icon, .callflow-step-icon,
.advantages-grid > .advantage-card:nth-child(n) .advantage-icon,
.features-grid > .feature-card:nth-child(n) .feature-icon,
.callflow-step:nth-child(n) .callflow-step-icon {
  color: #FFD45A;
  background: linear-gradient(160deg, #4A4230 0%, #26211A 100%);
  border: 1px solid rgba(255, 212, 90, 0.35);
  box-shadow: inset 0 1px 0 rgba(245, 242, 236, 0.2), 0 10px 22px -10px rgba(0, 0, 0, 0.9);
  transform: rotate(-5deg);
}
.advantages-grid > .advantage-card:first-child .advantage-icon { background: linear-gradient(160deg, #2A261D, #0A0A0A); }