/* ==========================================================================
   Dr.Arthur Gregório Valério — Landing Page
   Tokens
   ========================================================================== */
:root{
  /* cor */
  --moss-night: #0F211C;
  --moss-night-2: #16302A;
  --moss: #3A5847;
  --moss-line: rgba(246,242,234,0.14);
  --cream: #F7F3EA;
  --cream-2: #EFE7D8;
  --bronze: #B28D56;
  --bronze-light: #E1C99A;
  --blush: #E9D9CF;
  --ink: #17221C;
  --ink-soft: #46534B;
  --text-on-dark: #F6F2E9;
  --text-on-dark-muted: #A7B7AC;

  /* tipografia */
  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  /* motion */
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, textarea{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,p{ margin:0; }
em{ font-style: italic; }
strong{ font-weight: 600; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

::selection{ background: var(--bronze); color: var(--moss-night); }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow{
  display:flex; align-items:flex-start; gap:.55rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.eyebrow--light{ color: var(--bronze-light); }
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--bronze);
  flex: none;
  margin-top: .42em;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 440;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.section-title em{ color: var(--bronze); font-style: italic; }
.section-title--light{ color: var(--text-on-dark); }
.section-title--light em{ color: var(--bronze-light); }

/* ==========================================================================
   Scroll progress
   ========================================================================== */
.scroll-progress{
  position: fixed; top:0; left:0; right:0; height:2px; z-index: 200;
  background: transparent;
}
.scroll-progress__bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-light));
  transition: width .08s linear;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: sticky; top:0; left:0; right:0; z-index: 150;
  padding: 18px var(--gutter);
  display:flex; align-items:center;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background: rgba(247,243,234,0.86);
  backdrop-filter: blur(10px) saturate(140%);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 1px 0 rgba(23,34,28,0.08);
}
.nav__inner{
  width:100%; max-width: var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__mark{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing:.01em;
  color: var(--text-on-dark);
  transition: color .4s var(--ease);
}
.nav.is-scrolled .nav__mark{ color: var(--ink); }
.nav__mark-ring{
  width:10px; height:10px; border-radius:50%;
  border: 1px solid var(--bronze);
  position: relative; flex:none;
}
.nav__mark-ring::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background: var(--bronze);
}
.nav__links{ display:none; align-items:center; gap: 2.1rem; font-size: .92rem; color: var(--text-on-dark-muted); transition: color .4s var(--ease); }
.nav.is-scrolled .nav__links{ color: var(--ink-soft); }
.nav__links a span{ position:relative; }
.nav__links a span::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav__links a:hover span::after{ transform: scaleX(1); transform-origin: left; }

.nav__cta{
  display:inline-block;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
  padding: .65rem 1.15rem;
  border: 1px solid rgba(246,242,233,.45);
  color: var(--text-on-dark);
  border-radius: 100px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-scrolled .nav__cta{ border-color: var(--ink); color: var(--ink); }
.nav__cta:hover{ background: var(--ink); color: var(--cream) !important; border-color: var(--ink) !important; }

@media (min-width: 900px){
  .nav__links{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 120px var(--gutter) 90px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--moss-night-2) 0%, var(--moss-night) 55%, #0B1915 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero__rings{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  opacity: .55;
}
.hero__rings-svg{ width: min(140vw, 1100px); height: auto; }
.ring{
  fill:none; stroke: var(--moss-line); stroke-width: 1;
  transform-origin: 400px 400px;
}
.ring--1{ animation: pulse 7s ease-in-out infinite; }
.ring--2{ animation: pulse 7s ease-in-out infinite .4s; }
.ring--3{ animation: pulse 7s ease-in-out infinite .8s; }
.ring--4{ animation: pulse 7s ease-in-out infinite 1.2s; }
.ring--5{ animation: pulse 7s ease-in-out infinite 1.6s; }
@keyframes pulse{
  0%, 100%{ opacity:.35; transform: scale(1); }
  50%{ opacity:.85; transform: scale(1.015); }
}

.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__content{ position: relative; z-index: 2; max-width: 900px; text-align:center; }
.hero__content .eyebrow{ display:block; text-align:center; }
.hero__content .eyebrow .eyebrow__dot{ display:inline-block; vertical-align:middle; margin:-2px .55rem 0 0; }

.hero__title{
  font-family: var(--font-display);
  font-weight: 460;
  color: var(--text-on-dark);
  font-size: clamp(2.3rem, 7.5vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.reveal-mask{ display:block; overflow: hidden; }
.reveal-inner{ display:block; transform: translateY(110%); transition: transform .9s var(--ease); }
.reveal-inner--italic em{ color: var(--bronze-light); }
.hero.is-loaded .reveal-inner{ transform: translateY(0); }
.hero.is-loaded .reveal-mask:nth-child(1) .reveal-inner{ transition-delay: .15s; }
.hero.is-loaded .reveal-mask:nth-child(2) .reveal-inner{ transition-delay: .28s; }
.hero.is-loaded .reveal-mask:nth-child(3) .reveal-inner{ transition-delay: .41s; }

.hero__subtitle{
  margin: 1.9rem auto 0;
  max-width: 560px;
  color: var(--text-on-dark-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.hero__actions{
  margin-top: 2.6rem;
  display:flex; flex-direction:column; align-items:center; gap: 1rem;
}
@media (min-width: 560px){
  .hero__actions{ flex-direction:row; justify-content:center; }
}

.hero__scroll{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: .6rem;
  z-index:2;
}
.hero__scroll-line{
  width:1px; height: 46px; background: linear-gradient(var(--bronze-light), transparent);
  position: relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--bronze-light);
  animation: scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}
.hero__scroll-label{
  font-family: var(--font-mono); font-size: .65rem; letter-spacing:.18em;
  text-transform: uppercase; color: var(--text-on-dark-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1rem 1.7rem;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing:.04em;
  border-radius: 100px;
  white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

.btn--primary{
  background: linear-gradient(180deg, var(--bronze-light), var(--bronze));
  color: var(--moss-night);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -10px rgba(178,141,86,.55);
}
.btn--primary:hover{ box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -8px rgba(178,141,86,.65); }

.btn--ghost{
  border: 1px solid var(--moss-line);
  color: var(--text-on-dark);
}
.btn--ghost:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }

.btn--full{ width:100%; }

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker{
  background: var(--cream-2);
  border-top: 1px solid rgba(23,34,28,.08);
  border-bottom: 1px solid rgba(23,34,28,.08);
  overflow: hidden;
  padding: 14px 0;
}
.ticker__track{
  display:flex; gap: 2.4rem; white-space: nowrap;
  width: max-content;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing:.06em;
  text-transform: uppercase; color: var(--ink-soft);
  animation: ticker 26s linear infinite;
}
.ticker__sep{ color: var(--bronze); }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   About
   ========================================================================== */
.about{ padding: 6.5rem var(--gutter); background: var(--cream); }
.about__inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr; gap: 3.2rem;
  align-items: center;
}

.about__media{ position: relative; }
.about__frame{
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid rgba(23,34,28,.1);
}
.about__frame img{ width:100%; height: 100%; object-fit: cover; }
.about__frame--small{
  position: relative; margin-top: -3.2rem; margin-left: 2.2rem; margin-right: 2.2rem;
  width: 62%;
  box-shadow: 0 20px 40px -20px rgba(15,33,28,.35);
}

.about__content .about__text{ color: var(--ink-soft); margin-bottom: 1.15rem; font-size: 1rem; line-height: 1.75; }
.about__content .about__text strong{ color: var(--ink); }

.credentials{ margin-top: 1.8rem; display:flex; flex-direction:column; gap: .7rem; }
.credentials li{
  display:flex; align-items:center; gap: .7rem;
  font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft);
  padding-bottom: .7rem; border-bottom: 1px dashed rgba(23,34,28,.15);
}
.credentials__icon{ color: var(--bronze); font-size: .8rem; }

@media (min-width: 860px){
  .about__inner{ grid-template-columns: .95fr 1.05fr; gap: 4.5rem; }
  .about__frame--small{ width: 58%; }
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach{
  background: linear-gradient(180deg, var(--moss-night) 0%, #0C1D18 100%);
  padding: 7rem var(--gutter);
  color: var(--text-on-dark);
}
.approach__intro{ max-width: 720px; margin: 0 auto 4.5rem; text-align:center; }
.approach__intro .eyebrow{ display:block; text-align:center; }
.approach__intro .eyebrow .eyebrow__dot{ display:inline-block; vertical-align:middle; margin:-2px .55rem 0 0; }
.approach__lead{ color: var(--text-on-dark-muted); font-size: 1.05rem; line-height: 1.75; margin-top: 1rem; }

.approach__grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: 1fr; gap: 2.4rem;
  align-items: stretch;
}
.approach__bridge{ display:none; }

.approach-card{
  background: rgba(246,242,233,0.03);
  border: 1px solid var(--moss-line);
  border-radius: var(--radius);
  padding: 2.6rem 2.1rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.approach-card:hover{ border-color: rgba(225,201,154,.4); background: rgba(246,242,233,0.05); }
.approach-card__number{ color: var(--bronze); margin-bottom: 1.6rem; }
.approach-card__eyebrow{
  font-family: var(--font-mono); font-size: .7rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bronze-light); margin-bottom: .6rem;
}
.approach-card__title{
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 460; margin-bottom: 1.1rem;
}
.approach-card__text{ color: var(--text-on-dark-muted); font-size: .96rem; line-height: 1.75; margin-bottom: 1rem; }
.approach-card__text:last-child{ margin-bottom: 0; }

.approach__conclusion{
  max-width: 760px; margin: 4.5rem auto 0; text-align:center;
  padding-top: 3rem; border-top: 1px solid var(--moss-line);
}
.approach__conclusion-eyebrow{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--bronze-light); margin-bottom: 1rem;
}
.approach__conclusion-text{ font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.65rem); line-height: 1.55; font-weight: 380; }
.approach__conclusion-text strong{ color: var(--bronze-light); font-weight: 460; }

@media (min-width: 980px){
  .approach__grid{ grid-template-columns: 1fr auto 1fr; gap: 1.2rem; }
  .approach__bridge{ display:flex; align-items:center; justify-content:center; color: var(--moss-line); }
  .approach__bridge-svg{ width: 60px; height: 100%; }
  .bridge-path{ stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease); }
  .approach__bridge.is-visible .bridge-path{ stroke-dashoffset: 0; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ padding: 7rem var(--gutter); background: var(--cream); }
.testimonials .eyebrow{ max-width: var(--container); margin-left:auto; margin-right:auto; }
.testimonials .section-title{ max-width: var(--container); margin-left:auto; margin-right:auto; margin-bottom: 3rem; }

.testimonials__grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: 1fr; gap: 1.4rem;
}
.t-card{
  margin:0; padding: 2.1rem;
  background: var(--cream-2);
  border: 1px solid rgba(23,34,28,.08);
  border-radius: var(--radius);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.t-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -24px rgba(15,33,28,.28);
  border-color: rgba(178,141,86,.35);
}
.t-card__stars{ color: var(--bronze); letter-spacing: .15em; font-size: .8rem; margin-bottom: 1rem; }
.t-card blockquote{ margin:0 0 1.4rem; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.55; color: var(--ink); font-weight: 400; }
.t-card figcaption{ display:flex; align-items:center; justify-content:space-between; font-family: var(--font-mono); font-size: .72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }

@media (min-width: 700px){
  .testimonials__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px){
  .testimonials__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  position: relative;
  background: linear-gradient(180deg, #0C1D18 0%, var(--moss-night) 100%);
  padding: 7rem var(--gutter);
  color: var(--text-on-dark);
  overflow: hidden;
}
.contact__rings{ position:absolute; top:-10%; right:-20%; z-index:0; opacity:.35; width: 600px; }
.contact__rings .ring{ stroke: var(--moss-line); }

.contact__inner{
  position: relative; z-index:1;
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1fr; gap: 3.5rem;
}
.contact__lead{ color: var(--text-on-dark-muted); font-size: 1.02rem; line-height: 1.7; max-width: 460px; }

.contact__links{ margin-top: 2.2rem; display:flex; flex-direction:column; gap: 1.6rem; align-items:flex-start; }
.contact__meta{ display:flex; flex-direction:column; gap: .5rem; font-family: var(--font-mono); font-size: .82rem; color: var(--text-on-dark-muted); }
.contact__meta a{ color: var(--bronze-light); }

.contact__form{
  background: rgba(246,242,233,0.04);
  border: 1px solid var(--moss-line);
  border-radius: var(--radius);
  padding: 2.2rem;
  display:flex; flex-direction:column; gap: 1.3rem;
}
.form-row{ display:flex; flex-direction:column; gap: .5rem; }
.form-row label{ font-family: var(--font-mono); font-size: .7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-on-dark-muted); }
.form-row input, .form-row textarea{
  background: transparent;
  border: none; border-bottom: 1px solid var(--moss-line);
  color: var(--text-on-dark);
  padding: .6rem 0;
  resize: vertical;
  transition: border-color .3s var(--ease);
}
.form-row input::placeholder, .form-row textarea::placeholder{ color: rgba(167,183,172,.5); }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color: var(--bronze-light); }
.form-note{ font-size: .74rem; color: rgba(167,183,172,.7); line-height: 1.5; }

@media (min-width: 940px){
  .contact__inner{ grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--moss-night); padding: 1.8rem var(--gutter); border-top: 1px solid var(--moss-line); }
.footer__inner{
  max-width: var(--container); margin:0 auto;
  display:flex; flex-direction:column; gap:.4rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing:.03em;
  color: var(--text-on-dark-muted);
}
@media (min-width: 640px){
  .footer__inner{ flex-direction:row; justify-content:space-between; }
}

/* ==========================================================================
   Reveal-on-scroll (generic)
   ========================================================================== */
[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
.eyebrow[data-reveal]{ transition-delay: .02s; }