/*
Theme Name: STR Copilot AI
Theme URI: https://strcopilotai.com
Author: STR Copilot AI
Description: Custom product marketing theme for STR Copilot AI.
Version: 1.0.3
Text Domain: str-copilot-ai
*/

:root {
  --sc-bg: #090d16;
  --sc-bg-soft: #0d1421;
  --sc-panel: #101a2a;
  --sc-panel-2: #0c1726;
  --sc-cyan: #38bdf8;
  --sc-cyan-soft: #8adcfb;
  --sc-green: #84cc16;
  --sc-white: #f6fbff;
  --sc-muted: #94a3b8;
  --sc-line: rgba(148, 163, 184, 0.17);
  --sc-max: 1180px;
  --sc-radius: 18px;
  --sc-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sc-bg); color: var(--sc-white); font-family: "Space Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.admin-bar .site-header { top: 32px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sc-shell { width: min(var(--sc-max), calc(100% - 48px)); margin-inline: auto; }
.sc-section { position: relative; padding: 112px 0; }
.sc-section--soft { background: var(--sc-bg-soft); }
.sc-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--sc-green); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.sc-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sc-title { max-width: 760px; margin: 0; color: var(--sc-cyan); font-size: clamp(38px, 5vw, 64px); line-height: 1.03; letter-spacing: -.045em; }
.sc-copy { max-width: 690px; color: var(--sc-muted); font-size: 18px; line-height: 1.75; }
.sc-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--sc-green); border-radius: 8px; background: var(--sc-green); color: #0b1405; font-size: 14px; font-weight: 700; box-shadow: 0 0 34px rgba(132, 204, 22, .12); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.sc-button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(132, 204, 22, .2); }
.sc-button--ghost { border-color: rgba(56, 189, 248, .36); background: rgba(56, 189, 248, .05); color: var(--sc-cyan); box-shadow: none; }
.sc-button--sm { min-height: 42px; padding-inline: 18px; }
.sc-arrow { font-size: 18px; line-height: 1; }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--sc-line); background: rgba(9, 13, 22, .86); backdrop-filter: blur(18px); }
.site-header__inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 28px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.site-brand__mark { position: relative; width: 35px; height: 35px; border: 1px solid rgba(56, 189, 248, .4); border-radius: 9px; background: linear-gradient(145deg, rgba(56,189,248,.16), rgba(132,204,22,.06)); }
.site-brand__mark::before, .site-brand__mark::after { content: ""; position: absolute; border-radius: 20px; background: var(--sc-cyan); box-shadow: 0 0 16px rgba(56,189,248,.7); }
.site-brand__mark::before { width: 18px; height: 2px; left: 8px; top: 11px; transform: rotate(-35deg); }
.site-brand__mark::after { width: 14px; height: 2px; right: 7px; bottom: 10px; background: var(--sc-green); transform: rotate(-35deg); }
.site-brand__name { color: var(--sc-white); letter-spacing: -.02em; }
.site-brand__name span { color: var(--sc-cyan); }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.sc-button) { color: #c8d5e4; font-size: 14px; transition: color .2s ease; }
.site-nav a:not(.sc-button):hover { color: var(--sc-cyan); }
.site-menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--sc-line); border-radius: 8px; background: transparent; color: var(--sc-cyan); }
.site-menu-toggle span, .site-menu-toggle span::before, .site-menu-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; }
.site-menu-toggle span { position: relative; }
.site-menu-toggle span::before, .site-menu-toggle span::after { content: ""; position: absolute; left: 0; }
.site-menu-toggle span::before { top: -6px; }.site-menu-toggle span::after { top: 6px; }

.hero { min-height: 790px; display: flex; align-items: center; overflow: hidden; padding: 104px 0 92px; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to right, black, transparent 78%); }
.hero::after { content: ""; position: absolute; width: 580px; height: 580px; right: -180px; top: 20px; border-radius: 50%; background: rgba(56,189,248,.1); filter: blur(120px); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 74px; align-items: center; }
.hero h1 { max-width: 760px; margin: 0 0 26px; color: var(--sc-cyan); font-size: clamp(48px, 6.1vw, 80px); line-height: .98; letter-spacing: -.06em; }
.hero h1 span { color: var(--sc-white); }
.hero__copy { max-width: 660px; margin: 0 0 34px; color: #a8b6c8; font-size: 19px; line-height: 1.75; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 24px; margin-top: 32px; color: var(--sc-muted); font-size: 12px; }
.hero__trust span { display: flex; align-items: center; gap: 7px; }
.hero__trust i { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-green); box-shadow: 0 0 12px rgba(132,204,22,.8); }

.ai-console { position: relative; border: 1px solid rgba(56,189,248,.28); border-radius: 22px; background: rgba(12,23,38,.92); box-shadow: var(--sc-shadow), inset 0 1px rgba(255,255,255,.04); overflow: hidden; }
.ai-console::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(56,189,248,.06), transparent 35%, rgba(132,204,22,.03)); pointer-events: none; }
.console__top { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--sc-line); }
.console__dots { display: flex; gap: 6px; }.console__dots i { width: 7px; height: 7px; border-radius: 50%; background: #344155; }.console__dots i:last-child { background: var(--sc-green); box-shadow: 0 0 10px rgba(132,204,22,.7); }
.console__status { color: var(--sc-green); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.console__body { padding: 24px; }
.console__eyebrow { color: var(--sc-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.console__score { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 19px 0 24px; }
.console__score strong { color: var(--sc-cyan); font-size: 62px; line-height: .8; letter-spacing: -.06em; }.console__score strong small { font-size: 18px; color: var(--sc-muted); }.console__score span { color: var(--sc-green); font-size: 14px; font-weight: 700; }
.console__chart { display: flex; height: 132px; align-items: end; gap: 9px; padding: 16px 14px 0; border: 1px solid var(--sc-line); border-radius: 12px; background: rgba(9,13,22,.45); }
.console__chart i { flex: 1; min-height: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, rgba(56,189,248,.25), var(--sc-cyan)); box-shadow: 0 0 14px rgba(56,189,248,.12); }
.console__chart i:nth-child(3n) { background: linear-gradient(to top, rgba(132,204,22,.2), var(--sc-green)); }
.console__metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.console__metric { padding: 14px; border: 1px solid var(--sc-line); border-radius: 10px; }.console__metric span { display: block; color: var(--sc-muted); font-size: 10px; text-transform: uppercase; }.console__metric strong { display: block; margin-top: 7px; color: var(--sc-green); font-size: 18px; }

.problem__grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 86px; align-items: start; }
.problem__sticky { position: sticky; top: 120px; }
.problem__sticky .sc-title { font-size: clamp(40px, 4.6vw, 58px); }
.problem__items { display: grid; gap: 14px; }
.problem-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 28px; border: 1px solid var(--sc-line); border-radius: 14px; background: rgba(16,26,42,.65); }
.problem-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: rgba(56,189,248,.08); color: var(--sc-cyan); font-weight: 700; }
.problem-card h3 { margin: 0 0 8px; color: var(--sc-cyan-soft); font-size: 19px; }.problem-card p { margin: 0; color: var(--sc-muted); line-height: 1.65; }

.products__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 54px; }.products__head .sc-copy { margin: 0; max-width: 480px; }
.product-stack { display: grid; gap: 28px; }
.product-card { position: relative; display: grid; grid-template-columns: .84fr 1.16fr; min-height: 620px; border: 1px solid rgba(56,189,248,.24); border-radius: 22px; background: var(--sc-panel-2); overflow: hidden; }
.product-card:nth-child(2) { grid-template-columns: 1.16fr .84fr; border-color: rgba(132,204,22,.24); }.product-card:nth-child(2) .product-card__intro { order: 2; }
.product-card__intro { display: flex; flex-direction: column; justify-content: space-between; padding: 52px 44px; background: linear-gradient(145deg, rgba(56,189,248,.11), rgba(9,13,22,.1)); }
.product-card:nth-child(2) .product-card__intro { background: linear-gradient(145deg, rgba(132,204,22,.09), rgba(9,13,22,.1)); }
.product-card__number { color: var(--sc-green); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.product-card h3 { margin: 22px 0 18px; color: var(--sc-cyan); font-size: clamp(36px, 4.5vw, 58px); line-height: 1; letter-spacing: -.045em; }.product-card:nth-child(2) h3 { color: var(--sc-green); }
.product-card__intro p { color: #a6b4c5; font-size: 17px; line-height: 1.7; }
.product-card__engine { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--sc-line); color: var(--sc-white); font-size: 14px; line-height: 1.6; }.product-card__engine strong { color: var(--sc-green); }
.product-card__details { padding: 46px 40px; }
.product-card__details h4 { margin: 0 0 24px; color: var(--sc-white); font-size: 20px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.feature { min-width: 0; padding: 19px 0; border-top: 1px solid var(--sc-line); }.feature small { color: var(--sc-green); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.feature strong { display: block; margin: 8px 0 7px; color: var(--sc-cyan-soft); font-size: 15px; }.feature p { margin: 0; color: var(--sc-muted); font-size: 13px; line-height: 1.55; }

.workflow__grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 90px; align-items: center; }.workflow__steps { position: relative; display: grid; gap: 15px; }.workflow__steps::before { content: ""; position: absolute; left: 27px; top: 35px; bottom: 35px; width: 1px; background: rgba(56,189,248,.28); }.workflow-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; }.workflow-step__num { z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(56,189,248,.35); border-radius: 50%; background: var(--sc-bg-soft); color: var(--sc-cyan); font-weight: 700; }.workflow-step__body { padding: 24px 26px; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-panel); }.workflow-step h3 { margin: 0 0 7px; color: var(--sc-cyan-soft); font-size: 18px; }.workflow-step p { margin: 0; color: var(--sc-muted); font-size: 14px; line-height: 1.6; }

.proof__notice { margin-bottom: 26px; color: var(--sc-muted); font-size: 12px; }.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.proof-card { padding: 30px; border: 1px solid var(--sc-line); border-radius: 16px; background: var(--sc-panel); }.proof-card__metric { color: var(--sc-green); font-size: 44px; font-weight: 700; letter-spacing: -.04em; }.proof-card blockquote { margin: 22px 0; color: #d5e0ec; font-size: 16px; line-height: 1.65; }.proof-card__source { color: var(--sc-muted); font-size: 12px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }.price-card { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--sc-line); border-radius: 16px; background: var(--sc-panel); }.price-card--featured { border-color: var(--sc-green); box-shadow: 0 0 50px rgba(132,204,22,.08); }.price-card__badge { position: absolute; top: 18px; right: 18px; padding: 6px 9px; border-radius: 20px; background: rgba(132,204,22,.12); color: var(--sc-green); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.price-card h3 { margin: 0; color: var(--sc-cyan); font-size: 25px; }.price-card__range { margin: 8px 0 25px; color: var(--sc-muted); font-size: 13px; }.price-card__price { margin-bottom: 26px; color: var(--sc-white); font-size: 30px; font-weight: 700; }.price-card__price small { color: var(--sc-muted); font-size: 12px; font-weight: 400; }.price-card ul { display: grid; gap: 13px; margin: 0 0 30px; padding: 0; list-style: none; }.price-card li { display: flex; gap: 9px; color: #b8c5d3; font-size: 13px; line-height: 1.5; }.price-card li::before { content: "✓"; color: var(--sc-green); font-weight: 700; }.price-card .sc-button { margin-top: auto; }

.demo { overflow: hidden; }.demo::before { content: ""; position: absolute; width: 480px; height: 480px; left: -200px; bottom: -260px; border-radius: 50%; background: rgba(56,189,248,.1); filter: blur(90px); }.demo__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; gap: 76px; align-items: center; }.demo__form { padding: 34px; border: 1px solid rgba(56,189,248,.28); border-radius: 18px; background: var(--sc-panel); box-shadow: var(--sc-shadow); }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.form-field--full { grid-column: 1 / -1; }.form-field label { display: block; margin-bottom: 8px; color: #c8d5e4; font-size: 12px; }.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--sc-line); border-radius: 8px; outline: none; background: #0a111d; color: var(--sc-white); padding: 13px 14px; }.form-field textarea { min-height: 112px; resize: vertical; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--sc-cyan); box-shadow: 0 0 0 3px rgba(56,189,248,.08); }.form-status { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(132,204,22,.3); border-radius: 8px; background: rgba(132,204,22,.08); color: #c9f48a; font-size: 13px; }

.site-footer { padding: 54px 0 30px; border-top: 1px solid var(--sc-line); background: #070b12; }.site-footer__top { display: flex; align-items: start; justify-content: space-between; gap: 44px; padding-bottom: 40px; }.site-footer__copy { max-width: 460px; color: var(--sc-muted); font-size: 14px; line-height: 1.65; }.site-footer__links { display: flex; gap: 28px; color: #c4d0dd; font-size: 13px; }.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--sc-line); color: #64748b; font-size: 11px; }

.reveal { opacity: 1; transform: none; }

/* Coming soon */
.coming-soon { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 40px 0; background: var(--sc-bg); }.coming-soon::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(56,189,248,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.09) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%); }.coming-soon::after { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(56,189,248,.12); filter: blur(140px); }.coming-soon__card { position: relative; z-index: 1; width: min(790px, calc(100% - 40px)); padding: 58px; border: 1px solid rgba(56,189,248,.24); border-radius: 22px; background: rgba(12,23,38,.9); box-shadow: var(--sc-shadow); text-align: center; backdrop-filter: blur(12px); }.coming-soon__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 45px; }.coming-soon .site-brand { flex: 0 0 auto; justify-content: center; line-height: 1; }.coming-soon h1 { margin: 0 0 20px; color: var(--sc-cyan); font-size: clamp(46px, 7vw, 78px); line-height: 1; letter-spacing: -.055em; }.coming-soon__lead { max-width: 600px; margin: 0 auto 32px; color: #aebdcd; font-size: 18px; line-height: 1.7; }.coming-soon__status { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--sc-green); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }.coming-soon__status i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-green); box-shadow: 0 0 16px rgba(132,204,22,.9); }.coming-soon__form { display: flex; gap: 9px; max-width: 560px; margin: 0 auto; }.coming-soon__form input[type=email] { flex: 1; min-width: 0; border: 1px solid var(--sc-line); border-radius: 8px; outline: none; background: #090f1a; color: var(--sc-white); padding: 14px 16px; }.coming-soon__note { margin-top: 18px; color: #64748b; font-size: 11px; }

@media (max-width: 980px) {
  .site-nav { position: fixed; inset: 78px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 24px 28px; border-bottom: 1px solid var(--sc-line); background: rgba(9,13,22,.98); }
  .site-nav.is-open { display: flex; }.site-nav a:not(.sc-button) { padding: 14px 0; border-bottom: 1px solid var(--sc-line); }.site-nav .sc-button { margin-top: 18px; }.site-menu-toggle { display: inline-flex; }
  .hero__inner, .problem__grid, .workflow__grid, .demo__grid { grid-template-columns: 1fr; }.hero { min-height: auto; }.ai-console { max-width: 650px; }.problem__sticky { position: static; }.products__head { align-items: start; flex-direction: column; }.product-card, .product-card:nth-child(2) { grid-template-columns: 1fr; }.product-card:nth-child(2) .product-card__intro { order: 0; }.product-card__intro { min-height: 430px; }.proof-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }.proof-card:last-child, .price-card:last-child { grid-column: 1 / -1; }.site-footer__top { flex-direction: column; }
}
@media (max-width: 680px) {
  body.admin-bar .site-header { top: 0; }.sc-shell { width: min(100% - 30px, var(--sc-max)); }.sc-section { padding: 82px 0; }.hero { padding: 78px 0 70px; }.hero h1 { font-size: 48px; }.hero__trust { flex-direction: column; gap: 10px; }.console__metrics, .feature-grid, .proof-grid, .pricing-grid, .form-grid { grid-template-columns: 1fr; }.proof-card:last-child, .price-card:last-child, .form-field--full { grid-column: auto; }.product-card__intro, .product-card__details { padding: 36px 25px; }.product-card__intro { min-height: auto; }.workflow-step { grid-template-columns: 44px 1fr; gap: 13px; }.workflow-step__num { width: 44px; height: 44px; }.workflow__steps::before { left: 21px; }.demo__form { padding: 25px 20px; }.site-footer__links { flex-wrap: wrap; }.site-footer__bottom { align-items: start; flex-direction: column; }.coming-soon__card { padding: 42px 22px; }.coming-soon__eyebrow { flex-wrap: wrap; row-gap: 12px; margin-bottom: 36px; }.coming-soon__form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } }