/*==========================================================
SYNEURA HOME PAGE
ASSL v4 — Page Layer (Level 2)
Owns: hero, story sections, tour, phone mockup, CTA.
Shared tokens/typography/flow/layout primitives/helpers live
in core.css — this file only describes what makes Home unique.
==========================================================*/

:root{

/*----------------------------------------------------------
PAGE-SPECIFIC OVERRIDES
----------------------------------------------------------*/

--page-padding-top:90px;
--page-padding-bottom:90px;
--page-padding-inline:clamp(32px,5vw,80px);

--reading-width:100ch;

--hero-title-size:clamp(48px,4.6vw,67px);
--section-title-size:clamp(30px,3.4vw,48px);

--hero-line-height:.94;
--section-line-height:1.04;
--body-line-height:1.8;

--lead-width:620px;
--paragraph-width:900px;

--space-after-h1:20px;
--space-after-h2:16px;
--space-after-lede:28px;
--space-before-section:clamp(96px,10vw,160px);
--paragraph-gap:16px;

/*----------------------------------------------------------
HOME-ONLY DISPLAY TYPE
Letter-spacing on the hero/section headlines is a one-off
expressive choice for this landing page, not a repeated
pattern — kept page-specific rather than promoted.
----------------------------------------------------------*/

--hero-letter-spacing:-.04em;
--section-letter-spacing:-.03em;

--support-width:560px;

/*----------------------------------------------------------
HERO OFFSETS
----------------------------------------------------------*/

--hero-text-offset-x:0px;
--hero-text-offset-y:0px;
--hero-image-offset-x:0px;
--hero-image-offset-y:0px;

/*----------------------------------------------------------
PHONE
----------------------------------------------------------*/

--phone-width:360px;
--phone-height:740px;
--phone-padding:12px;
--phone-radius:38px;
--phone-scale:1;
--phone-rotate-x:2deg;
--phone-rotate-y:-4deg;

--glow-size:70%;
--glow-opacity:.28;
--glow-blur:120px;

/*----------------------------------------------------------
BUTTONS
----------------------------------------------------------*/

--space-after-buttons:28px;

}

/*==========================================================
PAGE SHELL
==========================================================*/

.home-page.page{

width:100%;

min-height:82svh;

padding-top:140px;

position:relative;

overflow:hidden;

scroll-margin-top:0;

}

.home-page .full-height{

min-height:100svh;

}

/*==========================================================
HERO
Consumes the shared .layout-60-40 primitive (same ratio as
this page always used — the old 1.2fr/.8fr and 60%/40% are
mathematically identical, so this is a like-for-like swap).
==========================================================*/

.home-page .wrap{

height:100%;

align-content:center;

}

.home-page .page-content{

max-width:var(--paragraph-width);

display:grid;

gap:16px;

transform:translate(

var(--hero-text-offset-x),

var(--hero-text-offset-y)

);

}

.home-page .page-content.centered,

.home-page .centered-actions{

max-width:720px;

margin:0 auto;

}

.home-page .page-content-two-col{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:start;

}

.home-page .page-visual{

display:flex;

justify-content:center;

}

/*==========================================================
TYPOGRAPHY
Sizes/line-heights/widths come from the token overrides
above via core's shared h1/h2/.lede/.scene-body. This page's
only unique typographic choices are letter-spacing and the
h1 max-width, expressed here.
==========================================================*/

.home-page h1{

letter-spacing:var(--hero-letter-spacing);

max-width:760px;

}

.home-page h2{

letter-spacing:var(--section-letter-spacing);

}

.home-page h3{

font-size:16px;

font-weight:600;

margin-bottom:8px;

}

.home-page .lede,

.home-page .scene-body,

.home-page .page-content p{

color:var(--muted);

}

.home-page .scene-body{

font-size:1.05rem;

max-width:var(--support-width);

}

/*==========================================================
CALL TO ACTION
Core's .actions already provides the flex row; this page
only adds the top margin and its centered variant.
==========================================================*/

.home-page .actions{

margin-top:var(--space-after-buttons);

}

.home-page .actions.centered-actions{

justify-content:center;

flex-direction:column;

}

.home-page .text-link{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:var(--white);

transition:color .25s ease;

}

.home-page .text-link:hover{

color:var(--cyan);

}

.home-page .text-link span{

color:var(--cyan);

}

/*==========================================================
HERO VISUAL / PHONE
==========================================================*/

.home-page .hero-visual{

display:flex;

justify-content:center;

align-items:center;

position:relative;

transform:translate(

var(--hero-image-offset-x),

var(--hero-image-offset-y)

);

}

.home-page .hero-visual::before,

.home-page .hero-visual::after{

content:"";

position:absolute;

width:var(--glow-size);

height:var(--glow-size);

border-radius:50%;

filter:blur(var(--glow-blur));

opacity:var(--glow-opacity);

z-index:0;

pointer-events:none;

}

.home-page .hero-visual::before{

top:-10%;

left:-6%;

background:var(--cyan);

}

.home-page .hero-visual::after{

bottom:-12%;

right:-6%;

background:var(--purple);

}

.home-page .device-shell{

width:var(--phone-width);

height:var(--phone-height);

padding:var(--phone-padding);

border-radius:var(--phone-radius);

border:1px solid rgba(255,255,255,.12);

background:

linear-gradient(

145deg,

rgba(12,19,38,.35),

rgba(5,8,22,.65)

);

box-shadow:var(--shadow);

backdrop-filter:blur(18px);

position:relative;

z-index:1;

transform:

perspective(1200px)

rotateY(var(--phone-rotate-y))

rotateX(var(--phone-rotate-x))

scale(var(--phone-scale));

animation:home-float 8s ease-in-out infinite;

}

.home-page .device-shell.shell-soft{

width:min(var(--phone-width),100%);

}

.home-page .device-shell img{

width:100%;

height:100%;

object-fit:contain;

border-radius:calc(var(--phone-radius) - 10px);

}

.home-page .visual-region{

width:100%;

min-height:400px;

display:flex;

justify-content:center;

align-items:center;

}

@keyframes home-float{

0%,100%{

transform:

perspective(1200px)

rotateY(var(--phone-rotate-y))

rotateX(var(--phone-rotate-x))

translateY(0)

scale(var(--phone-scale));

}

50%{

transform:

perspective(1200px)

rotateY(calc(var(--phone-rotate-y) + 2deg))

rotateX(calc(var(--phone-rotate-x) - 1deg))

translateY(-8px)

scale(var(--phone-scale));

}

}

/*==========================================================
TOUR SECTION
==========================================================*/

.home-page .tour-stage{

display:grid;

gap:20px;

width:100%;

}

.home-page .tour-phone-large{

padding:12px;

border-radius:34px;

border:1px solid var(--line);

background:

linear-gradient(

145deg,

rgba(255,255,255,.10),

rgba(255,255,255,.03)

);

box-shadow:var(--shadow);

max-width:360px;

margin:0 auto;

}

.home-page .tour-phone-large img{

display:block;

width:100%;

height:auto;

border-radius:24px;

}

.home-page .tour-caption{

margin:0 auto;

max-width:420px;

padding:12px 16px;

border-left:2px solid rgba(56,189,248,.35);

color:var(--muted);

line-height:1.7;

font-size:.95rem;

}

.home-page .tour-steps{

display:grid;

gap:10px;

}

.home-page .tour-step{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border:1px solid var(--line);

border-radius:999px;

background:rgba(12,19,38,.20);

color:var(--white);

cursor:pointer;

transition:

transform .25s ease,

border-color .25s ease,

background .25s ease,

box-shadow .25s ease;

}

.home-page .tour-step:hover{

transform:translateX(4px);

border-color:rgba(56,189,248,.28);

background:

linear-gradient(

135deg,

rgba(56,189,248,.08),

rgba(255,255,255,.03)

);

}

.home-page .tour-step.is-active{

transform:translateX(6px);

border-color:rgba(56,189,248,.34);

background:

linear-gradient(

135deg,

rgba(56,189,248,.12),

rgba(255,255,255,.03)

);

box-shadow:

0 12px 30px rgba(0,0,0,.22);

}

.home-page .tour-step span{

color:var(--cyan);

font-family:"DM Mono",monospace;

font-size:12px;

letter-spacing:.16em;

text-transform:uppercase;

}

.home-page .tour-step h3{

margin:0;

font-size:14px;

font-weight:600;

line-height:1.3;

}

.home-page .tour-step p{

margin-top:4px;

font-size:.92rem;

color:var(--muted);

line-height:1.55;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:1400px){

:root{

--reading-width:70ch;

}

}

@media (max-width:1200px){

:root{

--reading-width:64ch;

--hero-title-size:clamp(40px,5vw,58px);

--section-title-size:clamp(28px,3vw,40px);

--phone-width:290px;

}

}

@media (max-width:992px){

.home-page.page{

width:100%;

padding-top:140px;

}

.home-page .page-content{

margin-inline:auto;

justify-items:center;

}

.home-page .hero-visual{

justify-content:center;

margin-top:60px;

}

.home-page .page-content-two-col{

grid-template-columns:1fr;

}

.home-page .page-visual{

margin-top:32px;

}

}

@media (max-width:768px){

:root{

--page-padding-top:100px;

--page-padding-inline:28px;

--space-before-section:88px;

--phone-width:260px;

}

.home-page h1{

max-width:100%;

}

.home-page .lede{

max-width:100%;

}

.home-page .scene-body{

max-width:100%;

}

.home-page .tour-phone-large{

max-width:300px;

}

.home-page .tour-caption{

max-width:100%;

}

.home-page .tour-step{

border-radius:24px;

}

.home-page.page{

padding-top:140px;

}

.home-page .full-height{

height:auto;

padding:40px 0;

}

.home-page .actions{

flex-direction:column;

align-items:flex-start;

}

.home-page .actions.centered-actions{

align-items:center;

}

}

@media (max-width:480px){

:root{

--page-padding-top:72px;

--page-padding-bottom:72px;

--page-padding-inline:24px;

--hero-title-size:38px;

--section-title-size:30px;

--body-size:16px;

--phone-width:220px;

}

.home-page.page{

padding-top:110px;

}

.home-page .actions{

flex-direction:column;

align-items:stretch;

}

.home-page .actions .button{

width:100%;

justify-content:center;

}

.home-page .device-shell{

padding:10px;

}

.home-page .tour-step{

padding:14px;

}

}

/*==========================================================
END
==========================================================*/

/* ============================================
   HERO SIGNATURE — "Curated by" line + Neural Bloom Mantra
   Paste this block into home.css
   ============================================ */

/* Wrapper for both lines under the hero paragraph */
.hero-signature {
  /* 👇 ADJUST THIS: distance between the hero scene-body paragraph
     ("...matters most.") and the curated-by line above this block */
  margin-top: 10px;
}

/* Space control for the paragraph above, if you want it separate
   from other .scene-body instances on the site */
.hero-scene-body {
  /* 👇 ADJUST THIS: distance between the lede paragraph/button and
     the "Your phone should support..." paragraph is controlled by
     this margin-top */
  margin-top: 30px;
}

/* Line 1: "Curated and created by a Consultant Neurosurgeon"
   Same visual weight/color as the paragraph above it (.scene-body) */
.home-page .page-content .curated-line{
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--white);
    margin: 0;
}

/* Line 2: "FOCUS REWIND RESET REPEAT" mantra */
.mantra-line {
  /* 👇 ADJUST THIS: distance between the curated-by line and the
     mantra line below it */
  margin-top: 50px;
  margin-bottom: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.mantra-word {
  font-family: 'Manrope', sans-serif;
  font-weight: 900;                 /* FontWeight.Black — matches spec */
  font-size: 1rem;                  /* same size as paragraph words */
  letter-spacing: 0.5px;
  line-height: 1.6;

  /* Gradient text via background-clip, equivalent to
     Brush.linearGradient + BlendMode.SrcAtop on the reference app */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Command Tier — FOCUS: Sky Blue → Royal Blue */
.mantra-focus {
  background-image: linear-gradient(135deg, #38BDF8, #2563EB);
}

/* Recovery Tier — REWIND: Soft Lavender → Vibrant Violet */
.mantra-rewind {
  background-image: linear-gradient(135deg, #D78AFF, #A855F7);
}

/* Biological Tier — RESET: Emerald Mint → Ocean Cyan */
.mantra-reset {
  background-image: linear-gradient(135deg, #34D399, #0284C7);
}

/* Command Tier — REPEAT: Sky Blue → Royal Blue (same as FOCUS) */
.mantra-repeat {
  background-image: linear-gradient(135deg, #38BDF8, #2563EB);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .hero-signature {
    margin-top: 24px;
  }

  .hero-scene-body {
    margin-top: 28px;
  }

  .mantra-line {
    margin-top: 10px;
    gap: 0.5em;
  }

  .curated-line,
  .mantra-word {
    font-size: 0.9rem;
  }
}