/*
Theme Name: Hemicule
Theme URI: https://slonkle.com
Description: Child theme of Twenty Twenty-Five for the Hemicule site. Design tokens live in theme.json; page modules live in /patterns.
Author: Hemicule
Template: twentytwentyfive
Version: 0.3.0
License: GNU General Public License v2 or later
Text Domain: hemicule
*/

/* ==================================================================
   Skin pass — light mode + Palette A (violet).
   Colors come from theme.json presets: --wp--preset--color--*
   ================================================================== */

::selection{background:#C9C7F5;color:#141419}
html{scroll-behavior:smooth}

/* ---------- site chrome ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(246,246,243,.86);
	-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
	border-bottom:1px solid rgba(20,20,25,.08)}
.hd-cta .wp-block-button__link{padding:9px 16px;font-size:14px}
.site-footer{border-top:1px solid rgba(20,20,25,.08)}

/* ---------- shared section headers ---------- */
.co-head,.ac-head{max-width:680px;margin:0 auto 46px;text-align:center}
.co-title,.ac-title{margin:0;font-size:clamp(28px,4.2vw,42px);font-weight:700;letter-spacing:-.026em;line-height:1.12}
.co-title em,.ac-title em{font-family:var(--wp--preset--font-family--accent);font-style:italic;font-weight:500;color:var(--wp--preset--color--brand-dark)}
.co-sub,.ac-sub{margin:12px 0 0;font-size:17px;color:var(--wp--preset--color--muted)}

/* ---------- comparison module (co-*) ---------- */
.co-section .co-grid{display:grid;grid-template-columns:minmax(120px,.72fr) 1fr 1fr 1.16fr;
	column-gap:22px;row-gap:0}
.co-grid>p{margin:0}
.co-h{font-size:13px;font-weight:700;color:#59595F;letter-spacing:.02em;
	padding:0 0 14px;border-bottom:1px solid rgba(20,20,25,.14)}
/* light cells */
.co-task{margin:0;font-weight:600;color:var(--wp--preset--color--ink);font-size:14px;
	padding:17px 0 18px;border-bottom:1px solid rgba(20,20,25,.07)}
.co-byhand,.co-generic{margin:0;font-size:14px;line-height:1.6;color:var(--wp--preset--color--muted);
	padding:17px 0 18px;border-bottom:1px solid rgba(20,20,25,.07)}
@media (hover:hover){
	.co-grid:hover>p:not(.co-hemi):not(.co-h-hero){background:rgba(20,20,25,.028)}
}
/* hero column — continuous dark panel */
.co-h-hero{position:relative;overflow:hidden;margin:-16px 0 0;padding:24px 22px 15px;
	color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;
	background:var(--wp--preset--color--panel);
	border:1px solid rgba(148,140,255,.38);border-radius:20px 20px 0 0;
	box-shadow:0 -8px 32px -18px rgba(56,50,158,.4)}
.co-h-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(300px 140px at 82% -6%,rgba(132,122,255,.28),transparent 70%)}
.co-hemi{position:relative;display:flex;gap:9px;align-items:flex-start;
	margin:0;padding:17px 22px 18px;font-size:14px;line-height:1.6;color:#E9E9F2;
	background:var(--wp--preset--color--panel);
	border-right:1px solid rgba(148,140,255,.38);border-left:1px solid rgba(148,140,255,.38);
	border-bottom:1px solid rgba(255,255,255,.08)}
.co-hemi::before{content:"✓";flex:none;color:var(--wp--preset--color--brand-bright);
	font-weight:600;font-size:13px;line-height:20px}
/* last row closes the panel */
.co-grid:not(:has(+ .co-grid))>p.co-task,
.co-grid:not(:has(+ .co-grid))>p.co-byhand,
.co-grid:not(:has(+ .co-grid))>p.co-generic{border-bottom:0}
.co-grid:not(:has(+ .co-grid)) .co-hemi{border-bottom:1px solid rgba(148,140,255,.38);
	border-radius:0 0 20px 20px;margin-bottom:-16px;padding-bottom:24px;
	box-shadow:0 26px 56px -22px rgba(56,50,158,.5)}
/* footer bar */
.co-foot{background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:16px;
	padding:14px 16px 14px 20px;margin-top:36px;
	box-shadow:0 1px 2px rgba(20,20,25,.04)}
.co-note{margin:0;font-size:14px;color:var(--wp--preset--color--muted);
	display:flex;align-items:center;gap:10px}
.co-note::before{content:"";flex:none;width:15px;height:15px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A48C6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='2.5'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E") no-repeat center/contain}
.co-note strong{color:var(--wp--preset--color--ink);font-weight:600}
.co-cta-wrap{margin:0}
.co-cta .wp-block-button__link{transition:transform .18s ease}
.co-cta .wp-block-button__link::after{content:"→";margin-left:6px}
.co-cta .wp-block-button__link:hover{transform:translateY(-1px)}

/* ---------- audience cards (ac-*) ---------- */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:24px;row-gap:24px}
.ac-grid>.wp-block-group{margin:0}
.ac-card{background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:16px;
	padding:22px 22px 20px;box-shadow:0 1px 2px rgba(20,20,25,.03);
	transition:transform .18s ease,box-shadow .18s ease}
.ac-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(20,20,25,.12)}
.ac-card-title{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
	color:var(--wp--preset--color--ink)}
.ac-pain{margin:10px 0 14px;font-size:13.5px;line-height:1.6;color:var(--wp--preset--color--muted);
	padding-left:12px;border-left:3px solid #B9B8F0}
.ac-points{margin:0;padding-left:18px}
.ac-points li{font-size:13.5px;line-height:1.6;color:#54545C;margin-bottom:8px}
.ac-points li:last-child{margin-bottom:0}
.ac-points li::marker{color:var(--wp--preset--color--brand)}

/* ---------- hero ---------- */
.hero-title{margin:0}
.hero-sub{margin:14px auto 0;max-width:560px}
.hero-cta{margin-top:26px}

/* ---------- responsive ---------- */
@media (max-width:760px){
	.co-section .co-grid{grid-template-columns:1fr 1fr;column-gap:16px}
	.co-grid-head{display:none}
	.co-task{grid-column:1/-1;padding:0 0 10px;margin-bottom:12px;
		border-bottom:1px solid rgba(20,20,25,.12)}
	.co-byhand,.co-generic{font-size:13px;padding:0 0 14px;border-bottom:0}
	.co-byhand::before,.co-generic::before{display:block;width:fit-content;
		content:"BY HAND";font-size:10.5px;font-weight:700;letter-spacing:.08em;
		color:#75757C;background:rgba(20,20,25,.05);padding:3px 9px;border-radius:99px;margin-bottom:8px}
	.co-generic::before{content:"A GENERIC AI"}
	.co-h-hero{margin-top:0}
	.co-hemi{grid-column:1/-1;display:block;margin:4px 0 0;padding:14px 16px;
		border:1px solid rgba(148,140,255,.38);border-radius:12px}
	.co-hemi::before{content:"WITH HEMICULE";display:block;width:fit-content;
		font-size:10.5px;font-weight:700;letter-spacing:.08em;
		color:var(--wp--preset--color--brand-bright);background:rgba(125,132,255,.14);
		padding:3px 9px;border-radius:99px;margin-bottom:8px}
	.co-grid:not(:has(+ .co-grid)) .co-hemi{margin-bottom:0;padding-bottom:14px;
		border-radius:12px;box-shadow:0 12px 28px -14px rgba(56,50,158,.45)}
	.co-foot{flex-direction:column;align-items:stretch}
	.co-cta-wrap{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}

/* ==================================================================
   Module skin pass 2 — modules 1, 2, 4(catch-all), 5, 6, 7, 8, 9
   ================================================================== */

/* ---------- module 1: hero (dark panel) ---------- */
.hero{position:relative;margin-top:64px;border-radius:24px;overflow:hidden;
	background:linear-gradient(180deg,var(--wp--preset--color--panel) 0%,var(--wp--preset--color--panel-deep) 100%);
	border:1px solid rgba(148,140,255,.38);
	box-shadow:0 34px 68px -26px rgba(56,50,158,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(560px 260px at 82% -10%,rgba(132,122,255,.28),transparent 70%)}
.hero-inner{position:relative;padding:clamp(56px,7vw,88px) 24px}
.hero-title{margin:0 auto;max-width:860px;color:#F4F4F8;font-size:clamp(28px,4.6vw,52px);
	font-weight:700;letter-spacing:-.03em;line-height:1.14}
.hero-title em,.hero-em{font-family:var(--wp--preset--font-family--accent);font-style:italic;font-weight:500;color:var(--wp--preset--color--brand-bright)}
.hero-sub{margin:20px auto 0;max-width:640px;font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:#C9CAD6}
.hero-cta{margin-top:30px;gap:12px}
.hero-chips{margin:26px 0 0;font-size:12.5px;letter-spacing:.02em;color:rgba(233,233,242,.55)}
.btn-amber .wp-block-button__link,.btn-ghost-d .wp-block-button__link{transition:background .18s ease,transform .18s ease}
.btn-amber .wp-block-button__link{background:var(--wp--preset--color--cta);color:var(--wp--preset--color--cta-ink);
	box-shadow:0 12px 28px -10px rgba(245,166,35,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-amber .wp-block-button__link:hover{background:var(--wp--preset--color--cta-deep);transform:translateY(-1px)}
.btn-ghost-d .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none}
.btn-ghost-d .wp-block-button__link:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}

/* ---------- module 2: three steps ---------- */
.ts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:24px;row-gap:24px}
.ts-grid>.wp-block-group{margin:0}
.ts-card{background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:16px;padding:26px 24px 22px;box-shadow:0 1px 2px rgba(20,20,25,.03)}
.ts-num{margin:0 0 10px;font-family:var(--wp--preset--font-family--accent);font-style:italic;font-weight:500;font-size:34px;line-height:1;color:var(--wp--preset--color--brand)}
.ts-name{margin:0 0 8px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--wp--preset--color--ink)}
.ts-desc{margin:0;font-size:13.5px;line-height:1.6;color:var(--wp--preset--color--muted)}

/* ---------- module 4: catch-all line ---------- */
.ac-more{margin:30px auto 0;max-width:680px;text-align:center;font-size:14.5px;color:var(--wp--preset--color--muted)}
.ac-more em{font-family:var(--wp--preset--font-family--accent);font-style:italic;font-weight:500;color:var(--wp--preset--color--brand-dark)}

/* ---------- module 5: functions entry ---------- */
.fe-section{border-top:1px solid rgba(20,20,25,.07);border-bottom:1px solid rgba(20,20,25,.07)}
.fe-title{margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em}
.fe-title .fe-num{color:var(--wp--preset--color--brand)}
.fe-btn{margin-top:16px}

/* ---------- module 6: trust cards ---------- */
.tc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));column-gap:20px;row-gap:20px}
.tc-grid>.wp-block-group{margin:0}
.tc-card{background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(20,20,25,.03)}
.tc-name{margin:0 0 7px;font-size:15.5px;font-weight:700;color:var(--wp--preset--color--ink);display:flex;align-items:center;gap:9px}
.tc-name::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--wp--preset--color--brand-soft);color:var(--wp--preset--color--brand-dark);font-size:11px;font-weight:700}
.tc-desc{margin:0;font-size:13px;line-height:1.55;color:var(--wp--preset--color--muted)}

/* ---------- module 7: build-vs matrix ---------- */
.bv-table{max-width:980px;margin:0 auto;background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,25,.03)}
.bv-row{display:grid;grid-template-columns:minmax(96px,.5fr) 1.15fr 1fr 1fr;column-gap:18px;row-gap:0;align-items:center;
	padding:13px 24px;border-bottom:1px solid rgba(20,20,25,.07)}
.bv-row:not(:has(+ .bv-row)){border-bottom:0}
.bv-row>p{margin:0}
.bv-row-head{padding:15px 24px}
.bv-row-head .bv-c1,.bv-row-head .bv-c2,.bv-row-head .bv-c3{font-size:12.5px;font-weight:700;color:#59595F;text-transform:uppercase;letter-spacing:.04em}
.bv-c0{font-weight:600;color:var(--wp--preset--color--ink);font-size:14px}
.bv-c1,.bv-c2,.bv-c3{font-size:13.5px;color:var(--wp--preset--color--muted)}
.bv-best{justify-self:start;background:var(--wp--preset--color--brand-soft);color:var(--wp--preset--color--brand-dark);
	font-weight:600;padding:5px 12px;margin:-5px 0 -5px -12px;border-radius:8px}
.bv-row-head .bv-best{background:var(--wp--preset--color--brand);color:#fff}

/* ---------- module 8: FAQ accordion ---------- */
.fq-list{max-width:760px;margin:0 auto}
.fq-section .wp-block-details{background:#fff;border:1px solid rgba(20,20,25,.09);border-radius:12px;margin:0 0 10px}
.fq-section details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:15px 18px;font-weight:600;font-size:14.5px;color:var(--wp--preset--color--ink)}
.fq-section details summary::-webkit-details-marker{display:none}
.fq-section details summary::after{content:"+";flex:none;font-weight:500;font-size:19px;line-height:1;color:var(--wp--preset--color--brand)}
.fq-section details[open] summary::after{content:"–"}
.fq-section details[open] summary{border-bottom:1px solid rgba(20,20,25,.07)}
.fq-section details p{margin:0;padding:14px 18px 16px;font-size:13.5px;line-height:1.65;color:var(--wp--preset--color--muted)}

/* ---------- module 9: final CTA ---------- */
.fc-section{position:relative;border-radius:24px;overflow:hidden;margin-bottom:64px;
	background:linear-gradient(180deg,var(--wp--preset--color--panel) 0%,var(--wp--preset--color--panel-deep) 100%);
	border:1px solid rgba(148,140,255,.38);
	box-shadow:0 34px 68px -26px rgba(56,50,158,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.fc-inner{position:relative;padding:clamp(52px,6vw,80px) 24px;text-align:center}
.fc-text{margin:0 auto;max-width:720px;font-size:clamp(19px,2.4vw,26px);font-weight:500;line-height:1.5;letter-spacing:-.012em;color:#E9E9F2}
.fc-text strong{color:var(--wp--preset--color--cta);font-weight:700}
.fc-cta{margin-top:26px}

/* ---------- responsive additions ---------- */
@media (max-width:760px){
	.bv-row{grid-template-columns:1fr;padding:12px 16px;row-gap:6px}
	.bv-row-head{display:none}
	.bv-c0{padding-bottom:2px;font-size:13px}
	.bv-c1,.bv-c2,.bv-c3{display:flex;align-items:center;gap:8px;font-size:13px}
	.bv-c1::before,.bv-c2::before,.bv-c3::before{content:"Hemicule";flex:none;width:fit-content;font-size:10px;font-weight:700;letter-spacing:.07em;color:#75757C;background:rgba(20,20,25,.05);padding:2px 8px;border-radius:99px}
	.bv-c2::before{content:"In-house"}
	.bv-c3::before{content:"Cloud SaaS"}
	.bv-best{margin:0;padding:4px 10px}
	.hero-inner{padding:44px 18px}
}