/* ══════════════════════════════════════════════════════════════════════
   KAMALOV SYSTEMS  ·  v3
   Built on what actually makes izanami read expensive, measured off the page
   rather than guessed at: max type 45px, ONE font weight, THREE colours, six
   sections, and enormous emptiness. Restraint is the luxury. v2 failed because
   it was a dense marketing page with 102px headlines - loud, not expensive.
   Corner-anchored metadata replaces a nav bar; hairline-and-label replaces
   buttons; ambient motion replaces scroll gimmicks.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --void:#08090B; --deep:#0E1114; --panel:#13171B;
  --ink:#D9D7D4;            /* warm off-white, izanami's exact value */
  --dim:#B2B0AC; --faint:#87857F;   /* near the ink, not a separate grey scale */
  --rule:rgba(217,215,212,.17); --rule-2:rgba(217,215,212,.09);
  --accent:#7B8FFF;
  --fd:'Bodoni Moda',Georgia,serif;
  --fs:Archivo,system-ui,sans-serif;
  --ft:Archivo,"Noto Sans Arabic","Noto Sans Thai","Noto Sans Devanagari",system-ui,sans-serif;
  --gut:max(24px,calc(50vw - 620px));
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--fs);
  font-size:15px;line-height:26px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ONE display weight, one text weight. izanami ships weight 400 and nothing else. */
h1,h2,h3{font-family:var(--fd);margin:0;font-weight:400;letter-spacing:-.008em;
  font-optical-sizing:none;font-variation-settings:'opsz' 16,'wght' 450}
p{margin:0} a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

.wrap{padding-inline:var(--gut)}
/* the void. izanami's content occupies roughly a quarter of its page height. */
.sec{padding-block:clamp(76px,7.5vw,116px)}
section[id]{scroll-margin-top:80px}

/* type scale: nothing above 52px anywhere on the page */
.h1{font-size:clamp(29px,3.5vw,52px);line-height:1.22}
.h2{font-size:clamp(25px,2.5vw,37px);line-height:1.26}
.h3{font-size:19px;line-height:27px}
.body{color:var(--dim);font-size:15px;line-height:26px;max-width:44ch}
/* corner + rail metadata. NOT a section eyebrow above a heading - that pairing
   is the AI tell. This is the frame of the page, which is a different job. */
.micro{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  font-weight:400;line-height:1.5}
.num{font-variant-numeric:tabular-nums}

/* hairline-and-label, izanami's CTA. A button shouts; this does not. */
.hl{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding-block:6px}
.hl::before{content:"";width:46px;height:1px;background:var(--rule);transition:width .5s var(--ease),background .3s}
.hl:hover::before{width:70px;background:var(--ink)}

/* reveals */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.grain{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ═══ HEADER, corner anchored, and it GETS OUT OF THE WAY ═══
   v2's bar sat over the content the whole way down the page. This one retreats
   on scroll-down and returns on scroll-up, so nothing is ever covered while reading. */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .5s var(--ease),background .4s;
  transform:translateY(0)}
header.hide{transform:translateY(-100%)}
header.solid{background:rgba(8,9,11,.88);backdrop-filter:blur(12px)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{font-family:var(--fd);font-size:16px;letter-spacing:.02em}
.hright{display:flex;align-items:center;gap:26px}
.hright a{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);transition:color .25s}
.hright a:hover{color:var(--ink)}
.hright a.on{color:var(--ink)}
@media (max-width:520px){.hright{gap:18px}.hright a{letter-spacing:.08em}}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--void);
  display:flex;flex-direction:column;justify-content:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:1;
  transform:scale(1.05);animation:push 26s ease-out forwards}
@keyframes push{to{transform:scale(1)}}
#fog{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,9,11,.60) 0%,rgba(8,9,11,.14) 44%,rgba(8,9,11,.82) 100%),
             linear-gradient(90deg,rgba(8,9,11,.78) 0%,rgba(8,9,11,.16) 58%,rgba(8,9,11,0) 100%)}
.hero-in{position:relative;z-index:3;width:100%}
.hero h1{max-width:19ch}
.hero .sub{margin-top:26px;max-width:38ch;color:var(--dim);font-size:15px;line-height:26px}
.hero .go{margin-top:40px}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:none}#fog{display:none}}


/* ═══ SPLIT LAYOUT with a rotated side label (izanami's rail) ═══ */
.lab{position:absolute;left:0;top:0;writing-mode:vertical-rl;transform:rotate(180deg);
  height:100%;display:flex;align-items:flex-end;padding-block:4px}
.railed{position:relative;padding-left:52px}
@media (max-width:760px){.railed{padding-left:0}.lab{display:none}}

/* ═══ LIVE PRODUCT ═══ */
.chrome{margin-top:40px;border:1px solid var(--rule);overflow:hidden;background:var(--panel);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.chrome-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--rule-2)}
.dots{display:flex;gap:5px}.dots i{width:7px;height:7px;border-radius:999px;background:rgba(217,215,212,.15);display:block}
.addr{flex:1;text-align:center;font-size:10.5px;letter-spacing:.1em;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame{position:relative;overflow:hidden;background:#F7F6F3;height:400px}
.frame iframe{position:absolute;top:0;left:0;width:1440px;height:1010px;border:0;
  transform-origin:top left;transform:scale(.46)}
.frame .shield{position:absolute;inset:0;z-index:3}
.chrome-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--rule-2);font-size:12px;color:var(--faint)}
.chrome-foot a{color:var(--ink)}

/* ═══ PHONE + the annotation track ═══ */
.demo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center;margin-top:44px}
@media (max-width:900px){.demo{grid-template-columns:1fr;gap:40px}}
.phone{position:relative;width:100%;max-width:300px;aspect-ratio:9/16.6;justify-self:center;
  border-radius:38px;padding:10px;background:linear-gradient(160deg,#20242A,#0A0C0F);
  box-shadow:0 50px 80px -34px rgba(0,0,0,.92),0 0 0 1px rgba(217,215,212,.07)}
.screen{height:100%;border-radius:29px;background:#0F1216;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(217,215,212,.05)}
.sbar{padding:14px 16px 10px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:10px;flex:0 0 auto}
.sbar .av{width:29px;height:29px;border-radius:999px;background:linear-gradient(140deg,var(--accent),#3A46A8);flex:0 0 auto}
.sbar .who{display:block;font-size:13px;line-height:1.2;color:var(--ink)}
.sbar .st{display:block;font-size:10.5px;line-height:1.2;margin-top:3px;color:var(--faint)}
.thread{flex:1;padding:15px 13px;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;overflow:hidden}
.bub{max-width:84%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:19px;font-family:var(--ft);
  animation:pop .5s var(--ease) both}
.bub.them{align-self:flex-start;background:rgba(217,215,212,.07);color:var(--ink);border-bottom-left-radius:5px}
.bub.us{align-self:flex-end;background:var(--accent);color:#080A0E;border-bottom-right-radius:5px}
.bub[dir="rtl"]{text-align:right}
@keyframes pop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.typing{align-self:flex-end;display:flex;gap:4px;padding:11px 14px;border-radius:16px;background:var(--accent);
  border-bottom-right-radius:5px;animation:pop .3s var(--ease) both}
.typing i{width:5px;height:5px;border-radius:999px;background:rgba(8,10,14,.5);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bub,.typing,.typing i{animation:none}}

/* the narration Albert asked for: say out loud what the agent is doing and WHY,
   the human pacing especially, because that is the thing being sold. */
.track{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule-2)}
.tr{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--rule-2);
  opacity:.46;transition:opacity .6s var(--ease)}
.tr.on{opacity:1}
.tr .t{color:var(--faint);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.1em;padding-top:4px}
.tr .h{font-family:var(--fd);font-size:17px;line-height:24px;color:var(--ink)}
.tr .d{margin-top:5px;color:var(--dim);font-size:13.5px;line-height:22px;max-width:46ch}
.tr.on .t{color:var(--accent)}
@media (max-width:520px){.tr{grid-template-columns:52px 1fr;gap:14px}}

/* ═══ STEPS ═══ */
.steps{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--rule-2)}
.step{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--rule-2)}
.step .n{color:var(--faint);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.15em;padding-top:6px}
.step p{margin-top:9px;color:var(--dim);font-size:14.5px;line-height:24px;max-width:52ch}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:8px;padding:24px 0}.step .n{padding-top:0}}

/* ═══ CHANNELS, the loudest thing on the page, by request ═══ */
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:var(--rule-2);border:1px solid var(--rule-2)}
.ch{background:var(--void);padding:52px 26px;display:flex;flex-direction:column;align-items:center;
  gap:18px;text-align:center;transition:background .4s}
.ch:hover{background:var(--deep)}
.ch svg{width:46px;height:46px;color:var(--ink);opacity:.92}
.ch b{font-weight:400;font-size:17px;color:var(--ink);letter-spacing:.01em}
.ch span{font-size:12px;line-height:19px;color:var(--faint)}
@media (max-width:860px){.chan{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.ch{padding:32px 16px}}

/* ═══ PRICING ═══ */
.plans{margin-top:44px;border-top:1px solid var(--rule-2)}
.plan{display:grid;grid-template-columns:minmax(160px,.3fr) minmax(0,1fr) auto;gap:30px;align-items:baseline;
  padding:28px 0;border-bottom:1px solid var(--rule-2)}
.plan .p{font-size:15px;color:var(--ink)}
.plan .b{font-size:13.5px;line-height:22px;color:var(--faint);max-width:46ch}
.plan .v{font-family:var(--fd);font-variation-settings:'opsz' 14,'wght' 450;font-optical-sizing:none;
  font-variant-numeric:tabular-nums;font-size:clamp(26px,2.4vw,34px);white-space:nowrap;text-align:right;line-height:1}
.plan .per{font-family:var(--fs);font-size:12px;color:var(--faint);letter-spacing:0}
.plan sup{font-size:.5em;color:var(--accent);top:-.7em;position:relative}
.note{margin-top:26px;font-size:12.5px;line-height:21px;color:var(--faint);max-width:60ch}
.note sup{color:var(--accent)}
@media (max-width:760px){.plan{grid-template-columns:1fr auto;gap:6px 18px;padding:22px 0}
  .plan .b{grid-column:1/-1;order:3}.plan .v{order:2}}

/* ═══ CLOSE ═══ */
.close{position:relative;overflow:hidden;background:var(--void)}
.close-bg{position:absolute;inset:0;z-index:0}
.close-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;opacity:1}
.close::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.18) 46%,rgba(8,9,11,.80) 100%),
             linear-gradient(90deg,rgba(8,9,11,.80) 0%,rgba(8,9,11,.22) 58%,rgba(8,9,11,0) 100%)}
.close-in{position:relative;z-index:2}
.close .row{margin-top:40px;display:flex;gap:40px;flex-wrap:wrap;align-items:center}
/* no rule above this row. v2 had a border-top here and it read as a stray line. */
.dl{margin-top:48px;display:flex;gap:32px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
.dl a{transition:color .25s}.dl a:hover{color:var(--ink)}

/* ═══ FOOTER ═══ */
footer{background:var(--void);padding-bottom:40px;border-top:1px solid var(--rule-2)}
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:64px}
@media (max-width:860px){.fc{grid-template-columns:repeat(2,1fr);gap:30px}}
.fc h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 18px}
.fc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fc a{font-size:13.5px;color:var(--dim);transition:color .25s}
.fc a:hover{color:var(--ink)}
.fb{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule-2);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ═══ SUB-PAGE furniture ═══ */
.phead{padding-block:clamp(120px,13vw,168px) clamp(40px,5vw,64px);border-bottom:1px solid var(--rule-2)}
.phead .h1{max-width:20ch}
.phead .body{margin-top:22px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin-bottom:26px;transition:color .25s}
.back:hover{color:var(--ink)}
.back::before{content:"";width:22px;height:1px;background:currentColor}
.prose-block{max-width:66ch}
.prose-block p+p{margin-top:20px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2);margin-top:44px}
.pcell{background:var(--void);padding:34px 30px}
.pcell h3{font-size:19px;line-height:27px}
.pcell p{margin-top:10px;color:var(--dim);font-size:14px;line-height:23px}
.pcell .k{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}}
.faq{margin-top:44px;border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule-2)}
.faq summary{padding:22px 0;cursor:pointer;font-family:var(--fd);font-size:18px;line-height:26px;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--faint);font-family:var(--fs);font-size:15px}
.faq details[open] summary::after{content:"‘2"}
.faq .a{padding:0 0 24px;color:var(--dim);font-size:14.5px;line-height:24px;max-width:64ch}

/* ═══ Borrowed from the awwwards dark-editorial winners ═══
   1. /nk.studio ("20 years inspired by people") underlines the KEY WORDS of a serif
      headline with a hairline that sits well below the baseline. It gives a large
      serif line an editorial emphasis without bold, which matters here because the
      whole page runs at a single font weight.
   2. Revelatio Studio lays a fine horizontal scanline over its dark hero footage.
      Combined with grain it reads as film rather than flat CSS, and it costs one
      repeating-linear-gradient. */
.u{position:relative;white-space:nowrap}
.u::after{content:"";position:absolute;left:0;right:0;bottom:.01em;height:1px;
  background:currentColor;opacity:.34;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .45s}
.wd.in .u::after,.rv.in .u::after,.u.lit::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.u::after{transform:scaleX(1);transition:none}}

.scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px)}
@media (prefers-reduced-motion:reduce){.scan{opacity:.3}}

/* ═══ CONTACT MARKS ═══
   "@albertoprivet" on its own could be Instagram, X, anything. Every contact
   now carries its own logo and says which network it is. */
.dl{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.dl a{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim);transition:color .25s}
.dl a:hover{color:var(--ink)}
.dl svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}
.dl a:hover svg{opacity:1}

/* ═══ BANDS ═══
   izanami's breathing device: a full-bleed photograph carrying ONE line and
   nothing else. These two are the page's only luminous frames, which is the
   whole point - the middle was four consecutive sections of black with type
   on it, and that reads as unfinished rather than restrained. */
.band{position:relative;min-height:68vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--void)}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,11,.34) 0%,rgba(8,9,11,0) 34%,rgba(8,9,11,.72) 100%)}
.band-in{position:relative;z-index:2;width:100%;padding-block:clamp(44px,6vw,74px)}
.band h2{font-size:clamp(24px,2.6vw,38px);line-height:1.24;max-width:22ch}
.band .n{margin-top:14px;font-size:13.5px;line-height:22px;color:var(--dim);max-width:46ch}
@media (max-width:760px){.band{min-height:52vh}}

/* ═══ HERO VIDEO ═══
   The still stays in the DOM as the base layer and the poster, so the hero is
   never empty: if the video 404s, is blocked, or the visitor asked for reduced
   motion, the photograph is already there and nothing has to be swapped in.
   The clip only fades over the top once it can actually play. */
.hero-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 50%;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-vid.on{opacity:1}
.hero-vid{transition:opacity .9s linear}
@media (prefers-reduced-motion:reduce){.hero-vid{display:none}}

/* ═══ SUB-PAGE HERO IMAGE ═══
   Every sub-page opened as pure black type. That is not restraint, it is an
   unfinished page. Each now opens on a luminous frame from the existing set. */
.phead{position:relative;overflow:hidden;min-height:52vh;display:flex;align-items:flex-end;
  padding-block:clamp(130px,14vw,180px) clamp(44px,5vw,66px)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.phead::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.20) 40%,rgba(8,9,11,.90) 100%),
             linear-gradient(90deg,rgba(8,9,11,.76) 0%,rgba(8,9,11,.24) 58%,rgba(8,9,11,0) 100%)}
.phead-in{position:relative;z-index:2;width:100%}

/* ═══ LAYERED COMPOSITION ═══
   izanami's richest section is not a full-bleed photo, it is three photographs
   at different scales overlapping each other with the headline across them.
   A single edge-to-edge image is the cheaper, flatter device. This is the other. */
.comp{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  align-items:center;gap:0 24px;padding-block:clamp(80px,9vw,132px)}
.comp .big{grid-column:1 / span 8;grid-row:1;position:relative;z-index:1;overflow:hidden;
  box-shadow:0 50px 90px -46px rgba(0,0,0,.95)}
.comp .big img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.comp .small{grid-column:7 / span 5;grid-row:1;align-self:end;position:relative;z-index:2;
  margin-bottom:-13%;overflow:hidden;border:1px solid var(--rule);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.95)}
.comp .small img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.comp .say{grid-column:1 / span 6;grid-row:2;margin-top:clamp(44px,6vw,80px);position:relative;z-index:3}
.comp .say h2{font-size:clamp(24px,2.6vw,38px);line-height:1.24;max-width:20ch}
.comp .say p{margin-top:16px;color:var(--dim);font-size:14.5px;line-height:24px;max-width:44ch}
@media (max-width:860px){
  .comp{grid-template-columns:1fr;gap:0}
  .comp .big,.comp .small,.comp .say{grid-column:1;grid-row:auto}
  .comp .small{margin:-18% 0 0 auto;width:66%}
  .comp .say{margin-top:34px}
}