:root { --ink:#17372d; --cream:#f5f0e5; --paper:#fffdf7; --sage:#b9c6a5; --gold:#c79d4b; --rust:#b75d3e; --line:rgba(23,55,45,.14); --shadow:0 24px 70px rgba(26,48,38,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Trebuchet MS",Arial,sans-serif; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:radial-gradient(rgba(24,55,45,.45) .55px,transparent .55px); background-size:6px 6px; }
button { font:inherit; }
button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.shell { width:min(1600px,100%); min-height:100vh; margin:auto; padding:24px clamp(24px,4vw,72px) 28px; position:relative; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo { width:176px; max-height:68px; object-fit:contain; object-position:left center; }
.language { display:flex; align-items:center; gap:12px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(255,253,247,.75); backdrop-filter:blur(10px); }
.language button { border:0; background:none; color:var(--ink); opacity:.48; cursor:pointer; font-weight:800; padding:7px; }
.language button.active { opacity:1; }
.language span { width:1px; height:18px; background:var(--line); }
.hero { min-height:440px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:4vw; padding:24px 0 30px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { color:#6f7c55; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:900; margin:0 0 12px; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.035em; margin:0; }
h1 { font-size:clamp(3.3rem,6vw,6.8rem); line-height:.9; max-width:780px; }
h2 { font-size:clamp(2rem,3vw,3.4rem); line-height:1; }
.lede { font-size:clamp(1rem,1.4vw,1.35rem); line-height:1.55; max-width:650px; opacity:.72; }
.conversation-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; width:min(720px,100%); margin-top:28px; padding:14px 16px; border:1px solid rgba(255,255,255,.25); border-radius:22px; color:white; background:var(--ink); box-shadow:var(--shadow); }
.conversation-card strong,.conversation-card small { display:block; }.conversation-card small { opacity:.65; margin-top:3px; }
.orb { width:50px; height:50px; display:flex; gap:3px; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); }
.orb i { width:3px; height:10px; background:var(--gold); border-radius:4px; transition:.2s; }.orb.active i { animation:wave .75s ease-in-out infinite alternate; }.orb.active i:nth-child(2){animation-delay:.2s}.orb.active i:nth-child(3){animation-delay:.35s}.orb.active i:nth-child(4){animation-delay:.1s}
@keyframes wave { to { height:28px; } }
.button { min-height:48px; border:0; border-radius:999px; padding:12px 22px; cursor:pointer; font-weight:900; transition:transform .18s,opacity .18s; }.button:hover { transform:translateY(-2px); }.button:disabled { opacity:.45; cursor:wait; transform:none; }
.button-primary { background:var(--gold); color:#182c24; }.button-quiet { color:inherit; background:rgba(127,127,127,.12); }
.hero-product { min-height:400px; position:relative; display:grid; place-items:center; }
.sun-disc { position:absolute; width:min(33vw,430px); aspect-ratio:1; border-radius:50%; background:#dacb9b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.hero-product img { position:relative; z-index:2; height:min(46vh,470px); max-width:75%; object-fit:contain; filter:drop-shadow(0 28px 28px rgba(26,42,32,.28)); transform:rotate(3deg); transition:.45s ease; }
.leaf { position:absolute; width:130px; height:50px; background:#6e8053; border-radius:100% 0 100% 0; opacity:.75; }.leaf-one{left:5%;bottom:15%;transform:rotate(25deg)}.leaf-two{right:7%;top:18%;transform:rotate(-35deg) scale(.7)}
.catalog { border-top:1px solid var(--line); padding-top:28px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.section-heading h2 { max-width:650px; }
.catalog-nav { display:flex; gap:8px; }.catalog-nav button { width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;font-size:1.2rem; }
.product-list { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:24px 2px 18px; scrollbar-width:none; }.product-list::-webkit-scrollbar{display:none}
.product-card { scroll-snap-align:start; display:grid; grid-template-rows:180px auto; min-width:0; border:1px solid var(--line); border-radius:22px; background:rgba(255,253,247,.62); overflow:hidden; cursor:pointer; transition:.25s; position:relative; }.product-card:hover,.product-card.selected { background:var(--paper); box-shadow:0 15px 35px rgba(31,59,47,.1); }.product-card.selected { border-color:var(--gold); }
.product-card figure { margin:0; display:grid; place-items:center; background:linear-gradient(145deg,rgba(185,198,165,.55),rgba(245,240,229,.2)); }.product-card img { width:80%; height:160px; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(21,42,32,.18)); }.product-card article { display:grid;grid-template-rows:auto minmax(4.2em,1fr) auto 42px;gap:10px;height:100%;padding:18px; }.product-card h3 { font-family:Georgia,serif;font-size:1.35rem;margin:0; }.product-card p { opacity:.68;line-height:1.4;margin:0; }.product-meta { display:flex;align-items:center;justify-content:space-between;gap:8px; }.sample-slot{display:flex;align-items:end;min-height:42px}.price { font-weight:900;font-size:1.15rem; }.buy-mini,.sample-mini { min-height:38px;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;font-weight:800; }.buy-mini{flex:0 0 auto;background:var(--ink);color:white}.sample-mini{width:100%;border:1px solid var(--ink);background:transparent;color:var(--ink)}
footer { display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:12px;font-size:.82rem;opacity:.7; }.text-button { border:0;background:none;text-decoration:underline;color:inherit;cursor:pointer; }
.modal { width:min(520px,calc(100% - 28px)); border:0;border-radius:28px;padding:34px;color:var(--ink);background:var(--paper);box-shadow:var(--shadow); }.modal::backdrop{background:rgba(15,35,28,.72);backdrop-filter:blur(8px)}.modal h2{font-size:2.4rem;margin-bottom:14px}.modal p{line-height:1.55}.modal-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;background:var(--sage);font-weight:900;margin-bottom:20px}.modal-actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}.status-line{min-height:24px;font-weight:800}.purchase-product{display:flex;align-items:center;gap:20px;border-block:1px solid var(--line);padding:18px 0}.purchase-product img{width:100px;height:100px;object-fit:contain}.purchase-product h3{font-family:Georgia,serif;font-size:1.5rem;margin:0}.demo-note{font-size:.85rem;opacity:.65}
.demo-panel { position:fixed;left:50%;top:18px;z-index:20;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:9px;padding:10px;border-radius:16px;background:rgba(23,55,45,.96);color:white;box-shadow:var(--shadow);font-size:.72rem;transform:translateX(-50%); }.demo-panel>strong{padding:0 8px;white-space:nowrap}.demo-scenarios{display:grid;grid-template-columns:repeat(4,auto);gap:6px}.demo-panel button{min-height:38px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:white;padding:8px 10px;cursor:pointer;white-space:nowrap}.demo-panel button b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border-radius:50%;background:var(--gold);color:var(--ink)}.demo-panel button:disabled{opacity:.45;cursor:wait}.demo-panel .demo-reset{background:rgba(183,93,62,.7)}.toast{position:fixed;left:50%;bottom:30px;z-index:30;transform:translate(-50%,30px);padding:13px 20px;border-radius:999px;background:var(--ink);color:white;opacity:0;pointer-events:none;transition:.25s}.toast.visible{opacity:1;transform:translate(-50%,0)}
.hidden { display:none!important; }
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:30px}.hero-product{grid-row:1;min-height:280px}.hero-product img{height:280px}.sun-disc{width:270px}h1{font-size:3.7rem}.conversation-card{grid-template-columns:auto 1fr}.conversation-card .button{grid-column:1/-1}.product-list{grid-auto-columns:75%}.demo-panel{grid-template-columns:1fr auto}.demo-panel>strong{grid-column:1/-1}.demo-scenarios{grid-template-columns:repeat(2,auto)}}
@media (max-width:560px){.shell{padding:15px}.topbar{height:62px}.logo{width:135px}.hero-product{min-height:235px}.hero-product img{height:235px}h1{font-size:3rem}.conversation-card{padding:12px}.conversation-card small{display:none}.section-heading{align-items:center}.catalog-nav{display:none}.product-list{grid-auto-columns:86%}footer{display:block}.modal{padding:26px}.demo-panel{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}