/* sofuca design tokens — shared by design-system.html and index.html */
:root{
  /* Brand */
  --brand-50:#F1FBE0; --brand-100:#DDF5B5; --brand-200:#C2EC85;
  --brand-300:#A0DF52; --brand-400:#7BD028; --brand-500:#53BC00;
  --brand-600:#449C00; --brand-700:#357C00; --brand-800:#285E00; --brand-900:#1B4100;

  /* Neutral */
  --neutral-0:#FFFFFF; --neutral-50:#FAFAF7; --neutral-100:#F5F5F2;
  --neutral-150:#F0F0EC; --neutral-200:#E8E8E5; --neutral-250:#E0E0DA;
  --neutral-300:#DDDDDD; --neutral-400:#BBBBBB; --neutral-500:#888888;
  --neutral-600:#666666; --neutral-700:#555555; --neutral-800:#333333; --neutral-900:#1A1A1A;

  /* Accent gradient pairs */
  --accent-coral-200:#FFE5D6; --accent-coral-500:#FFB893;
  --accent-pink-200:#FFD9E5;  --accent-pink-500:#FF9DBC;
  --accent-sky-200:#D9F0FF;   --accent-sky-500:#9DC8FF;
  --accent-amber-200:#FFD89E; --accent-amber-500:#FF9D5C;

  /* Semantic */
  --bg:var(--neutral-0); --bg-alt:var(--neutral-100); --bg-inverse:var(--neutral-900);
  --text:var(--neutral-900); --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-500); --text-inverse:var(--neutral-0);
  --border:var(--neutral-200); --border-strong:var(--neutral-300);
  --primary:var(--brand-500); --primary-hover:var(--brand-600);
  --primary-soft:var(--brand-50);

  /* Type */
  --font-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-xs:11px; --text-sm:12px; --text-base:13px; --text-md:14px;
  --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px;
  --text-4xl:32px; --text-5xl:42px;
  --leading-tight:1.3; --leading-snug:1.5; --leading-normal:1.7;
  --leading-relaxed:1.95; --leading-loose:2.0;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em;
  --tracking-wider:0.06em; --tracking-widest:0.16em; --tracking-eyebrow:0.18em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px;

  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:20px; --radius-pill:9999px;

  /* Shadow */
  --shadow-xs:0 1px 2px rgba(26,26,26,.04);
  --shadow-sm:0 1px 3px rgba(26,26,26,.06),0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 12px rgba(26,26,26,.08),0 2px 4px rgba(26,26,26,.04);
  --shadow-lg:0 12px 32px rgba(26,26,26,.10),0 4px 8px rgba(26,26,26,.04);
  --shadow-focus:0 0 0 3px rgba(45,206,122,.25);

  /* Motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --duration-fast:120ms; --duration-normal:200ms; --duration-slow:300ms;

  /* Layout */
  --container:1080px; --container-narrow:880px;
}
/* sofuca component styles — depend on tokens.css */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);color:var(--text);background:var(--bg);
  line-height:var(--leading-normal);font-size:var(--text-md);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.wrap{max-width:var(--container);margin:0 auto}
.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);
  text-transform:uppercase;text-align:center;
}
.eyebrow-brand{color:var(--primary)}
.eyebrow-left{text-align:left}
.section-h2{font-size:var(--text-3xl);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wider);text-align:center;margin-bottom:var(--space-2);
}
.section{padding:var(--space-20) var(--space-8)}
.section-bg-alt{background:var(--bg-alt)}
.section-bg-brand{background:var(--primary);color:var(--text-inverse)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-base);
  letter-spacing:var(--tracking-wide);padding:12px 26px;
  border-radius:var(--radius-xs);border:1px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1;
  transition:var(--duration-fast) var(--ease-out);user-select:none;
}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--neutral-900);color:var(--text-inverse)}
.btn-primary:hover{background:#000}
.btn-brand{background:var(--primary);color:var(--text-inverse)}
.btn-brand:hover{background:var(--primary-hover)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border-strong);
  font-weight:var(--weight-medium);font-size:var(--text-sm);padding:10px 18px;
}
.btn-outline:hover{border-color:var(--text)}
.btn-ghost{background:transparent;color:var(--text);
  font-weight:var(--weight-medium);font-size:var(--text-sm);padding:10px 14px;
}
.btn-ghost:hover{background:var(--neutral-100)}
.btn-onbrand{background:var(--bg);color:var(--brand-600);
  font-size:var(--text-md);padding:14px 36px;
}
.btn-onbrand:hover{background:var(--neutral-50)}
.btn-onbrand-outline{background:transparent;color:var(--text-inverse);
  border-color:var(--text-inverse);font-size:var(--text-md);padding:14px 36px;
}
.btn-onbrand-outline:hover{background:rgba(255,255,255,.1)}
.btn .ic{width:16px;height:16px}

/* ===== NAV ===== */
.nav{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-8);border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:100;
}
.nav-left{display:flex;align-items:center;gap:var(--space-8)}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--text);cursor:pointer;line-height:0}
.logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:var(--space-6);font-size:var(--text-sm);
  font-weight:var(--weight-medium);color:var(--text-secondary);
}
.nav-links a{color:inherit;text-decoration:none;cursor:pointer}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text);font-weight:var(--weight-bold)}
.nav-actions{display:flex;align-items:center;gap:var(--space-2)}
.hamburger{display:none;flex-direction:column;gap:5px;width:32px;height:32px;
  justify-content:center;align-items:center;background:transparent;border:none;
  cursor:pointer;padding:0;z-index:101;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);
  border-radius:2px;transition:.3s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--bg);z-index:99;padding:80px var(--space-8) var(--space-8);
  flex-direction:column;overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:var(--text-xl);font-weight:var(--weight-medium);
  color:var(--text);text-decoration:none;padding:var(--space-5) 0;
  border-bottom:1px solid var(--border);cursor:pointer;
}
.mobile-actions{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.mobile-actions .btn{width:100%}

/* ===== HERO ===== */
.hero{padding:var(--space-16) var(--space-8) var(--space-10);
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center;
}
.hero h1{font-size:var(--text-5xl);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-wide);
  margin-bottom:var(--space-6);
}
.hero p{font-size:var(--text-base);color:var(--text-secondary);
  line-height:var(--leading-loose);margin-bottom:var(--space-8);max-width:420px;
}
.hero-img{border-radius:var(--radius-md);height:340px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.hero-img .ic{width:80px;height:80px}
.hero-img[data-tone="brand"]{background:linear-gradient(135deg,var(--brand-50),var(--brand-300));color:var(--brand-800)}
.hero-img[data-tone="coral"]{background:linear-gradient(135deg,var(--accent-coral-200),var(--accent-coral-500))}
.hero-img[data-tone="pink"]{background:linear-gradient(135deg,var(--accent-pink-200),var(--accent-pink-500))}
.hero-img[data-tone="sky"]{background:linear-gradient(135deg,var(--accent-sky-200),var(--accent-sky-500))}

/* ===== USER PILL ROW ===== */
.user-row{padding:var(--space-4) var(--space-8) var(--space-14);text-align:center;
  display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;
}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
  border:1px solid var(--neutral-250);border-radius:var(--radius-pill);
  padding:8px 16px;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--neutral-700);
}
.pill .ic{width:14px;height:14px;color:var(--text-secondary)}

/* ===== TAG ===== */
.tag{display:inline-block;font-size:10px;font-weight:var(--weight-bold);
  color:var(--brand-600);background:var(--primary-soft);
  padding:3px 10px;border-radius:var(--radius-pill);
  letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:10px;
}

/* ===== ROLE CARD ===== */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-12)}
.role-card{display:flex;flex-direction:column;background:var(--bg);
  border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-10) var(--space-8);text-decoration:none;color:inherit;
  cursor:pointer;transition:var(--duration-normal) var(--ease-out);
}
.role-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.role-card-icon{width:48px;height:48px;color:var(--primary);margin-bottom:var(--space-5)}
.role-card-title{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.role-card-sub{font-size:var(--text-base);color:var(--text-secondary);
  line-height:var(--leading-relaxed);margin-bottom:auto;
}
.role-card-cta{margin-top:var(--space-6);display:inline-flex;align-items:center;
  gap:6px;font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--primary);
}
.role-card-cta .ic{width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-out)}
.role-card:hover .role-card-cta .ic{transform:translateX(4px)}

/* ===== VALUES ===== */
.values{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-6)}
.value{text-align:center;padding:var(--space-8) var(--space-5)}
.value-icon{width:48px;height:48px;color:var(--primary);margin:0 auto var(--space-5)}
.value-title{font-size:var(--text-xl);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);margin-bottom:var(--space-3);
}
.value-desc{font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-relaxed);
}

/* ===== CASE CARD ===== */
.case-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}
.card{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:var(--duration-normal) var(--ease-out);
}
.card-interactive{cursor:pointer}
.card-interactive:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-media{height:180px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--neutral-100);
}
.card-media[data-tone="coral"]{background:linear-gradient(135deg,var(--accent-coral-200),var(--accent-coral-500))}
.card-media[data-tone="pink"]{background:linear-gradient(135deg,var(--accent-pink-200),var(--accent-pink-500))}
.card-media[data-tone="sky"]{background:linear-gradient(135deg,var(--accent-sky-200),var(--accent-sky-500))}
.card-media[data-tone="amber"]{background:linear-gradient(135deg,var(--accent-amber-200),var(--accent-amber-500))}
.card-media[data-tone="brand"]{background:linear-gradient(135deg,var(--brand-50),var(--brand-200));color:var(--brand-700)}
.card-media .ic{width:48px;height:48px}
.card-body{padding:var(--space-5)}
.card-title{font-size:var(--text-md);font-weight:var(--weight-bold);
  margin-bottom:var(--space-2);line-height:var(--leading-snug);
}
.card-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-relaxed)}

/* ===== FEATURE CARD ===== */
.fc{background:var(--neutral-100);border-radius:var(--radius-md);
  padding:var(--space-8) var(--space-6) 0;
  display:flex;flex-direction:column;min-height:340px;
}
.fc-eb{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);color:var(--text-muted);
  text-align:center;margin-bottom:var(--space-2);text-transform:uppercase;
}
.fc-title{font-size:var(--text-xl);font-weight:var(--weight-bold);
  text-align:center;margin-bottom:var(--space-4);line-height:var(--leading-snug);
}
.fc-desc{font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-relaxed);text-align:center;margin-bottom:auto;
}
.fc-media{margin-top:var(--space-5);margin-bottom:var(--space-6);
  background:var(--neutral-200);border-radius:var(--radius-sm);height:120px;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.fc-media .ic{width:42px;height:42px}

/* ===== STEPS ===== */
.step{display:flex;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-n{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:var(--text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:var(--weight-bold);
}
.step-n[data-variant="dark"]{background:var(--neutral-900);color:var(--primary)}
.step-n .ic{width:14px;height:14px}
.step-title{font-size:var(--text-md);font-weight:var(--weight-bold);margin-bottom:6px}
.step-desc{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed)}

/* visual step */
.vstep{display:flex;flex-direction:column}
.vstep-img{background:var(--neutral-200);border-radius:var(--radius-sm);
  height:180px;display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);margin-bottom:var(--space-4);
}
.vstep-img .ic{width:44px;height:44px}
.vstep-img[data-tone="brand"]{background:var(--primary-soft);color:var(--primary-hover)}
.vstep-img[data-tone="coral"]{background:linear-gradient(135deg,var(--accent-coral-200),var(--accent-coral-500));color:#fff}
.vstep-img[data-tone="pink"]{background:linear-gradient(135deg,var(--accent-pink-200),var(--accent-pink-500));color:#fff}
.vstep-body{background:var(--bg);padding:var(--space-5);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;flex:1;
}
.vstep-title{font-size:var(--text-md);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}
.vstep-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);flex:1}
.vstep-foot{font-size:var(--text-xs);color:var(--text-muted);
  border-top:1px solid var(--border);padding-top:var(--space-3);margin-top:var(--space-4);
  letter-spacing:var(--tracking-wide);
}

/* ===== CATEGORY ===== */
.cat{background:var(--neutral-100);border-radius:var(--radius-md);padding:var(--space-6) var(--space-4);text-align:center}
.cat .ic{width:36px;height:36px;color:var(--text);margin:0 auto var(--space-3)}
.cat-label{font-size:var(--text-base);font-weight:var(--weight-bold)}

/* ===== TRUST ===== */
.trust-card{background:var(--neutral-100);border-radius:var(--radius-md);padding:var(--space-7)}
.trust-card .ic{width:32px;height:32px;color:var(--primary);margin-bottom:var(--space-4)}
.trust-title{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}
.trust-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}

/* ===== BENEFIT ===== */
.benefit-card{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-8) var(--space-6);text-align:center;
}
.benefit-card .ic{width:42px;height:42px;color:var(--primary);margin:0 auto var(--space-5)}
.benefit-title{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.benefit-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);text-align:left}

/* ===== FAQ ===== */
.faq{border-bottom:1px solid var(--border);padding:var(--space-5) 0}
.faq summary{display:flex;justify-content:space-between;align-items:center;
  font-size:var(--text-md);font-weight:var(--weight-medium);cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faqt{width:22px;height:22px;border:1px solid var(--neutral-400);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);flex-shrink:0;
  transition:var(--duration-normal) var(--ease-out);
}
.faqt .ic{width:12px;height:12px;transition:transform var(--duration-normal) var(--ease-out)}
.faqa{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed);
  padding-top:var(--space-3);
}
.faq[open] .faqt{transform:rotate(45deg);background:var(--primary);
  border-color:var(--primary);color:var(--text-inverse);
}

/* ===== CYCLE ===== */
.cycle{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;gap:var(--space-3)}
.cycle-box{background:var(--neutral-100);border-radius:var(--radius-sm);
  padding:var(--space-6);text-align:center;
}
.cycle-box[data-tone="brand"]{background:var(--primary-soft)}
.cycle-box[data-tone="brand"] .cycle-title,
.cycle-box[data-tone="brand"] .cycle-desc{color:var(--primary-hover)}
.cycle-box .ic{width:30px;height:30px;color:var(--text);margin:0 auto var(--space-3)}
.cycle-box[data-tone="brand"] .ic{color:var(--primary-hover)}
.cycle-title{font-size:var(--text-base);font-weight:var(--weight-bold);margin-bottom:6px}
.cycle-desc{font-size:var(--text-xs);color:var(--text-muted);line-height:1.7}
.cycle-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.cycle-arrow .ic{width:20px;height:20px}

/* ===== PRICING ===== */
.price-card{background:var(--neutral-100);border-radius:var(--radius-md);
  padding:var(--space-12) var(--space-8);text-align:center;
}
.price-eb{font-size:var(--text-sm);font-weight:var(--weight-bold);
  color:var(--text-muted);letter-spacing:var(--tracking-widest);margin-bottom:var(--space-3);
}
.price-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.price-amount{font-size:48px;font-weight:var(--weight-bold);letter-spacing:-.01em;margin-bottom:var(--space-3)}
.price-note{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed)}

/* ===== DARK BANNER / CTA ===== */
.dark-banner{background:var(--neutral-900);color:var(--text-inverse);
  border-radius:var(--radius-md);padding:var(--space-8);
}
.dark-banner-eb{font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest);color:var(--primary);margin-bottom:var(--space-3);text-transform:uppercase;
}
.dark-banner-title{font-size:var(--text-2xl);font-weight:var(--weight-bold);
  line-height:var(--leading-snug);letter-spacing:var(--tracking-wide);
}
.dark-banner p{font-size:var(--text-base);color:rgba(255,255,255,.65);
  line-height:var(--leading-relaxed);margin-top:var(--space-3);
}

.cta-banner{background:var(--primary);padding:var(--space-20) var(--space-8);text-align:center}
.cta-banner h2{font-size:var(--text-4xl);font-weight:var(--weight-bold);
  color:#fff;line-height:1.4;letter-spacing:var(--tracking-wider);margin-bottom:var(--space-3);
}
.cta-banner p{font-size:var(--text-base);color:rgba(255,255,255,.85);margin-bottom:var(--space-8)}
.cta-banner .actions{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{padding:var(--space-14) var(--space-8) var(--space-8);
  background:var(--neutral-100);color:var(--text);
  border-top:1px solid var(--border);
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8)}
.footer-brand{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-3)}
.footer-brand .g{color:var(--primary)}
.footer-tag{font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-relaxed)}
.footer-h{font-size:var(--text-sm);font-weight:var(--weight-bold);
  margin-bottom:var(--space-4);color:var(--text-secondary);
}
.footer-grid a{display:block;font-size:var(--text-xs);color:var(--text-muted);
  text-decoration:none;margin-bottom:var(--space-2);cursor:pointer;
}
.footer-grid a:hover{color:var(--text)}
.footer-bot{font-size:var(--text-xs);color:var(--text-muted);
  border-top:1px solid var(--border);padding-top:var(--space-5);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
}
.footer-bot a{color:var(--text-secondary);text-decoration:none}
.footer-bot a:hover{color:var(--text)}

/* ===== UTIL ===== */
.brand{color:var(--primary)}
.center{text-align:center}
.surface{background:var(--bg);border-radius:var(--radius-md);padding:var(--space-8)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.bc{background:var(--neutral-100);border-radius:var(--radius-sm);padding:var(--space-4);
  display:flex;gap:var(--space-3);align-items:flex-start;
}
.bc .ic{width:24px;height:24px;color:var(--text);flex-shrink:0;margin-top:2px}
.bc-title{font-size:var(--text-md);font-weight:var(--weight-bold);margin-bottom:4px}
.bc-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:1.85}

/* ===== IMAGE SLOTS (replaced) ===== */
.img-slot{display:block;width:100%;object-fit:cover}
.img-slot.ar-hero{aspect-ratio:11/8}
.img-slot.ar-fc{aspect-ratio:7/5}
.img-slot.ar-case{aspect-ratio:16/9}
.img-slot.ar-5x4{aspect-ratio:5/4}
.img-slot.ar-7x6{aspect-ratio:7/6}
.img-slot.ar-4x3{aspect-ratio:4/3}
.img-slot.ar-tile{aspect-ratio:30/55}
.keep-2col{grid-template-columns:1fr 1fr !important}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .hero{grid-template-columns:1fr;padding:var(--space-10) var(--space-5)}
  .hero h1{font-size:30px}
  .hero p{max-width:100%}
  .hero-img{height:220px}
  .hero-img .ic{width:60px;height:60px}
  .section{padding:var(--space-12) var(--space-5)}
  .section-h2{font-size:var(--text-2xl)}
  .nav{padding:var(--space-4) var(--space-5)}
  .nav-links,.nav-actions{display:none}
  .hamburger{display:flex}
  .role-grid,.values,.case-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cycle{grid-template-columns:1fr}
  .cycle-arrow{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .grid-feat{grid-template-columns:1fr !important;gap:var(--space-6) !important}
  .grid-feat > .img-slot{order:2}
  .img-slot.ar-7x6{aspect-ratio:2/1 !important}
  .faq-grid{grid-template-columns:1fr !important}
}