/* JANFAR AI — original one-page cinematic design system. */
:root{--bg:#05080f;--white:#f5f3ec;--muted:#a2abb9;--aqua:#9deaff;--gold:#e9c39a;--line:#ffffff2b;--progress:0;--ease:cubic-bezier(.22,1,.36,1)}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:#7a98a5 #090e18}
body{margin:0;background:var(--bg);color:var(--white);font:400 15px/1.65 'DM Sans',sans-serif;overflow-x:clip}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600}
::selection{background:#9ceaff;color:#050b15}
:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
.skip-link{position:fixed;left:10px;top:-100px;background:#fff;color:#000;padding:12px;z-index:300}.skip-link:focus{top:10px}
.world-canvas{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 68% 42%,#19324d 0%,#05080f 65%);pointer-events:none}
.world-canvas canvas{width:100%;height:100%;display:block}
.world-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#05080fdd 0%,#05080f75 40%,transparent 72%),linear-gradient(0deg,#05080fdd 0%,transparent 24%,transparent 76%,#05080f8a 100%);pointer-events:none}
.world-grain{position:absolute;inset:0;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E")}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;background:linear-gradient(90deg,transparent 49.9%,#9deaff0a 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,#9deaff08 50%,transparent 50.1%);background-size:130px 130px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent)}
.site-header{height:90px;position:fixed;inset:0 0 auto;z-index:110;display:flex;justify-content:space-between;align-items:center;padding:0 5.5%;border-bottom:1px solid #ffffff19;background:linear-gradient(#05070ec9,#05070e25);backdrop-filter:blur(12px)}
.wordmark{display:flex;gap:13px;align-items:center;font:700 23px/1 'Space Grotesk',sans-serif;letter-spacing:.035em}
.wordmark b,.end-foot b{color:var(--aqua)}
.wordmark small{display:block;color:#9bafbd;font:700 8px/1.7 'DM Sans',sans-serif;letter-spacing:.29em;margin-top:5px}
.brand-glyph{display:grid;place-items:center;width:46px;height:46px;color:#a7e8ff}.brand-glyph svg{width:44px;height:44px;filter:drop-shadow(0 0 13px #8befff77)}
.header-right{display:flex;gap:40px;align-items:center}.header-index{font-size:9px;font-weight:700;letter-spacing:.19em;color:#a8b5c0}
.header-index i{display:inline-block;height:5px;width:5px;border-radius:50%;background:var(--aqua);vertical-align:middle;margin:0 12px;box-shadow:0 0 12px var(--aqua)}
.header-contact{border:1px solid #b1c9d080;padding:12px 19px;font-size:10px;font-weight:700;letter-spacing:.12em;transition:background .25s,color .25s}
.header-contact:hover{background:var(--aqua);color:#05080f}.header-contact span{font-size:17px;margin-left:15px}
.chapter-rail{position:fixed;z-index:100;right:3%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:17px;color:#9db5c8;font:700 9px 'DM Sans',sans-serif;letter-spacing:.15em}
.rail-caption{writing-mode:vertical-rl}.rail-line{width:1px;height:190px;background:#b3dfff4d;position:relative}.rail-line i{position:absolute;top:0;left:-1px;width:3px;height:calc(var(--progress)*100%);background:var(--aqua);box-shadow:0 0 16px #8cefff}.rail-index{writing-mode:vertical-rl;color:#e8efff}
.top-progress{position:fixed;z-index:200;top:0;left:0;height:2px;width:calc(var(--progress)*100%);background:linear-gradient(90deg,#e9c39a,#a0eaff);box-shadow:0 0 14px #86e5ff}
main{position:relative;z-index:4}
.chapter{position:relative;height:120svh;min-height:750px;display:flex;align-items:center}
.chapter-inner{position:relative;width:100%;height:100%;padding:105px 8% 8%;display:flex;flex-direction:column;justify-content:center}
.hero-chapter{height:135svh;min-height:820px}
.hero-layout{padding-top:130px;justify-content:center}
.hero-topline{position:absolute;top:122px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;letter-spacing:.19em;color:#9aafbd}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9feaff;margin-right:10px;box-shadow:0 0 0 6px #9feaff17,0 0 18px #9feaff}
.kicker{display:flex;align-items:center;gap:15px;font:700 10px/1.4 'DM Sans',sans-serif;letter-spacing:.23em;color:var(--aqua)}
.kicker i{display:inline-block;width:36px;height:1px;background:var(--aqua);flex:none}
.hero-content{max-width:810px;margin-top:-30px}
.hero-content h1{font-size:clamp(76px,9.4vw,156px);line-height:.88;letter-spacing:-.092em;margin:28px 0 30px;text-transform:uppercase;text-shadow:0 12px 55px #02040acc}
.hero-content h1 em,.chapter-copy h2 em,.gallery-intro h2 em,.end-layout h2 em,.brief-dialog h2 em{font-style:normal;color:var(--aqua);text-shadow:0 0 65px #74d7ff3c}
.hero-content>p{font-size:16px;line-height:1.85;max-width:485px;color:#c1cbd5}
.hero-prompt{display:flex;gap:17px;align-items:center;margin-top:40px;font-size:10px;font-weight:700;letter-spacing:.15em}
.hero-prompt small{display:block;color:#98aabd;font-size:8px;margin-top:5px;letter-spacing:.14em}
.scroll-icon{width:37px;height:58px;border:1px solid #a5d8eaa8;border-radius:25px;display:grid;justify-content:center;padding-top:10px}
.scroll-icon i{width:3px;height:12px;background:#b5f4ff;border-radius:4px;animation:wheel 1.9s ease-in-out infinite}
.hero-stamp{position:absolute;right:9%;bottom:18%;display:flex;align-items:center;gap:15px;color:#d9ebef}
.hero-stamp>span{font:500 100px/1 'Space Grotesk';letter-spacing:-.1em;opacity:.24}
.hero-stamp small{font-size:9px;line-height:1.8;letter-spacing:.18em;color:#9db7c9}
.hero-bottom{position:absolute;bottom:40px;left:8%;right:8%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.2em;font-weight:700;color:#b5c3d1}
.hero-bottom b{font-size:23px;vertical-align:middle;margin-left:20px;color:var(--aqua);animation:wheel 2s infinite}
.chapter-split{justify-content:center;align-items:flex-start}
.chapter-number{position:absolute;top:145px;left:8%;color:#b8a98f;font:700 10px 'DM Sans';letter-spacing:.23em}
.chapter-copy{max-width:650px;padding-top:50px}
.chapter-copy h2{font-size:clamp(80px,9.2vw,150px);line-height:.87;letter-spacing:-.095em;margin:32px 0 35px}
.chapter-copy p{max-width:510px;color:#c3cdd7;font-size:17px;line-height:1.85;text-shadow:0 3px 20px #03070d}
.signature{margin-top:43px;border-top:1px solid #c3d9e74f;padding-top:22px;color:#d4d9dd;font:700 10px 'DM Sans';letter-spacing:.12em;display:flex;flex-wrap:wrap;gap:12px}
.signature span{color:var(--aqua)}
.chapter-side-note{position:absolute;bottom:56px;right:8%;font:700 9px 'DM Sans';letter-spacing:.19em;color:#92a6b8}
.chapter-product .chapter-copy h2 em,.chapter-estate .chapter-copy h2 em{color:#e9c49b;text-shadow:0 0 45px #e9b18a4d}
.chapter-auto .chapter-copy h2 em{color:#b8dded}
.chapter-ai .chapter-copy h2 em{color:#b5d4ff}
.chapter-motion .chapter-copy h2 em{color:#e7bda4}
.reveal{opacity:0;transform:translate3d(0,70px,0);filter:blur(7px);transition:opacity 1.05s var(--ease),transform 1.2s var(--ease),filter 1.15s var(--ease)}
.reveal.visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.chapter-gallery{position:relative;padding:160px 8% 150px;min-height:230svh;background:linear-gradient(180deg,transparent 0%,#04070dd6 16%,#04070df0 85%,transparent 100%)}
.gallery-intro{max-width:1150px;margin:0 auto 90px}
.gallery-intro h2{font-size:clamp(75px,9vw,145px);line-height:.88;letter-spacing:-.085em;margin:28px 0 30px}
.gallery-intro>p{max-width:620px;color:#b8c7d3;font-size:16px;line-height:1.9}
.film-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:85px 35px;max-width:1500px;margin:0 auto}
.film-card{min-width:0;transition:transform .65s var(--ease);position:relative}
.film-card:nth-child(even){transform:translateY(125px)}
.film-card:nth-child(even).in-view{transform:translateY(85px)}
.film-card:nth-child(odd).in-view{transform:translateY(-15px)}
.film-image{height:clamp(260px,34vw,510px);position:relative;overflow:hidden;background:radial-gradient(ellipse,#21344e,#07101a);border:1px solid #c8ddeb42;box-shadow:0 24px 90px #000a}
.film-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#05080faa,transparent 50%),linear-gradient(90deg,#04091144,transparent)}
.film-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.1);transform:scale(1.12);transition:transform 1.7s var(--ease)}
.film-card.in-view img{transform:scale(1)}
.film-no{position:absolute;top:23px;left:25px;z-index:1;font-size:10px;letter-spacing:.2em;color:#eaf4ff}
.film-caption{display:grid;grid-template-columns:1fr auto;align-items:end;padding:23px 2px 0;gap:0 15px}
.film-caption>span{grid-column:1/-1;color:var(--aqua);font-size:9px;letter-spacing:.22em;font-weight:700}
.film-caption h3{font-size:clamp(27px,3.2vw,49px);line-height:1.1;letter-spacing:-.065em;margin:13px 0 0}
.film-caption p{font-size:12px;color:#a6b8c8;margin:0;max-width:200px;text-align:right}
.gallery-outro{display:flex;justify-content:space-between;gap:25px;max-width:1500px;margin:200px auto 0;border-top:1px solid #a3d5ff55;padding-top:24px;color:#a9c1d2;font-size:10px;letter-spacing:.18em;font-weight:700}
.chapter-end{height:115svh;min-height:850px}
.end-layout{padding-top:150px}
.end-layout h2{font-size:clamp(75px,9.3vw,150px);line-height:.88;letter-spacing:-.095em;margin:35px 0}
.end-layout>p{max-width:580px;color:#c0cbd7;font-size:17px;line-height:1.9}
.end-actions{display:flex;align-items:center;gap:35px;margin-top:30px}
.action-button{background:linear-gradient(100deg,#b4f4ff,#79b8ed);border:0;color:#07101b;padding:19px 27px;min-width:235px;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px;font-weight:700;letter-spacing:.12em;box-shadow:0 20px 65px #63b8ff35;transition:transform .3s var(--ease),box-shadow .3s}
.action-button:hover{transform:translateY(-4px);box-shadow:0 26px 80px #63b8ff55}
.action-button span{font-size:20px}
.end-actions>span{font-size:9px;letter-spacing:.15em;color:#a3b5c5}
.end-foot{position:absolute;bottom:40px;left:8%;right:8%;border-top:1px solid #a9cce852;padding-top:25px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:10px;letter-spacing:.13em;font-weight:700;color:#adbdc9}
.end-foot a{color:var(--aqua)}
.brief-dialog{background:#0b1321;color:#eef7ff;border:1px solid #a0d7ef;box-shadow:0 40px 160px #000e;width:min(540px,92vw);max-height:92vh;padding:42px}
.brief-dialog::backdrop{background:#010307e6;backdrop-filter:blur(15px)}
.brief-dialog form{display:grid;gap:15px}
.brief-dialog h2{font-size:52px;line-height:.9;letter-spacing:-.075em;margin:13px 0}
.brief-dialog p{font-size:12px;color:#9fb5c7}
.brief-dialog label{display:grid;gap:7px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a7d0e5;font-weight:700}
.brief-dialog input,.brief-dialog select,.brief-dialog textarea{padding:12px 14px;background:#08101c;border:1px solid #8fbce366;color:white;outline-offset:2px;letter-spacing:normal;font-size:14px;resize:vertical}
.dialog-x{position:absolute;right:22px;top:16px;border:0;background:none;color:#a4dbed;font-size:22px}
#brief-status{color:#a4d5e6;font-size:12px}
.fallback-note{position:fixed;bottom:12px;left:12px;z-index:90;background:#102033e8;border:1px solid #8ad6ff66;padding:10px 15px;font-size:11px;max-width:300px}
.no-webgl .world-canvas{background:radial-gradient(ellipse at 68% 44%,#1b5070,transparent 50%),radial-gradient(ellipse at 40% 70%,#483347,transparent 70%),#060b15}
.no-webgl .world-vignette{background:linear-gradient(90deg,#05080f8a,transparent)}
.preloader{position:fixed;inset:0;z-index:500;background:#05080f;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .85s ease,visibility .85s ease}
.preloader.gone{opacity:0;visibility:hidden;pointer-events:none}
.load-brand{font:700 43px 'Space Grotesk';letter-spacing:-.05em}.load-brand span{color:var(--aqua)}
.load-line{width:230px;height:1px;background:#6487a057;overflow:hidden}.load-line i{display:block;height:100%;width:35%;background:#a6f1ff;animation:loading 1.3s ease-in-out infinite}
.preloader p{font-size:9px;letter-spacing:.25em;color:#91acbf}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:.4}55%{transform:translateY(15px);opacity:1}}
@keyframes loading{0%{transform:translateX(-130%)}100%{transform:translateX(400%)}}
@media(max-width:1100px){.chapter-copy h2{font-size:clamp(65px,10vw,120px)}.hero-content h1{font-size:clamp(65px,10.2vw,125px)}.header-index{display:none}.chapter-rail{right:1.8%}.film-gallery{gap:55px 25px}.film-caption{display:block}.film-caption p{text-align:left;margin-top:10px}}
@media(max-width:700px){
 .site-header{height:75px;padding:0 6%;background:#05080fc9}.wordmark{font-size:18px}.wordmark small{font-size:6px}.brand-glyph,.brand-glyph svg{width:35px;height:35px}.header-contact{font-size:8px;padding:10px 11px}.header-contact span{margin-left:6px}
 .chapter-rail{display:none}.chapter{height:108svh;min-height:690px}.hero-chapter{height:125svh;min-height:720px}
 .chapter-inner{padding:90px 7% 9%;justify-content:flex-start}.hero-layout{padding-top:0;justify-content:center}
 .hero-topline{top:99px;left:7%;right:7%;font-size:8px}.hero-topline span:last-child{display:none}
 .hero-content{margin-top:-15vh;max-width:100%}.hero-content h1{font-size:clamp(56px,13.7vw,95px);margin:22px 0 25px}
 .hero-content>p{font-size:13px;max-width:310px}.kicker{font-size:8px;letter-spacing:.16em}.kicker i{width:20px}
 .hero-prompt{margin-top:25px}.hero-stamp{bottom:13%;right:8%}.hero-stamp>span{font-size:70px}.hero-stamp small{font-size:7px}
 .hero-bottom{bottom:25px;left:7%;right:7%;font-size:7px;gap:20px}.hero-bottom span:first-child{display:none}
 .chapter-number{top:125px;left:7%;font-size:9px}.chapter-copy{margin-top:12vh;padding:0;max-width:100%}.chapter-copy h2{font-size:clamp(58px,12.5vw,94px);margin:24px 0}
 .chapter-copy p{font-size:13px;max-width:310px;line-height:1.85}.signature{margin-top:25px;font-size:8px;max-width:330px;gap:8px}
 .chapter-side-note{right:7%;bottom:35px;font-size:7px;max-width:250px;text-align:right}
 .world-vignette{background:linear-gradient(180deg,#05080fa8 0%,#05080f66 30%,transparent 50%,#05080fbb 100%),linear-gradient(90deg,#05080f80,transparent 70%)}
 .chapter-gallery{padding:110px 7% 95px}.gallery-intro{margin-bottom:45px}.gallery-intro h2{font-size:clamp(56px,12vw,90px)}.gallery-intro>p{font-size:13px}
 .film-gallery{grid-template-columns:1fr;gap:55px}.film-card:nth-child(even),.film-card:nth-child(even).in-view,.film-card:nth-child(odd).in-view{transform:none}
 .film-image{height:320px}.film-caption h3{font-size:36px}.film-caption p{font-size:12px}.gallery-outro{margin-top:75px;flex-wrap:wrap;font-size:8px;gap:15px}
 .chapter-end{min-height:760px}.end-layout{padding-top:120px;justify-content:center}.end-layout h2{font-size:clamp(53px,12vw,90px)}.end-layout>p{font-size:14px}
 .end-actions{align-items:flex-start;flex-direction:column;gap:20px}.end-actions>span{font-size:8px}.end-foot{bottom:20px;left:7%;right:7%;flex-wrap:wrap;font-size:8px}.end-foot span:nth-child(2){order:3;width:100%}
 .brief-dialog{padding:27px}.brief-dialog h2{font-size:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;filter:none;transform:none;transition:none}.film-card,.film-card img,.action-button{transition:none}.scroll-icon i,.hero-bottom b{animation:none}.preloader{transition:none}}
.capture-mode .site-header,.capture-mode .chapter-rail,.capture-mode .top-progress,.capture-mode main,.capture-mode .preloader,.capture-mode .fallback-note{display:none!important}
.capture-mode .world-vignette{background:radial-gradient(ellipse at 52% 46%,transparent 40%,#05080f6e 100%)}
.capture-mode .world-grain{opacity:.05}