/*
Theme Name: AssayGen
Theme URI: https://assaygen.com/
Author: AssayGen
Description: Lightweight four-page WordPress theme for AssayGen, based on the approved desktop website prototype.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: assaygen
*/

/* AssayGen desktop-first visual prototype
   Design tokens mirror tailwind.config.js for a simple Tailwind CSS hand-off.
   All page components share this stylesheet. */
:root {
  --ink: #1d322f;
  --ink-2: #2b4742;
  --teal: #279d90;
  --teal-bright: #43c1b5;
  --teal-dark: #168a7d;
  --mint: #e5f5f2;
  --mist: #f3faf8;
  --white: #ffffff;
  --body: #53736d;
  --line: #daebe7;
  --shadow: 0 14px 44px rgba(17, 55, 48, .065);
  --radius: 16px;
  --container: 1248px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.icon { display: block; width: 24px; height: 24px; flex: none; }
.container { width: min(calc(100% - 96px), var(--container)); margin-inline: auto; }
.site-header { height: 94px; background: rgba(255,255,255,.98); border-bottom: 1px solid #e4eeeb; position: relative; z-index: 20; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 33px; font-weight: 760; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.brand-mark { width: 42px; height: 42px; color: var(--ink); flex: none; }
.logo-accent { color: var(--teal); }
.main-nav { display: flex; align-items: center; gap: 52px; height: 100%; }
.nav-link { position: relative; display: inline-flex; height: 100%; align-items: center; font-size: 16px; font-weight: 540; transition: color .18s; }
.nav-link:hover, .nav-link.active { color: var(--teal); }
.nav-link.active { font-weight: 710; }
.nav-link.active::after { content: ""; height: 3px; background: var(--teal); bottom: -1px; left: 0; right: 0; position: absolute; border-radius: 6px 6px 0 0; }
.menu-toggle { display: none; }
.eyebrow { margin: 0 0 18px; font-size: 15px; line-height: 1.5; font-weight: 800; color: var(--teal); letter-spacing: .19em; }
h1, h2, p { margin-top: 0; }
.page-intro { padding: 103px 0 92px; }
.page-intro h1 { margin-bottom: 28px; max-width: 1000px; font-size: clamp(44px, 4.1vw, 64px); line-height: 1.11; font-weight: 750; letter-spacing: -.049em; }
.page-lead { max-width: 1050px; margin: 0; font-size: 20px; line-height: 1.77; color: var(--body); font-weight: 450; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-width: 214px; min-height: 62px; padding: 0 18px 0 28px; border: none; border-radius: 10px; font-size: 17px; font-weight: 740; line-height: 1; transition: transform .2s, background-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, .menu-toggle:focus-visible { outline: 3px solid #8ce7d9; outline-offset: 3px; }
.button-primary { color: var(--ink); background: var(--teal-bright); box-shadow: 0 10px 24px rgba(13, 60, 53, .14); }
.button-primary:hover { background: #68d4c8; box-shadow: 0 15px 30px rgba(13,60,53,.18); }
.button-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(17,63,57,.2); border-radius: 50%; }
.button-icon .icon { width: 17px; height: 17px; }
/* Home */
.hero { min-height: 680px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 44%, rgba(50,180,163,.1), transparent 30%), radial-gradient(circle at 5% 80%, rgba(57,130,113,.08), transparent 31%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: center; min-height: 680px; position: relative; padding-bottom: 73px; }
.hero-copy { padding: 72px 0 52px; position: relative; z-index: 2; }
.hero-eyebrow { color: var(--teal-bright); margin-bottom: 30px; }
.hero h1 { max-width: 800px; margin-bottom: 30px; font-weight: 770; line-height: 1.09; letter-spacing: -.055em; font-size: clamp(53px, 5vw, 76px); }
.hero h1 em { color: #a4e7dc; font-style: normal; }
.hero-description { max-width: 710px; margin-bottom: 36px; font-size: 19px; line-height: 1.68; color: #c2d8d2; font-weight: 460; }
.hero-art { height: 492px; width: 492px; justify-self: end; position: relative; margin: 12px -15px 0 0; }
.hero-art-halo { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-art-halo-a { inset: 3%; background: radial-gradient(circle, #36aa9e15 0%, #288b8133 42%, transparent 71%); }
.hero-art-halo-b { inset: 10%; background: linear-gradient(145deg, #2eaa9c14, transparent 75%); }
.hero-art-ring { position: absolute; border-radius: 50%; }
.hero-art-ring.outer { inset: 4%; border: 1px dashed #72ccc263; transform: rotate(-20deg); }
.hero-art-ring.middle { inset: 18%; border: 1px solid #61c5b552; }
.hero-art-ring.inner { inset: 33%; background: linear-gradient(150deg, #48bdaf, #247f77); box-shadow: 0 0 0 24px #278f8450, 0 0 0 65px #2dafa014, 0 30px 80px #071c1c30; }
.orbital-center { position: absolute; inset: 0; display: grid; place-items: center; }
.orbit-point { position: absolute; border-radius: 50%; z-index: 2; box-shadow: 0 0 0 7px #204c46; }
.orbit-one { width: 16px; height: 16px; background: #a4e7dc; top: 18%; left: 16%; }
.orbit-two { width: 12px; height: 12px; background: #4bc6b4; right: 7%; top: 52%; }
.orbit-three { width: 12px; height: 12px; background: #8de8d9; left: 42%; bottom: 4%; }
.hero-art-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #65cabe; opacity: .8; }
.spark-a { top: 7%; left: 52%; }.spark-b { top: 68%; left: 10%; }.spark-c { top: 88%; left: 82%; }
.benefits-section { position: relative; background: #fff; padding-bottom: 112px; }
.benefits-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; position: relative; top: -74px; margin-bottom: -74px; }
.benefit-card { background: var(--mint); padding: 37px 38px 42px; min-height: 283px; border: 1px solid #dcf0eb; border-radius: 15px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.benefit-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(15,76,68,.09); }
.benefit-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--teal); background: white; margin-bottom: 25px; }
.benefit-icon .icon { width: 27px; height: 27px; }
.benefit-card h2 { margin: 0 0 12px; font-size: 25px; font-weight: 750; letter-spacing: -.032em; }
.benefit-card p { margin: 0; font-size: 16.5px; color: var(--body); line-height: 1.65; }
/* About */
.team-section { padding: 80px 0 114px; background: var(--mist); border-top: 1px solid #e7f2ee; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.person-card { display: flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 208px; background: white; border: 1px solid #deeeea; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 23px rgba(17,55,48,.035); transition: transform .18s, box-shadow .18s; }
.person-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.person-content { min-width: 0; padding: 28px 10px 26px 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.person-icon { width: 42px; height: 42px; border-radius: 50%; color: white; background: var(--teal); display: grid; place-items: center; margin-bottom: 22px; }
.person-icon .icon { width: 21px; height: 21px; }
.person-name { font-size: clamp(17px,1.6vw,21px); line-height: 1.25; font-weight: 740; letter-spacing: -.025em; white-space: nowrap; }
.person-role { margin: 6px 0 0; font-size: 15px; line-height: 1.35; color: var(--teal-dark); font-weight: 600; }
.person-image-wrap { width: 39%; min-width: 120px; margin: 12px; margin-left: 0; border-radius: 9px; overflow: hidden; background: #bbded7; }
.person-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* Approach */
.approach-intro { padding-bottom: 85px; }
.process-section { padding: 98px 0 102px; background: var(--ink); color: var(--white); }
.steps-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 38px; position: relative; }
.steps-grid::before { content: ""; height: 1px; position: absolute; top: 44px; left: calc(12.5% - 5px); right: calc(12.5% - 5px); background: linear-gradient(90deg, transparent, #75cfc55c 9%, #75cfc55c 91%, transparent); }
.step { text-align: center; position: relative; }
.step-marker { height: 90px; display: grid; place-items: center; margin-bottom: 26px; }
.step-circle { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: white; box-shadow: 0 0 0 9px var(--ink); }
.step-circle .icon { width: 36px; height: 36px; }
.step-number { display: inline-block; margin: 0 0 10px; color: var(--teal-bright); font-size: 17px; font-weight: 800; }
.step h2 { font-size: 28px; font-weight: 740; margin: 0 0 16px; letter-spacing: -.032em; }
.step p { max-width: 240px; margin: 0 auto; line-height: 1.65; color: #c4d9d3; font-size: 16.5px; }
.details-section { background: white; padding: 88px 0 114px; }
.details-grid { display: grid; grid-template-columns: 1fr 2.12fr; gap: 22px; }
.detail-card { background: var(--mint); min-height: 211px; border-radius: 14px; padding: 34px 38px; }
.metric { margin: 0 0 22px; color: var(--teal); font-size: clamp(35px,3vw,46px); font-weight: 780; letter-spacing: -.045em; }
.timeframe > p:last-child { color: var(--body); margin: 0; font-size: 17px; }
.markets h2 { font-size: 19px; letter-spacing: -.017em; margin: 2px 0 27px; }
.market-list { display: flex; flex-wrap: wrap; gap: 11px; }
.market-list span { display: inline-flex; padding: 10px 15px; background: #fff; border: 1px solid #d0eae4; border-radius: 30px; font-size: 15px; color: #3f6961; white-space: nowrap; }
/* Contact */
.contact-layout { display: grid; grid-template-columns: 44% 56%; align-items: stretch; min-height: 770px; }
.contact-info-panel { background: var(--ink); color: white; position: relative; overflow: hidden; }
.contact-info-panel::before { content: ""; position: absolute; right: -230px; bottom: -370px; height: 670px; width: 670px; border: 1px solid #3f897b33; border-radius: 50%; box-shadow: 0 0 0 77px #3f897b0a,0 0 0 154px #3f897b07; }
.contact-info-inner { position: relative; z-index: 1; max-width: 590px; padding: 111px 74px 92px max(48px,calc((100vw - var(--container)) / 2)); }
.contact-info-inner h1 { font-size: clamp(46px, 4.2vw, 66px); letter-spacing: -.045em; line-height: 1.12; font-weight: 750; margin: 0 0 30px; }
.contact-description { color: #c3d7d1; font-size: 18px; line-height: 1.75; margin: 0; max-width: 450px; }
.contact-details { display: grid; gap: 28px; margin-top: 65px; }
.contact-detail { display: flex; gap: 17px; align-items: center; font-size: 16.5px; font-weight: 550; color: #e1f0ec; line-height: 1.65; }
a.contact-detail:hover { color: #a4e7dc; }
.contact-detail-icon { display: grid; place-items: center; width: 32px; flex: none; color: var(--teal-bright); }
.contact-detail-icon .icon { width: 30px; height: 30px; stroke-width: 1.7; }
.contact-form-panel { padding: 103px max(48px,calc((100vw - var(--container)) / 2)) 100px 84px; }
.form-content { width: 100%; max-width: 640px; }
.form-content h2 { font-size: 30px; letter-spacing: -.035em; margin-bottom: 44px; font-weight: 750; }
.field { margin-bottom: 27px; }
.field label { display: block; margin-bottom: 11px; font-size: 15px; font-weight: 670; color: #426b63; }
.field input, .field textarea { display: block; border: 1px solid #c9e3dc; background: #edf8f5; border-radius: 9px; width: 100%; outline: 0; color: var(--ink); padding: 15px 17px; font-size: 17px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field input { height: 58px; }
.field textarea { min-height: 168px; resize: vertical; }
.field input:focus, .field textarea:focus { background: white; border-color: var(--teal); box-shadow: 0 0 0 3px #48c9b72e; }
.submit-button { min-width: 228px; margin-top: 3px; }
/* Footer */
.site-footer { background: #162c29; color: white; padding: 52px 0 33px; }
.site-footer .logo { font-size: 28px; color: #f2faf7; }
.site-footer .brand-mark { width: 35px; height: 35px; color: #f2faf7; }
.site-footer .brand-mark rect:nth-of-type(2) { fill: #f2faf7; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 38px; border-bottom: 1px solid #42625a70; }
.footer-nav { display: flex; gap: 36px; color: #c0d8d1; font-size: 15px; }
.footer-nav a:hover, .footer-bottom a:hover { color: #a4e7dc; }
.footer-bottom { display: flex; gap: 14px; align-items: center; padding-top: 29px; font-size: 14.5px; color: #b5cfc8; }
.footer-dot { color: #7ea49a; }
/* Basic responsiveness so desktop prototypes also remain usable on other screens.
   Dedicated mobile art direction to be developed separately as requested. */
@media(max-width:1250px){.hero h1{font-size:clamp(52px,5.6vw,69px)}.hero-art{transform:scale(.88);transform-origin:right center;margin-right:-15px}.person-card{min-height:190px}.person-content{padding-left:20px}.person-image-wrap{min-width:104px}.person-name{white-space:normal}.contact-form-panel{padding-left:65px}.contact-info-inner{padding-right:40px}}
@media(max-width:960px){.container{width:min(calc(100% - 64px),var(--container))}.hero-grid{grid-template-columns:minmax(0,1fr);min-height:auto;gap:0;padding:76px 0 115px}.hero-copy{padding:0}.hero h1{font-size:clamp(50px,7.5vw,75px)}.hero-art{display:none}.benefits-grid{gap:14px}.benefit-card{padding:27px 25px 32px}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-grid{gap:18px}.step h2{font-size:24px}.details-grid{grid-template-columns:1fr 1.6fr}.contact-layout{grid-template-columns:42% 58%}.contact-info-inner{padding:90px 27px 80px 32px}.contact-form-panel{padding:90px 32px}.contact-description{font-size:16px}.contact-detail{font-size:14px}}
@media(max-width:680px){.site-header{height:76px}.container{width:calc(100% - 38px)}.logo{font-size:27px}.brand-mark{width:34px;height:34px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:43px;height:43px;background:transparent;border:0;padding:7px}.menu-toggle span{display:block;width:100%;height:2px;border-radius:2px;background:var(--ink)}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;height:auto;background:white;padding:15px 20px 22px;border-bottom:1px solid var(--line);box-shadow:0 15px 22px #14392f12;gap:0;flex-direction:column;align-items:stretch}.site-header.is-open .main-nav{display:flex}.nav-link{padding:13px 0;height:auto}.nav-link.active::after{display:none}.hero-grid{padding:75px 0 128px}.hero h1{font-size:clamp(42px,9vw,64px)}.hero-description{font-size:17px}.eyebrow{font-size:12px;letter-spacing:.15em}.benefits-grid{grid-template-columns:1fr;top:-60px;margin-bottom:-60px}.benefit-card{min-height:auto}.benefits-section{padding-bottom:64px}.page-intro{padding:73px 0 65px}.page-intro h1{font-size:42px}.page-lead{font-size:17px;line-height:1.75}.team-grid{grid-template-columns:1fr}.team-section{padding:46px 0 70px}.steps-grid{grid-template-columns:1fr;gap:55px}.steps-grid::before{display:none}.process-section{padding:75px 0}.details-section{padding:48px 0 72px}.details-grid{grid-template-columns:1fr}.detail-card{min-height:160px}.contact-layout{grid-template-columns:1fr}.contact-info-inner{padding:78px 22px 82px 19px}.contact-info-inner h1{font-size:46px}.contact-details{margin-top:45px}.contact-form-panel{padding:68px 19px 80px}.form-content h2{font-size:27px}.footer-top{align-items:flex-start;flex-direction:column}.footer-nav{flex-wrap:wrap;gap:17px 24px}.footer-bottom{flex-wrap:wrap;gap:8px;font-size:13px}.site-footer{padding-top:48px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* WordPress contact form feedback and honeypot */
.form-feedback { border-radius: 9px; padding: 15px 18px; margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.form-feedback.success { color: #155e51; background: #e2f5ed; border: 1px solid #9fdccb; }
.form-feedback.error { color: #782b24; background: #fff1ec; border: 1px solid #edb9ab; }
.assaygen-hp { position: absolute !important; left: -9999px !important; height: 1px !important; width: 1px !important; overflow: hidden !important; }
.screen-reader-text { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
/* Preserve a readable layout for normal WP pages outside the four landing templates. */
.generic-page { min-height: 50vh; padding: 88px 0 112px; }
.generic-page h1 { font-size: clamp(40px,5vw,65px); margin-bottom: 26px; }
.generic-page .entry-content { max-width: 800px; color: var(--body); font-size: 18px; line-height:1.7; }
.generic-page .entry-content a { text-decoration: underline; color: var(--teal-dark); }