:root{color-scheme:light;--ink:#211e1b;--soft:#5d534d;--line:#b78466;--amber:#cc8c5b;--paper:#f7f3ef;--ease:cubic-bezier(.19,1,.22,1)}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;height:100%;scroll-behavior:smooth}
body{min-width:320px;min-height:100%;margin:0;font-family:"Avenir Next","Helvetica Neue",Arial,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #ae714e;outline-offset:5px}
[hidden]{display:none!important}
/* Full-bleed stage: avoids the clipped square at the right-hand side. */
.site{position:relative;isolation:isolate;width:100%;min-height:720px;min-height:100svh;overflow:hidden;background:linear-gradient(107deg,#f9f8f7 0%,#f5f1ed 40%,#f9e9d7 74%,#fbe1c3 100%)}
.scene{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.scene__light{position:absolute;inset:-15%;background:radial-gradient(ellipse 46% 56% at 75% 53%,rgba(255,196,122,.27),transparent 85%),radial-gradient(ellipse 37% 41% at 5% 30%,rgba(255,255,255,.93),transparent 88%);animation:ambient 15s ease-in-out infinite alternate}
/* The arch is drawn at browser resolution rather than enlarged from a tiny bitmap. */
.scene__arch{position:absolute;left:49%;top:-28%;height:114%;width:48%;border-left:1.5px solid rgba(227,165,105,.48);border-radius:68% 0 0 30%/85% 0 0 20%;transform:rotate(9deg);box-shadow:-13px -4px 20px -19px #e49c58,-37px 8px 65px -48px rgba(221,155,90,.53);opacity:.82;animation:arch-glow 11s ease-in-out infinite alternate}
.scene__arch::before{content:"";position:absolute;inset:0 0 0 -2%;border-left:4px solid rgba(255,230,195,.33);border-radius:inherit;filter:blur(9px)}
.scene__arch::after{content:"";position:absolute;left:1.5%;top:3%;bottom:18%;width:1px;border-radius:99px;background:linear-gradient(to bottom,transparent,rgba(255,220,166,.7),transparent);filter:blur(2px)}
.scene__horizon{position:absolute;right:-6%;bottom:-6%;width:85%;height:39%;background:url('./assets/horizonte-ideia-02.webp') center bottom / 100% 100% no-repeat;opacity:.48;-webkit-mask-image:radial-gradient(ellipse 68% 77% at 64% 48%,#000 9%,transparent 100%);mask-image:radial-gradient(ellipse 68% 77% at 64% 48%,#000 9%,transparent 100%)}
.scene__horizon-tint{position:absolute;bottom:0;right:0;left:32%;height:32%;background:linear-gradient(to bottom,transparent 0%,rgba(255,208,154,.08) 45%,rgba(255,227,190,.13) 100%);pointer-events:none}
.scene__reflection{position:absolute;left:42%;width:58%;height:1px;bottom:16.6%;background:linear-gradient(to right,transparent,rgba(255,224,185,.6),rgba(185,123,86,.3),transparent);transform:rotate(.2deg);opacity:.55}
.scene__ground{position:absolute;left:42%;right:0;bottom:8%;height:2px;transform:rotate(1deg);background:linear-gradient(to right,transparent,rgba(244,202,154,.65),rgba(195,150,112,.22),transparent);box-shadow:0 8px 20px 9px rgba(238,184,128,.07)}
.scene__grain{position:absolute;inset:0;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.1' filter='url(%23noise)' d='M0 0h140v140H0z'/%3E%3C/svg%3E")}
/* Navigation stays aligned within the viewport; background fills every pixel. */
.header{position:relative;z-index:20;width:min(100% - 112px,1490px);margin:0 auto;padding-top:clamp(27px,4.2svh,46px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-block;white-space:nowrap;font-size:clamp(12px,1.03vw,15px);font-weight:550;letter-spacing:.10em;line-height:1.6;transition:color .3s ease}
.logo:hover{color:#b7784f}
.nav{display:flex;align-items:center;gap:clamp(24px,3vw,57px)}
.nav a,.nav button{background:none;border:0;padding:10px 0;position:relative;font-size:13px;color:#34302d;white-space:nowrap;transition:color .3s,transform .35s}
.nav a:hover,.nav button:hover{color:#a16845}
.nav__current::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:#38312c;transform:scaleX(1)}
.nav .nav__login{display:flex;align-items:center;justify-content:space-between;gap:27px;border:1px solid rgba(78,64,53,.48);border-radius:999px;padding:10px 18px 10px 24px;font-size:12px;min-width:108px;background:rgba(255,255,255,.09);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav__arrow{font-size:17px;font-weight:400;line-height:1;transition:transform .32s var(--ease)}
.nav__login:hover{background:#28201d;color:#fff!important;transform:translateY(-2px);box-shadow:0 9px 22px rgba(122,83,53,.12)}
.nav__login:hover .nav__arrow{transform:translate(2px,-2px)}
/* Hero is a viewport-size composition; no minimum content column extending beyond screen. */
.hero{position:relative;width:min(100%,1720px);margin:0 auto;min-height:calc(100svh - 82px);min-height:max(625px,calc(100svh - 82px));display:flex;align-items:center}
.hero__copy{z-index:5;position:relative;width:44%;padding-left:max(55px,calc((100% - 1490px)/2));padding-bottom:5svh}
.eyebrow{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:35px}
.eyebrow i,.hero__note i{display:block;width:39px;height:1px;background:#d59768}
.eyebrow p{margin:0;font-size:11px;font-weight:500;letter-spacing:.32em;line-height:1.68;color:#60554e}
.hero__title{margin:0 0 43px;font-weight:350;font-size:clamp(50px,5.4vw,91px);line-height:1.12;letter-spacing:clamp(.13em,1.3vw,.24em);white-space:nowrap}
.cta{position:relative;display:inline-flex;justify-content:space-between;align-items:center;gap:43px;min-height:54px;min-width:193px;padding:0 20px 0 27px;border-radius:100px;border:1px solid #dc996c;background:rgba(255,253,250,.25);color:var(--ink);font-size:14px;overflow:hidden;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:background .37s,color .37s,transform .45s var(--ease),box-shadow .37s}
.cta::before{content:"";position:absolute;inset:0 auto 0 -110%;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);transition:left .8s var(--ease)}
.cta svg{transition:transform .37s var(--ease)}
.cta:hover{background:#ebb489;transform:translateY(-3px);box-shadow:0 15px 42px rgba(190,123,71,.18)}
.cta:hover svg{transform:translateX(5px)}
.cta:hover::before{left:150%}
.cta:active{transform:translateY(-1px) scale(.98)}
/* The actual orb from idea 2 is transparent, so its box can never be seen. */
.hero__visual{pointer-events:none;position:absolute;left:50%;right:5.5%;top:8%;bottom:11%;z-index:2;display:flex;align-items:center;justify-content:center}
.visual__ambient{position:absolute;width:75%;height:70%;left:13%;top:13%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,212,160,.35),transparent 67%);filter:blur(24px);animation:ambient-orb 10s ease-in-out infinite alternate}
.visual__orb{position:relative;z-index:3;width:min(100%,650px);aspect-ratio:1392/1252;filter:drop-shadow(0 17px 28px rgba(203,131,81,.06));animation:float-orb 8s ease-in-out 1s infinite alternate}
.orb-image{display:block;width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.visual__floor-glow{position:absolute;left:17%;right:13%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,183,106,.22),transparent 70%);filter:blur(16px)}
.hero__index{position:absolute;z-index:6;right:max(55px,calc((100% - 1490px)/2));top:35%;display:flex;flex-direction:column;align-items:center;gap:17px;font-family:Arial,sans-serif;color:#403a36;font-size:17px}
.index-line{width:1px;height:42px;background:#2c2724}
.index-dots{display:flex;align-items:center;flex-direction:column;gap:11px}
.index-dots i{display:block;width:2px;height:2px;border-radius:50%;background:#36302b}
.hero__note{position:absolute;z-index:6;bottom:7%;left:max(55px,calc((100% - 1490px)/2));display:flex;flex-direction:column;gap:17px;color:#655952;font-size:10px;line-height:1.65;letter-spacing:.34em;font-weight:450}
/* Subtle presentation motion without an empty/unclickable page before load. */
.appear{opacity:0;transform:translateY(16px);transition:opacity .95s ease,transform 1.05s var(--ease)}
.appear--header{transform:translateY(-14px)}
.appear--two{transform:translateY(22px)}
.appear--orb{transform:translateY(22px) scale(.985)}
.is-loaded .appear{opacity:1;transform:translateY(0)}
.is-loaded .appear--one{transition-delay:.10s}
.is-loaded .appear--two{transition-delay:.22s}
.is-loaded .appear--three{transition-delay:.36s}
.is-loaded .appear--four{transition-delay:.55s}
.is-loaded .appear--five{transition-delay:.65s}
.is-loaded .appear--orb{transition-delay:.2s;animation:float-orb 8s ease-in-out 1.1s infinite alternate}
@keyframes float-orb{from{transform:translateY(4px) rotate(-.6deg)}50%{transform:translateY(-11px) rotate(.5deg)}to{transform:translateY(-4px) rotate(-.35deg)}}
@keyframes ambient{from{transform:translateX(-1%) scale(1);opacity:.92}to{transform:translateX(1.5%) scale(1.04);opacity:1}}
@keyframes ambient-orb{from{opacity:.54;transform:scale(.92)}to{opacity:1;transform:scale(1.065)}}
@keyframes arch-glow{from{opacity:.6}to{opacity:.94}}
/* Honest temporary interactions with full keyboard support. */
.overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:22px}
.overlay__shade{position:absolute;inset:0;background:rgba(37,28,22,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fade-in .35s ease both}
.modal{z-index:2;position:relative;width:min(100%,450px);padding:46px 43px 40px;border-radius:20px;border:1px solid rgba(202,159,120,.5);background:linear-gradient(150deg,rgba(255,251,246,.98),rgba(248,232,217,.98));box-shadow:0 30px 90px rgba(34,23,15,.22);outline:0;animation:modal-up .45s var(--ease) both}
.modal__tag{font-size:10px;letter-spacing:.22em;color:#ab8263}.modal h2{font-size:36px;font-weight:350;line-height:1.2;margin:29px 0 12px}.modal p{font-size:15px;line-height:1.7;color:#71625a;margin:0 0 29px}.modal__close{position:absolute;top:17px;right:17px;width:35px;height:35px;border:1px solid rgba(89,70,56,.23);border-radius:50%;background:transparent;display:grid;place-items:center;transition:transform .3s,background .3s}.modal__close:hover{transform:rotate(90deg);background:#f6e2d2}.modal__action{border:1px solid #d79465;background:rgba(255,255,255,.33);min-width:150px;border-radius:99px;padding:13px 17px;display:flex;align-items:center;justify-content:space-between;transition:background .3s,transform .3s}.modal__action:hover{background:#f4c5a0;transform:translateY(-2px)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-up{from{opacity:0;transform:translateY(25px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Compact notebooks and portrait devices get a deliberately different composition. */
@media(max-width:1130px){
 .header{width:calc(100% - 80px)}.hero__copy{padding-left:40px;width:49%}.hero__title{font-size:clamp(47px,5.45vw,67px);letter-spacing:.14em}.hero__visual{left:47%;right:5%;top:12%;bottom:12%}.hero__index{right:34px}.hero__note{left:40px}
}
@media(max-width:740px){
 .site{min-height:740px;min-height:100svh}
 .header{width:calc(100% - 42px);padding-top:22px}.logo{font-size:12px;letter-spacing:.075em}.nav{gap:17px}.nav a,.nav button{font-size:12px}.nav .nav__login{min-width:73px;padding:9px 13px;gap:0}.nav__arrow{display:none}
 .hero{min-height:calc(100svh - 70px);min-height:max(655px,calc(100svh - 70px));display:block}
 .hero__copy{width:100%;padding:0 23px;position:absolute;top:clamp(64px,10svh,112px)}
 .eyebrow{margin-bottom:23px;gap:12px}.eyebrow p{font-size:9px;letter-spacing:.28em}.eyebrow i{width:34px}
 .hero__title{font-size:clamp(43px,10.5vw,75px);letter-spacing:.14em;margin:0 0 24px}
 .cta{min-height:47px;min-width:165px;font-size:13px;padding:0 16px 0 22px;gap:28px}
 .hero__visual{top:42%;left:8%;right:8%;bottom:10%;align-items:center}
 .scene__arch{left:36%;top:27%;height:78%;width:75%;transform:rotate(10deg)}
 .scene__horizon{right:-12%;bottom:-5%;width:125%;height:28%;opacity:.30;-webkit-mask-image:radial-gradient(ellipse 59% 70% at 64% 48%,#000 8%,transparent 100%);mask-image:radial-gradient(ellipse 59% 70% at 64% 48%,#000 8%,transparent 100%)}
 .scene__reflection{left:0;width:100%;bottom:12%}.scene__ground{left:10%;bottom:6%}
 .hero__index{top:49%;right:17px;gap:9px;font-size:12px}.index-line{height:24px}.index-dots{gap:8px}
 .hero__note{bottom:24px;left:23px;font-size:9px;letter-spacing:.22em;gap:10px}
 .modal{padding:43px 28px 33px}
}
@media(max-width:390px){.nav{gap:13px}.nav__login{min-width:66px!important}.hero__title{font-size:40px}.hero__visual{top:43%;left:2%;right:2%}}
@media(max-height:680px) and (min-width:741px){.site{min-height:625px}.hero{min-height:555px}.hero__visual{top:3%;bottom:5%}.hero__copy{padding-bottom:0}.hero__note{bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.appear,.is-loaded .appear{opacity:1!important;transform:none!important}}