/* Homepage composition. Shared tokens and controls live in styles.css. */
.home-hero { padding: 58px 0 46px; overflow: hidden; background: radial-gradient(ellipse at 85% 30%, #dff8f4 0, #f2f8fb 40%, #fff 75%); }
.home-hero-grid { display: grid; gap: 34px; align-items: center; }
.home-copy { position: relative; z-index: 1; }
.home-copy h1 { margin-bottom: 24px; max-width: 680px; font-size: clamp(2.65rem, 4.6vw, 4.5rem); line-height: 1.07; letter-spacing: -.055em; }
.home-copy h1 em { font-style: normal; color: var(--teal-700); }
.home-lead { max-width: 580px; margin-bottom: 28px; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.15rem); line-height: 1.75; }
.home-copy .free-caption { margin: 13px 0 23px; }
.hero-tags { display: flex; gap: 9px 18px; flex-wrap: wrap; margin-top: 34px; color: var(--muted); font-size: .76rem; }
.hero-tags span::before { content: "•"; margin-right: 7px; color: var(--teal-700); }
.home-product { position: relative; display: grid; place-items: center; min-width: 0; padding: 30px 0; }
.product-orbit { position: absolute; width: 97%; max-width: 440px; aspect-ratio: 1; border: 1px solid #bddcd9; border-radius: 50%; background: radial-gradient(circle, #c6efe8 0%, #e9f8f5 55%, transparent 70%); }
.product-orbit::after { content: ""; position: absolute; inset: 28px; border: 1px dashed #aacfc9; border-radius: 50%; }
.product-label { position: absolute; top: 0; left: 50%; white-space: nowrap; transform: translateX(-50%); color: var(--teal-700); font-size: .63rem; letter-spacing: .2em; font-weight: 750; }
.product-phone { position: relative; width: 240px; padding: 7px; background: #052943; border: 1px solid #164763; border-radius: 30px; box-shadow: 16px 30px 55px #133e5424; transform: rotate(3deg); overflow: hidden; }
.product-phone picture { display: block; overflow: hidden; height: 520px; border-radius: 23px; }
.product-phone img { width: 100%; height: auto; }
.product-note { position: absolute; bottom: 75px; left: 0; display: flex; align-items: center; gap: 12px; padding: 15px 17px; border: 1px solid #dce7e7; background: #ffffffed; border-radius: 15px; box-shadow: var(--shadow-sm); }
.product-note strong, .product-note span:not(.mini-icon) { display: block; }
.product-note strong { font-size: .8rem; }
.product-note span:not(.mini-icon) { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.mini-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--teal-700); background: var(--surface-cyan); border-radius: 10px; }
.product-caption { position: absolute; bottom: -5px; margin: 0; color: var(--muted); font-size: .68rem; text-align: center; }
.home-refresh .section { padding: 62px 0; }
.compact-heading { margin-bottom: 30px; }
.compact-heading h2 { margin-bottom: 0; font-size: clamp(1.85rem, 3.3vw, 2.7rem); }
.benefit-grid { display: grid; gap: 18px; }
.feature-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; color: var(--teal-700); background: var(--surface-cyan); border-radius: 14px; font-size: 1.8rem; }
.feature-card h3 { max-width: 260px; font-size: 1.25rem; line-height: 1.25; }
.feature-card p { color: var(--muted); font-size: .93rem; }
.feature-card .text-link { font-size: .81rem; }
.workflow-grid { display: grid; gap: 32px; }
.workflow-grid h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); }
.workflow-list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: flex; gap: 20px; }
.workflow-list li > span { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid #bdded9; border-radius: 50%; color: var(--teal-700); font-size: .85rem; font-weight: 750; }
.workflow-list h3 { margin: 0 0 5px; font-size: 1.12rem; }
.workflow-list p { margin: 0; color: var(--muted); font-size: .92rem; }
.heading-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: end; }
.heading-row > .text-link { font-size: .88rem; }
.plan-pair { display: grid; gap: 20px; }
.plan-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.plan-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 22px; }
.plan-name { color: var(--navy-900); font-size: 1.7rem; font-weight: 800; letter-spacing: -.05em; }
.plan-heading .tag { padding: 5px 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; }
.plan-card h3 { font-size: 1.4rem; }
.plan-limit { margin-bottom: 8px; color: var(--muted); font-size: .95rem; }
.check-list { margin: 14px 0 25px; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 7px 0 7px 24px; font-size: .92rem; }
.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--teal-700); font-weight: 800; }
.plan-card > .button { align-self: start; margin-top: auto; }
.plan-card--pro { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
.plan-card--pro .plan-name, .plan-card--pro h3 { color: #fff; }
.plan-card--pro .tag { color: var(--cyan-100); background: #153a59; border-color: #376079; }
.plan-card--pro .plan-limit, .plan-card--pro small { color: #cadae6; }
.plan-card--pro .check-list li::before { color: var(--cyan-400); }
.plan-card--pro small { display: block; margin-top: 12px; font-size: .72rem; }
.home-resources { background: #f1f7f8; }
.resource-preview { display: grid; gap: 14px; }
.resource-preview > a { position: relative; padding: 24px 42px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s ease, transform .2s ease; }
.resource-preview > a:hover { transform: translateY(-3px); border-color: var(--teal-700); }
.resource-preview span { color: var(--teal-700); font-size: .72rem; font-weight: 750; }
.resource-preview h3 { margin: 12px 0 0; font-size: 1.15rem; line-height: 1.35; }
.resource-preview b { position: absolute; right: 20px; top: 24px; color: var(--teal-700); }
.download-panel { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 32px; padding: 32px; color: #fff; background: var(--navy-950); border-radius: 22px; }
.download-panel .eyebrow { color: var(--cyan-400); }
.download-panel h2 { margin-bottom: 10px; color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.25rem); }
.download-panel p:last-child { margin: 0; color: #c1d1df; font-size: .9rem; }
@media(min-width:700px) { .plan-pair { grid-template-columns: repeat(2,minmax(0,1fr)); } .benefit-grid, .resource-preview { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(min-width:860px) { .home-hero { padding: 38px 0 44px; } .home-hero-grid { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; } .home-product { padding: 34px 0; } .product-phone { width: 260px; } .product-phone picture { height: 550px; } .workflow-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; } .home-refresh .section { padding: 72px 0; } }
@media(max-width:419px) { .home-copy h1 { font-size: 2.7rem; } .home-copy .button { width: 100%; font-size: .86rem; padding-inline: 12px; } .hero-tags { margin-top: 24px; } .product-note { left: 0; bottom: 65px; } .plan-card, .feature-card { padding: 24px; } .download-panel { padding: 25px 20px; } .download-panel .button { width: 100%; font-size: .84rem; } }