:root { --ink:#19191a; --paper:#f4eee8; --soft:#fffaf5; --line:rgba(25,25,26,.14); --pink:#eab5d4; --apricot:#efb183; --blue:#aebcde; --yellow:#efd899; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:#e9d9d0; font-family:"DM Sans",sans-serif; }
button,input { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.experience { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:linear-gradient(135deg,#f0d4e8 0%,#f0b990 30%,#efd3a1 56%,#b9c7e9 100%); }
.experience::before { content:""; position:absolute; inset:-20%; z-index:-3; background:radial-gradient(circle at 7% 48%,rgba(213,173,236,.82),transparent 30%),radial-gradient(circle at 68% 80%,rgba(255,242,205,.86),transparent 28%),radial-gradient(circle at 82% 17%,rgba(197,193,237,.78),transparent 26%); filter:blur(42px); animation:drift 16s ease-in-out infinite alternate; }
.grain { position:absolute; inset:0; z-index:10; pointer-events:none; opacity:.14; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.ambient { position:absolute; width:34vw; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.42; z-index:-2; }
.ambient-one { left:-10%; bottom:-15%; background:#e4b3ef; }
.ambient-two { right:-9%; top:28%; background:#f8e7b5; }
.topbar,.footer { position:absolute; left:clamp(22px,4vw,64px); right:clamp(22px,4vw,64px); z-index:4; display:flex; justify-content:space-between; align-items:center; }
.topbar { top:24px; }
.monogram { font:700 1.2rem "Manrope",sans-serif; letter-spacing:-.08em; }
.monogram span { color:#fff; }
.status { display:flex; align-items:center; gap:8px; margin:0; font-size:.73rem; font-weight:600; }
.status span { width:7px; height:7px; border-radius:50%; background:#3a915b; box-shadow:0 0 0 4px rgba(58,145,91,.12); }
.view { min-height:100svh; padding:110px clamp(22px,7vw,110px) 92px; }
.view.is-transition-layer { position:absolute; inset:0; width:100%; pointer-events:none; }
.intro-view { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.arc { position:absolute; left:-10%; right:-10%; top:27%; height:43%; border-top:2px solid rgba(255,255,255,.86); border-radius:50% 50% 0 0; transform:rotate(-1deg); pointer-events:none; }
.sparkles { position:absolute; top:17%; left:50%; width:96px; height:95px; transform:translateX(-50%); }
.sparkles i { position:absolute; width:9px; height:9px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.8); }
.sparkles i:nth-child(1){left:43px;top:0}.sparkles i:nth-child(2){left:43px;top:26px}.sparkles i:nth-child(3){left:19px;top:39px}.sparkles i:nth-child(4){left:65px;top:43px}.sparkles i:nth-child(5){left:38px;top:60px}.sparkles i:nth-child(6){left:55px;top:60px}.sparkles i:nth-child(7){left:47px;top:74px}
.intro-copy { position:relative; z-index:1; max-width:820px; }
.eyebrow { margin:0 0 17px; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"Manrope",sans-serif; font-weight:500; letter-spacing:-.065em; line-height:.93; }
h1 { font-size:clamp(3.4rem,7.5vw,7.3rem); }
.intro-note { max-width:520px; margin:24px auto 0; font-size:clamp(.95rem,1.3vw,1.1rem); line-height:1.55; }
.route-picker { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(780px,100%); margin-top:42px; }
.route-button { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:94px; padding:16px 20px; border:1px solid rgba(25,25,26,.13); border-radius:20px; background:rgba(255,250,245,.58); box-shadow:0 18px 50px rgba(80,47,55,.09); backdrop-filter:blur(18px); cursor:pointer; text-align:left; transition:.25s ease; }
.route-button:hover,.route-button:focus-visible { transform:translateY(-4px); background:rgba(255,250,245,.88); outline:none; box-shadow:0 22px 55px rgba(80,47,55,.15); }
.route-icon { display:grid; width:52px; aspect-ratio:1; place-items:center; border-radius:15px; font-size:1.25rem; background:rgba(255,255,255,.55); }
.route-button span:nth-child(2) { display:grid; gap:3px; }
.route-button small { color:rgba(25,25,26,.58); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.route-button strong { font:600 clamp(1rem,1.4vw,1.16rem) "Manrope",sans-serif; letter-spacing:-.025em; }
.route-button b { font-size:1.3rem; font-weight:400; }
.fit-widget { --brand-accent:#4285f4; position:fixed; z-index:7; right:clamp(18px,3vw,46px); bottom:42px; width:172px; }
.fit-trigger { position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; animation:softFloat 3.8s ease-in-out infinite; transform-origin:50% 100%; }
.fit-trigger:focus-visible { outline:2px solid var(--ink); outline-offset:5px; border-radius:18px; }
.fit-trigger img { display:block; width:100%; height:auto; filter:drop-shadow(0 15px 18px rgba(54,39,40,.14)); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.company-sign { position:absolute; top:66.2%; left:18%; display:flex; align-items:center; justify-content:center; gap:4px; width:64%; height:13%; color:#201e1b; font:600 clamp(.52rem,1vw,.76rem) "Manrope",sans-serif; letter-spacing:-.035em; transform:rotate(1.5deg); white-space:nowrap; pointer-events:none; }
.company-sign i { color:var(--brand-accent); font-style:normal; font-size:.9em; }
.company-sign b { overflow:hidden; max-width:70%; text-overflow:ellipsis; font-weight:600; }
.fit-trigger:hover img { transform:translateY(-3px) rotate(1deg); }
.fit-hint { position:absolute; right:1px; bottom:1px; display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid rgba(25,25,26,.12); border-radius:999px; background:rgba(255,250,245,.92); box-shadow:0 8px 24px rgba(54,39,40,.12); font-size:.66rem; font-weight:700; white-space:nowrap; backdrop-filter:blur(12px); }
.fit-hint b { display:grid; width:17px; aspect-ratio:1; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:.7rem; transition:transform .3s ease; }
.fit-widget.is-open .fit-hint b { transform:rotate(45deg); }
.fit-bubbles { position:absolute; right:88%; bottom:48px; display:grid; gap:8px; width:min(290px,calc(100vw - 210px)); pointer-events:none; }
.fit-bubble { padding:13px 15px; border:1px solid rgba(25,25,26,.12); border-radius:16px; background:rgba(255,250,245,.94); box-shadow:0 16px 40px rgba(64,42,44,.1); opacity:0; transform:translate(12px,9px) scale(.96); transform-origin:100% 100%; backdrop-filter:blur(18px); transition:opacity .3s ease,transform .42s cubic-bezier(.22,1,.36,1); }
.fit-bubble span { float:right; color:var(--brand-accent); font-size:.6rem; font-weight:700; }
.fit-bubble strong { display:block; padding-right:24px; font:600 .78rem "Manrope",sans-serif; }
.fit-bubble p { margin:5px 0 0; color:rgba(25,25,26,.66); font-size:.69rem; line-height:1.4; }
.fit-widget.is-open .fit-bubbles { pointer-events:auto; }
.fit-widget.is-open .fit-bubble { opacity:1; transform:none; }
.fit-widget.is-open .fit-bubble:nth-child(2) { transition-delay:.05s; }
.fit-widget.is-open .fit-bubble:nth-child(1) { transition-delay:.1s; }
.footer { bottom:20px; color:rgba(25,25,26,.58); font-size:.68rem; font-weight:600; letter-spacing:.04em; }
.back-button { margin:0 0 clamp(42px,8vh,86px); padding:10px 0; border:0; background:none; cursor:pointer; font-size:.76rem; font-weight:700; }
.back-button:hover { text-decoration:underline; }
.quick-view { background:rgba(246,239,232,.72); backdrop-filter:blur(34px); }
.quick-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.8fr); gap:clamp(46px,9vw,150px); max-width:1240px; margin:auto; }
.quick-heading h2,.deep-copy h2 { font-size:clamp(3.5rem,7vw,7.4rem); }
.profile-copy { padding-top:8px; }
.profile-copy p { margin:0 0 19px; color:rgba(25,25,26,.76); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.66; }
.profile-copy .lead { color:var(--ink); font-size:clamp(1.25rem,2vw,1.72rem); font-weight:500; line-height:1.36; letter-spacing:-.025em; }
.proof-row { display:grid; grid-template-columns:repeat(3,1fr); margin:34px 0; padding:24px 0; border-block:1px solid var(--line); }
.proof-row div { display:flex; flex-direction:column; gap:3px; }
.proof-row strong { font:500 clamp(1.8rem,3vw,2.7rem) "Manrope",sans-serif; letter-spacing:-.06em; }
.proof-row span { color:rgba(25,25,26,.58); font-size:.67rem; font-weight:600; text-transform:uppercase; }
.inline-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.primary-link { padding:15px 20px; border-radius:999px; background:var(--ink); color:#fff; font-size:.82rem; font-weight:600; }
.primary-link span { margin-left:12px; }
.text-link { padding:12px 0; border:0; background:none; cursor:pointer; font-size:.82rem; font-weight:600; }
.deep-view { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(400px,1.2fr); grid-template-rows:auto 1fr; column-gap:clamp(50px,9vw,150px); background:rgba(245,237,233,.26); align-items:center; }
.deep-view .back-button { grid-column:1/-1; align-self:start; justify-self:start; margin:0; }
.deep-copy { max-width:620px; }
.deep-copy > p:last-child { max-width:470px; margin:26px 0 0; line-height:1.6; }
.prompt-area { width:100%; max-width:720px; justify-self:end; }
.prompt-box { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; padding:8px 9px 8px 20px; border:1px solid rgba(25,25,26,.18); border-radius:999px; background:rgba(255,252,248,.86); box-shadow:0 24px 60px rgba(66,44,44,.12); backdrop-filter:blur(24px); }
.plus { font-size:1.35rem; font-weight:300; }
.prompt-box input { width:100%; min-width:0; padding:15px 0; border:0; outline:0; background:transparent; font-size:1rem; }
.prompt-box input::placeholder { color:rgba(25,25,26,.45); }
.send-button { display:grid; width:48px; aspect-ratio:1; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--ink); cursor:pointer; font-size:1.25rem; transition:.2s ease; }
.send-button:hover { transform:scale(1.05); }
.send-button:disabled { cursor:wait; opacity:.58; transform:none; }
.prompt-box:has(input:disabled) { opacity:.78; }
.answer { min-height:48px; margin:15px 18px 3px; color:rgba(25,25,26,.72); font-size:.86rem; line-height:1.5; }
.answer[data-state="loading"] { animation:answerPulse 1.2s ease-in-out infinite; }
.answer[data-state="error"] { color:#8a3f3f; }
.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.suggestions a { display:grid; min-height:118px; padding:16px; border:1px solid rgba(25,25,26,.13); border-radius:16px; background:rgba(255,250,245,.38); font-size:.84rem; font-weight:600; transition:.22s ease; }
.suggestions a:hover { transform:translateY(-3px); background:rgba(255,250,245,.75); }
.suggestions span { color:rgba(25,25,26,.45); font-size:.65rem; }
.suggestions b { align-self:end; justify-self:end; font-size:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@keyframes drift { to { transform:translate3d(3%,2%,0) rotate(3deg); } }
@keyframes softFloat { 0%,100% { transform:translateY(0) rotate(-.35deg); } 50% { transform:translateY(-5px) rotate(.35deg); } }
@keyframes answerPulse { 50% { opacity:.45; } }
@media (max-width:800px) {
  .status { display:none; }
  .view { padding:90px 20px 72px; }
  .arc { top:24%; height:35%; }
  .sparkles { top:13%; transform:translateX(-50%) scale(.75); }
  .route-picker { grid-template-columns:1fr; margin-top:28px; }
  .route-button { min-height:82px; }
  .fit-widget { right:10px; bottom:34px; width:118px; }
  .fit-bubbles { right:76%; bottom:34px; width:min(245px,calc(100vw - 105px)); }
  .fit-bubble { padding:10px 12px; }
  .fit-hint { font-size:.58rem; padding:6px 8px; }
  .quick-layout,.deep-view { grid-template-columns:1fr; }
  .quick-layout { gap:36px; }
  .deep-view { display:flex; flex-direction:column; justify-content:center; align-items:stretch; }
  .deep-view .back-button { position:absolute; top:76px; }
  .deep-copy { margin-top:42px; }
  .prompt-area { margin-top:40px; }
  .suggestions { grid-template-columns:1fr; }
  .suggestions a { min-height:72px; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
  .suggestions b { align-self:auto; }
}
@media (max-width:480px) {
  .intro-note { font-size:.88rem; }
  .route-button { padding:12px; gap:12px; }
  .route-icon { width:44px; }
  .proof-row span { max-width:8ch; }
  .prompt-box { padding-left:15px; }
  .footer span:first-child { display:none; }
  .footer { justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .fit-trigger { animation:none; } }