/* Tella — refined product direction: quiet confidence, serious technology. */
:root {
  --ink: #15242c;
  --forest: #132b34;
  --forest-2: #225b57;
  --green: #56b99c;
  --pale: #f3f5f5;
  --muted: #65757b;
  --line: #dde4e3;
  --serif: 'Manrope', 'DM Sans', sans-serif;
}

html { scroll-padding-top: 78px; }
body { background: #f3f5f5; color: var(--ink); }
::selection { background: #a0e3ca; color: #10242b; }
.ambient-grain { opacity: .06; mix-blend-mode: soft-light; }
.header { height: 80px; background: #111e26; border-bottom: 1px solid rgba(222,255,247,.105); }
.brand { color: #effaf7; font-size: 27px; letter-spacing: -1.75px; }
.brand-symbol { background: #b1efce; color: #10262e; border-radius: 10px; }
.brand-period { color: #7cddb8; }
.nav-links a { color: #a9bbb9; font-size: 11px; letter-spacing: .04em; }
.nav-links a:hover { color: #fff; }
.nav-cta { color: #e5f8f0; border: 1px solid rgba(159,219,195,.42); padding: 12px 17px; }
.nav-cta:hover { background: rgba(143,219,186,.13); }

.hero {
  color: #f2f7f5;
  background:
    radial-gradient(circle at 75% 45%, rgba(35,107,90,.3), transparent 36%),
    radial-gradient(circle at 12% 80%, rgba(40,92,89,.15), transparent 42%),
    #111e26;
}
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image: linear-gradient(rgba(178,227,210,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(178,227,210,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to right, transparent 24%, black 100%);
}
.hero-orb-one { background: #24675a; opacity: .18; filter: blur(100px); }
.hero-orb-two { background: #3e927c; opacity: .1; filter: blur(100px); }
.hero-grid { grid-template-columns: 51% 49%; min-height: 739px; }
.hero-copy { padding: 98px 0 70px; }
.eyebrow { color: #37695e; font-size: 10px; letter-spacing: 2.25px; }
.eyebrow-dot { background: #64d7ac; box-shadow: 0 0 0 4px rgba(100,215,172,.11); }
.hero .eyebrow { color: #a4d7c5; }
.hero h1 { margin-top: 31px; margin-bottom: 25px; max-width: 650px; font-size: clamp(49px, 5.1vw, 74px); line-height: 1.085; font-weight: 750; letter-spacing: -.075em; }
.hero h1 em, .section h2 em, .interlude em, .closing h2 em, .principles-heading h2 em {
  font-family: var(--sans);
  font-style: normal;
  letter-spacing: -.07em;
  font-weight: 650;
  color: #469e83;
}
.hero h1 em { color: #9eeacb; }
.hero-description { color: #afc1c3; font-weight: 450; font-size: 15.5px; max-width: 490px; line-height: 1.85; }
.hero-actions { margin-top: 36px; }
.button { font-size: 11px; letter-spacing: .015em; }
.button-primary { background: #a4e7c8; color: #11252c; box-shadow: 0 13px 38px rgba(19,29,35,.2); }
.button-primary:hover { background: #c1f7dc; box-shadow: 0 18px 44px rgba(6,21,18,.34); }
.button-text { color: #dfede9; }
.play-ring { border-color: #47645f; color: #abdac8; font-size: 16px; }
.hero-points { margin-top: 34px; color: #a5b9b7; font-size: 10px; gap: 21px; }
.hero-points i { color: #8be4bb; }
.hero-tech-note { display: inline-flex; align-items: center; gap: 13px; margin-top: 54px; padding: 15px 20px 15px 15px; border: 1px solid rgba(153,217,197,.19); background: rgba(182,232,213,.055); border-radius: 12px; backdrop-filter: blur(12px); }
.tech-note-icon { display: grid; place-items: center; width: 31px; height: 31px; font-size: 17px; background: #203f42; color: #a1e8c6; border-radius: 8px; }
.hero-tech-note strong, .hero-tech-note small { display: block; }
.hero-tech-note strong { font-size: 11px; letter-spacing: .01em; color: #e4f5ed; }
.hero-tech-note small { font-size: 9px; color: #8da9a4; margin-top: 4px; }
.hero-visual { min-height: 700px; }
.hero-halo { top: 85px; background: radial-gradient(circle at 48% 51%, rgba(108,198,159,.26) 0, rgba(66,154,125,.17) 44%, transparent 70%); }
.hero-halo:after { border-color: rgba(158,233,199,.12); }
.hero-sparkle { color: #5c9f88; }
.phone-wrap { top: 80px; filter: drop-shadow(0 46px 57px rgba(0,0,0,.32)); }
.phone { border-color: #0a151d; box-shadow: 0 0 0 1px rgba(151,225,200,.14), inset 0 0 0 1px #e3e9e5; }
.voice-disc { background: linear-gradient(145deg,#d3f3e5,#e5eff2); }
.voice-disc-inner { background: #1d6a60; }
.phone-brand { color: #31766b; }
.float-note { background: #f7faf9; box-shadow: 0 22px 48px rgba(2,15,21,.33); border-color: rgba(203,238,228,.85); }
.float-note-icon, .insight-tiny-icon { background: #dff1ec; color: #297e67; }
.floating-insight { background: rgba(26,46,54,.97); border-color: rgba(162,225,202,.25); box-shadow: 0 25px 58px rgba(0,0,0,.28); }
.floating-insight strong { color: #f1faf6; }
.insight-desc { color: #adc6c2; }
.insight-overline { color: #8dd2b6; }
.insight-tick { color: #9ee9c8; }
.hero-corner-label { color: #90afa7; font: italic 12px 'DM Sans', sans-serif; }
.hero-bottom-rule { border-top: 1px solid rgba(159,218,200,.15); color: #7b9997; }

.audience-band { background: #172730; border-top: 1px solid rgba(164,226,200,.09); color: #dcebe8; }
.audience-inner { display: flex; min-height: 101px; gap: 39px; align-items: center; justify-content: space-between; }
.audience-caption { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; color: #77a79d; flex-shrink: 0; }
.audience-types { display: flex; gap: clamp(13px, 3vw, 39px); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.audience-types>span { white-space: nowrap; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; color: #d5e9e4; }
.audience-types>span>span { font-size: 21px; color: #84d4b4; font-weight: 400; }

.section { padding-top: 115px; padding-bottom: 115px; }
.section h2 { font-size: clamp(42px,4.4vw,63px); letter-spacing: -.07em; line-height: 1.12; }
.how { background: #f3f5f5; }
.section-intro p { color: #667981; }
.steps-grid { gap: 14px; margin-top: 56px; }
.step { background: #fff; border: 1px solid #e2e9e7; box-shadow: 0 8px 24px rgba(24,46,50,.018); border-radius: 13px; }
.step:hover { box-shadow: 0 22px 35px rgba(24,46,50,.075); }
.step-number { color: #87979a; font-family: 'DM Sans',sans-serif; letter-spacing: .04em; }
.step-icon { background: #e6f2ed; color: #327f6d; }
.step p { color: #708188; }
.step-foot { color: #307d69; }

.interlude { background: #17272f; color: #ecf5f1; border-top: 1px solid #263c42; }
.interlude-inner { min-height: 307px; }
.interlude-star { color: #8bd8b8; }
.interlude em { color: #9fe8c7; }
.interlude-small { color: #7ca89e; }

.preview-section { background: #fcfdfc; }
.preview-copy>p { color: #64777e; }
.feature-bullet { background: #e4f2ec; color: #2c826a; }
.preview-feature div span { color: #788a90; }
.preview-notice { border-color: #e2e9e8; color: #8a9b9b; }
.preview-demo { background: #fff; border: 1px solid #dfe8e5; box-shadow: 0 35px 90px rgba(17,38,40,.105); border-radius: 18px; }
.demo-overline { color: #397e6c; }
.demo-status { color: #688c80; }
.scenario-tabs { background: #eef3f1; }
.scenario-tab { color: #6c7f82; }
.scenario-tab.active { color: #215b50; }
.chat-avatar { background: #e0f1e8; color: #287d67; }
.bubble-ai { background: #edf3f2; color: #405d5b; }
.bubble-customer { background: #1c6157; }
.demo-result { background: #edf5f1; }
.result-label, .result-heading { color: #397966; }
.result-row p { color: #697f7b; }
.demo-footer button { color: #246c60; }

.link-section { background: #ecf0f0; overflow: hidden; }
.link-layout { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 65px; }
.concept-frame { background: #182a33; border: 1px solid #38525a; border-radius: 24px; padding: 48px 31px 24px; position: relative; min-width: 0; box-shadow: 0 35px 75px rgba(19,40,45,.19); isolation: isolate; }
.concept-frame:before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 7% 15%,rgba(113,207,174,.24),transparent 51%), radial-gradient(circle at 100% 90%,rgba(65,128,122,.22),transparent 49%); }
.concept-frame:after { content: ''; width: 176px; height: 176px; border: 1px solid rgba(180,239,213,.11); border-radius: 50%; position: absolute; top: -95px; right: -75px; }
.concept-window { overflow: hidden; position: relative; border: 1px solid rgba(228,244,240,.2); border-radius: 13px; background: #f5f5f5; box-shadow: 0 27px 57px rgba(0,0,0,.23); transform: rotate(-2deg); }
.concept-window-bar { height: 42px; background: #f9faf9; border-bottom: 1px solid #dfe7e6; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; gap: 9px; color: #70817f; font: 700 8px 'DM Sans',sans-serif; letter-spacing: 1.3px; }
.window-dots { display: flex; gap: 5px; }
.window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #cbd5d4; }
.window-dots span:first-child { background: #9fcfbb; }
.concept-window-icon { font-size: 14px; color: #59877a; }
.concept-screenshot { display: block; width: 100%; height: auto; background: #f4f4f4; }
.concept-stamp { display: inline-block; font-size: 10px; margin-top: 36px; color: #ade6cf; letter-spacing: 1.4px; font-weight: 800; }
.concept-side-detail { float: right; color: #6d9b96; font-size: 9px; margin-top: 37px; letter-spacing: 1px; font-weight: 750; }
.link-copy h2 { margin-top: 24px; }
.link-copy p { color: #657980; }
.simple-proof { display: flex; gap: 14px; align-items: center; margin-top: 29px; border-top: 1px solid #d1dddb; padding-top: 22px; }
.simple-proof-mark { flex: 0 0 37px; height: 37px; display: grid; place-items: center; background: #dbece4; color: #1a6959; border-radius: 10px; font-size: 22px; }
.simple-proof strong, .simple-proof small { display: block; }
.simple-proof strong { font-size: 12px; color: #1c3438; }
.simple-proof small { margin-top: 5px; font-size: 11px; color: #70878b; line-height: 1.6; }
.underlined-link { color: #1f6559; border-bottom-color: #7db7a6; }

.principles-section { background: #14252d; color: #eff7f2; padding: 112px 0 104px; }
.principles-heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 75px; }
.principles-heading .eyebrow { grid-column: 1 / -1; color: #95cbb8; margin-bottom: -39px; }
.principles-heading h2 { font-size: clamp(40px,4.1vw,60px); letter-spacing: -.07em; line-height: 1.12; }
.principles-heading h2 em { color: #a7e5c9; }
.principles-heading>p { font-size: 13px; line-height: 1.8; max-width: 390px; color: #9fbab6; margin-bottom: 3px; }
.principles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 53px; }
.principles-grid article { min-height: 224px; background: rgba(188,241,218,.045); border: 1px solid rgba(177,235,208,.14); border-radius: 12px; padding: 24px; }
.principle-number { font: 750 9px 'DM Sans',sans-serif; letter-spacing: 1.4px; color: #89bbae; }
.principle-symbol { display: block; font-size: 31px; color: #83d9b7; margin-top: 21px; }
.principles-grid h3 { font-size: 15px; letter-spacing: -.35px; margin-top: 10px; }
.principles-grid p { font-size: 11px; color: #a0b9b4; line-height: 1.8; margin-top: 8px; max-width: 300px; }
.principles-disclaimer { margin-top: 19px; font-size: 10px; color: #6f9992; }

.pricing { background: #f3f5f4; }
.pricing-intro p { color: #697d82; }
.price-free { background: #fff; border-color: #dfe8e5; }
.price-paid { background: #152d35; box-shadow: 0 28px 55px rgba(14,41,47,.17); }
.price-card>p { color: #71848a; }
.price-paid>p { color: #b4cbc9; }
.price-paid .price-amount small { color: #acd7c6; }
.price-paid li:before { background: #2b5853; color: #c1f4da; }
.price-button.light { background: #e8f1ed; color: #1d594e; }
.price-button.dark { background: #a5e6c6; color: #102c2e; }
.popular-pill { background: rgba(167,232,198,.13); color: #d6ffed; }
.pricing-disclaimer { color: #819494; }
.faq { background: #fcfdfc; }
.faq-layout>div:first-child p,.faq-list details p { color: #76878d; }
.faq-list,.faq-list details { border-color: #d8e4e1; }
.faq-list summary span { color: #397966; }
.closing { background: #101f27; }
.closing-glow { background: radial-gradient(ellipse,rgba(49,143,116,.26),transparent 70%); }
.closing-sparkle { color: #97e2be; }
.closing .eyebrow { color: #9bceb9; }
.closing h2 em { color: #a8eccd; }
.closing p { color: #b0c7c2; }
.button-closing { background: #a7e8c9; color: #133038; }
.closing-note { color: #72988f; }
.footer { background: #101f27; border-top: 1px solid rgba(155,217,195,.16); }
.footer-inner>span { color: #819e99; }
.footer .brand { color: #ebf7f2; }
.toast { background: #152f37; }

@media (max-width: 1120px) {
  .hero h1 { font-size: clamp(46px,5.3vw,66px); }
  .hero-tech-note { margin-top: 32px; }
  .audience-inner { gap: 20px; }
  .audience-types { gap: 15px; }
  .audience-types>span { font-size: 10px; }
  .link-layout { gap: 36px; }
  .concept-frame { padding: 34px 20px 20px; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(44px,5.8vw,59px); }
  .hero-copy { padding-top: 85px; }
  .hero-tech-note small { max-width: 235px; line-height: 1.5; }
  .audience-inner { padding-top: 23px; padding-bottom: 23px; flex-wrap: wrap; justify-content: center; }
  .audience-types { justify-content: center; }
  .link-layout { grid-template-columns: 1fr; gap: 51px; }
  .concept-frame { max-width: 690px; width: 100%; margin: 0 auto; padding: 44px 34px 25px; }
  .link-copy { max-width: 630px; margin: 0 auto; }
  .principles-heading { column-gap: 35px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 70px; }
  .header { height: 72px; }
  .hero-grid { min-height: 0; }
  .hero-copy { padding: 72px 0 9px; }
  .hero h1 { font-size: clamp(47px,9.3vw,67px); line-height: 1.08; }
  .hero-tech-note { margin-top: 31px; }
  .hero-visual { min-height: 530px; }
  .hero-bottom-rule { color: #7d9995; }
  .audience-caption { width: 100%; text-align: center; }
  .audience-types { gap: 14px 22px; }
  .audience-types>span { font-size: 10px; }
  .section { padding: 89px 0; }
  .step { min-height: 244px; }
  .interlude-inner { min-height: 260px; }
  .interlude-small { text-align: center; }
  .principles-section { padding: 84px 0; }
  .principles-heading { grid-template-columns: 1fr; gap: 18px; }
  .principles-heading .eyebrow { grid-column: 1; margin: 0 0 8px; }
  .principles-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 35px; }
  .principles-grid article { min-height: 0; padding: 23px; }
  .principle-symbol { margin-top: 12px; }
  .concept-frame { padding: 35px 19px 20px; }
  .concept-window-bar { height: 34px; font-size: 7px; }
  .concept-stamp { margin-top: 23px; }
  .concept-side-detail { margin-top: 23px; }
  .closing h2 { font-size: clamp(45px,8.5vw,62px); }
}
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(42px,10.2vw,52px); }
  .hero-points { gap: 10px; }
  .hero-tech-note { padding: 11px; width: 100%; }
  .hero-tech-note strong { font-size: 10px; }
  .hero-tech-note small { font-size: 8px; }
  .audience-types { display: grid; grid-template-columns: repeat(2,1fr); width: 100%; gap: 15px 10px; }
  .audience-types>span { font-size: 9px; }
  .concept-frame { padding: 27px 12px 18px; }
  .concept-window-bar { padding: 0 8px; letter-spacing: .5px; font-size: 6px; }
  .concept-stamp { font-size: 8px; }
  .concept-side-detail { font-size: 7px; }
  .principles-heading h2 { font-size: 38px; }
}