*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#07131d;color:#f4efe4;font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.grain{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.045;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='.7'/%3E%3C/svg%3E")}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff14;position:relative;z-index:10;background:#07131de8;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800;font-size:17px}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;background:#d9362b;color:#fff;font-family:"Russo One";clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);font-size:20px}
.site-header nav{display:flex;gap:30px}
.site-header nav a{color:#9faab2;text-decoration:none;font-size:13px}
.site-header nav a:hover{color:#fff}
.header-actions{display:flex;gap:10px}
.login-btn,.request-btn,.ghost-btn{background:transparent;border:1px solid #ffffff2b;color:#f4efe4;border-radius:4px;padding:11px 16px;font:700 12px Manrope}
.request-btn{background:#d9362b;border-color:#d9362b}
.request-btn span,.primary-btn span{margin-left:13px}
.hero{min-height:calc(100vh - 82px);display:grid;grid-template-columns:44% 56%;position:relative;overflow:hidden;background:radial-gradient(circle at 73% 43%,#183849 0,#0d202c 25%,#07131d 60%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07131d 0%,transparent 64%),repeating-linear-gradient(90deg,transparent 0 110px,#ffffff03 111px 112px)}
.hero-copy{position:relative;z-index:5;padding:13vh 0 8vh 8vw;max-width:680px}
.eyebrow,.section-kicker{font-size:10px;letter-spacing:.18em;font-weight:800;color:#c9a75e}
.eyebrow span{display:inline-block;width:7px;height:7px;background:#d9362b;border-radius:50%;margin-right:8px;box-shadow:0 0 16px #d9362b}
h1,h2{font-family:"Russo One",sans-serif;font-weight:400;letter-spacing:.015em}
h1{font-size:clamp(48px,6.2vw,94px);line-height:.9;margin:25px 0 28px;text-shadow:7px 7px 0 #0d2533}
h1 em,h2 em{font-style:normal;color:#d9362b}
.lead{color:#aeb9bf;line-height:1.8;font-size:15px;max-width:500px}
.hero-actions{display:flex;gap:12px;margin:34px 0}
.primary-btn{border:0;background:#d9362b;color:#fff;border-radius:4px;padding:15px 22px;font:800 12px Manrope;letter-spacing:.04em;box-shadow:0 8px 30px #d9362b33}
.primary-btn:hover,.request-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ghost-btn:hover,.login-btn:hover{background:#ffffff08}
.portal-note{display:flex;align-items:center;gap:13px;border-left:2px solid #c9a75e;background:#ffffff07;padding:13px 16px;width:max-content;margin-top:26px}
.portal-icon{color:#c9a75e;font-size:16px}
.portal-note strong,.portal-note small{display:block}
.portal-note strong{font-size:11px}
.portal-note small{font-size:10px;color:#75828a;margin-top:3px}
.hero-scene{position:relative;min-height:760px;isolation:isolate}
.info-panel{position:absolute;z-index:8;left:8%;top:18%;width:370px;min-height:350px;padding:25px 28px;background:linear-gradient(145deg,#e9dfca,#d5c8ae);color:#17232b;border:1px solid #bba883;box-shadow:18px 18px 0 #071019,0 25px 70px #0006;transform:rotate(-1.2deg)}
.info-panel:before{content:"";position:absolute;inset:8px;border:1px solid #17232b33;pointer-events:none}
.panel-top{display:flex;justify-content:space-between;font:800 9px Manrope;letter-spacing:.13em;color:#725f42}
.panel-line{height:3px;background:#d9362b;width:70px;margin:18px 0}
.info-panel h2{font-size:34px;line-height:1.03;margin:0}
.info-panel p{font-size:12px;line-height:1.6;color:#5e5a50}
.panel-window{display:inline-flex;align-items:center;gap:9px;border:1px solid #17232b44;padding:9px 11px;font-size:9px;font-weight:800;margin-top:8px}
.window-dot{width:7px;height:7px;border-radius:50%;background:#3e9d62;box-shadow:0 0 9px #3e9d62}
.peter{position:absolute;z-index:10;height:min(91vh,920px);max-height:920px;width:auto;left:27%;bottom:-7px;filter:drop-shadow(20px 25px 25px #0008);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-scene:hover .peter{transform:translateY(-6px) rotate(.35deg)}
.comic-note{position:absolute;z-index:9;right:10%;top:9%;background:#d9362b;color:#fff;padding:12px 16px;font:20px "Russo One";line-height:1;transform:rotate(6deg);clip-path:polygon(4% 0,96% 7%,100% 88%,15% 100%,0 45%);text-shadow:2px 2px 0 #7f1d18}
.radial{position:absolute;border:1px solid #c9a75e22;border-radius:50%}
.radial-one{width:500px;height:500px;right:-150px;top:15%}
.radial-two{width:760px;height:760px;right:-290px;top:-2%}
.manifesto{padding:135px 8vw;background:#102532;display:grid;grid-template-columns:1fr 1fr;gap:100px;position:relative;overflow:hidden}
.manifesto-visual{display:flex;align-items:center;justify-content:center;min-height:420px}
.window-frame{width:280px;height:340px;border:2px solid #c9a75e;position:relative;display:grid;place-items:center;transform:rotate(-5deg);box-shadow:15px 15px 0 #d9362b}
.window-frame:before,.window-frame:after{content:"";position:absolute;background:#c9a75e}
.window-frame:before{width:1px;height:100%;left:50%;top:0}
.window-frame:after{height:1px;width:100%;top:50%;left:0}
.window-frame span{font:110px "Russo One";color:#f4efe4;z-index:1}
.window-frame small{position:absolute;bottom:13px;left:15px;color:#c9a75e;font-size:9px;letter-spacing:.18em}
.manifesto h2,.access h2,.request h2,.faq h2{font-size:clamp(42px,5vw,72px);line-height:.95;margin:18px 0}
.manifesto p{color:#9eabb1;line-height:1.8;max-width:500px}
.principles{margin-top:34px;border-top:1px solid #ffffff18}
.principles div{display:flex;gap:25px;padding:15px 0;border-bottom:1px solid #ffffff18;font-size:13px}
.principles b{color:#d9362b;font-size:11px}
.access{padding:135px 8vw;background:#e9dfca;color:#17242c}
.access .section-kicker{color:#9d2b24}
.access-heading{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.access-heading p{color:#626b70;line-height:1.8;max-width:440px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}
.steps article{border-top:3px solid #172b36;padding:24px 0}
.steps span{font:12px "Russo One";color:#d9362b}
.steps h3{font-size:21px;margin:25px 0 10px}
.steps p{color:#626b70;line-height:1.7;font-size:13px}
.request{padding:120px 8vw;background:#d9362b;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.request .section-kicker{color:#ffdc99}
.request h2{color:#fff}
.request-copy p{color:#ffe4d9;line-height:1.8;max-width:430px}
.request-form{background:#122530;padding:32px;box-shadow:18px 18px 0 #7e211c}
.request-form label{display:block;margin-bottom:18px}
.request-form label span{display:block;color:#aebbc0;font-size:10px;font-weight:800;letter-spacing:.08em;margin-bottom:8px}
.request-form input{width:100%;border:1px solid #ffffff1d;background:#0a1821;color:#fff;padding:14px;border-radius:3px;outline:none}
.request-form input:focus{border-color:#c9a75e}
.request-form small{display:block;color:#718089;font-size:9px;line-height:1.5;margin-top:13px}
.large{padding:17px 24px}
.faq{padding:130px 8vw;background:#f3ecdf;color:#17242c}
.faq .section-kicker{color:#9d2b24}
.faq details{max-width:850px;border-top:1px solid #17242c33;padding:22px 0}
.faq details:last-child{border-bottom:1px solid #17242c33}
.faq summary{cursor:pointer;font-size:16px;font-weight:800;list-style:none;display:flex;justify-content:space-between}
.faq summary:after{content:"+";font:20px "Russo One";color:#d9362b}
.faq details[open] summary:after{content:"−"}
.faq details p{max-width:700px;color:#626b70;line-height:1.7;font-size:13px;margin:15px 0 0}
footer{display:flex;justify-content:space-between;padding:25px 8vw;background:#061018;color:#67737b;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.toast{position:fixed;z-index:50;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:#e9dfca;color:#17232b;padding:14px 20px;border-left:4px solid #d9362b;box-shadow:0 15px 45px #0008;font-size:12px;font-weight:800;transition:.35s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){
  .site-header nav{display:none}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:90px 8vw 40px;max-width:700px}
  .hero-scene{min-height:680px;margin-top:-30px}
  .info-panel{left:8%;top:10%;width:330px}
  .peter{height:760px;left:30%;bottom:0}
  .comic-note{right:7%}
  .manifesto{grid-template-columns:1fr}
  .access-heading{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media(max-width:650px){
  .site-header{height:70px;padding:0 20px}
  .header-actions{gap:5px}
  .login-btn{padding:9px 10px}
  .request-btn{padding:9px 10px}
  .hero-copy{padding:70px 22px 20px}
  .hero-scene{min-height:650px}
  .info-panel{width:270px;min-height:290px;left:8%;top:7%;padding:20px}
  .info-panel h2{font-size:27px}
  .info-panel p{font-size:10px}
  .peter{height:600px;left:21%;bottom:0}
  .comic-note{top:2%;right:5%;font-size:13px}
  .manifesto,.access,.request,.faq{padding:85px 22px}
  .manifesto-visual{min-height:340px}
  .window-frame{width:220px;height:270px}
  .request{grid-template-columns:1fr;gap:45px}
  footer{padding:22px;flex-direction:column;gap:8px}
}

/* --- Ship / Petersburg atmosphere --- */
.hero-scene:before{
  content:none !important;
  display:none !important;
}
.hero-scene:after{
  content:none !important;
  display:none !important;
}
.window-wood-frame{
  position:absolute;
  z-index:7;
  inset:5% 4% 1% 2%;
  pointer-events:none;
}
.window-wood-frame:before,.window-wood-frame:after{
  content:"";
  position:absolute;
  background:repeating-linear-gradient(8deg,#9b6131 0 10px,#75401f 11px 14px,#b8793d 15px 18px);
  box-shadow:inset 0 0 0 2px #3a2114,0 4px 9px #0007;
}
.window-wood-frame:before{left:-2px;right:-2px;top:-2px;height:19px}
.window-wood-frame:after{left:-2px;right:-2px;bottom:-2px;height:19px}
.wood-corner{
  position:absolute;width:46px;height:46px;border:5px solid #c08a4c;
  filter:drop-shadow(0 3px 4px #0008);
}
.corner-tl{left:-4px;top:-4px;border-right:0;border-bottom:0}
.corner-tr{right:-4px;top:-4px;border-left:0;border-bottom:0}
.corner-bl{left:-4px;bottom:-4px;border-right:0;border-top:0}
.corner-br{right:-4px;bottom:-4px;border-left:0;border-top:0}

.petersburg-backdrop{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  opacity:.72;
}
.sky-glow{
  position:absolute;
  width:650px;height:650px;
  right:2%;top:2%;
  background:radial-gradient(circle,#d8a75b18 0,#52788a10 35%,transparent 67%);
}
.water{
  position:absolute;
  left:4%;right:0;bottom:0;height:27%;
  background:
    repeating-linear-gradient(177deg,transparent 0 9px,#b4c5c61a 10px 11px),
    linear-gradient(#102b37aa,#07151e);
  transform:skewY(-1deg);
}
.city{
  position:absolute;
  bottom:20%;
  height:31%;
  width:48%;
  opacity:.38;
}
.city-left{left:3%}
.city-right{right:0}
.building{
  position:absolute;
  bottom:0;
  display:block;
  background:linear-gradient(90deg,#8d744f33,#d0b47755,#70583d33);
  border:1px solid #d7bd8b22;
}
.b1{left:3%;width:22%;height:53%}.b2{left:28%;width:18%;height:73%}.b3{left:50%;width:25%;height:43%}
.b4{left:2%;width:22%;height:62%}.b5{left:27%;width:19%;height:48%}.b6{left:50%;width:29%;height:72%}
.dome{
  position:absolute;left:30%;bottom:63%;width:70px;height:35px;
  border-radius:70px 70px 0 0;background:#c6aa7250;
  border:1px solid #e1ca982e;
}
.dome:after{
  content:"";position:absolute;left:50%;bottom:100%;width:2px;height:42px;background:#d6bd8740;
}
.spire{
  position:absolute;left:53%;bottom:72%;width:4px;height:130px;background:#d8c18b66;
}
.spire:after{
  content:"";position:absolute;left:-13px;top:4px;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:28px solid #d8c18b44;
}

/* Final composition: wood stays only as the window frame; the world fills the opening. */
.hero-scene{
  background:transparent !important;
}
.world-backdrop{
  z-index:0;
  border-radius:18px;
}
.window-wood-frame{
  z-index:7;
  pointer-events:none;
  background:
    linear-gradient(90deg,#4b2a16 0%,#8a5730 8%,#5c341d 18%,#9b6436 31%,#542f1b 48%,#8d5930 66%,#4b2916 83%,#7d4d2a 100%);
  border:18px solid #4b2b18;
  box-shadow:
    inset 0 0 0 3px #c9a75e,
    inset 0 0 0 7px #6d401f,
    inset 0 0 0 10px #321b10,
    0 16px 35px #0009;
}
.window-wood-frame:before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:24px;
  background:
    repeating-linear-gradient(8deg,transparent 0 18px,#d6a16a12 19px 21px,transparent 22px 42px);
  mix-blend-mode:screen;
}
.window-wood-frame:after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid #e1bd6b80;
  border-radius:10px;
}
.world-backdrop:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%,transparent 0 43%,#07131d25 75%),
    linear-gradient(180deg,#08192508,#07131d55);
  z-index:2;
}
.world-globe{
  opacity:.82;
}
.peter{
  z-index:10 !important;
}
.info-panel{
  z-index:9 !important;
}
.comic-note{
  z-index:11 !important;
}
@media (max-width: 900px){
  .world-globe{
    width:420px;height:420px;left:12%;top:10%;
  }
  .window-wood-frame{border-width:13px}
}

/* === WORLD WINDOW — final composition ===
   The generated maritime illustration fills the window opening.
   Wood remains exclusively as the surrounding window frame. */
.petersburg-backdrop{
  position:absolute;
  z-index:0;
  inset:5% 4% 1% 2%;
  overflow:hidden;
  opacity:1;
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(7,19,29,.04), rgba(7,19,29,.18)),
    url("assets/world-backdrop.png") center center / cover no-repeat;
  box-shadow: inset 0 0 80px rgba(7,19,29,.28);
}

/* The old CSS-built Petersburg silhouettes are replaced by the illustration. */
.petersburg-backdrop > *{display:none}

/* Keep the decorative compass rings from competing with the illustration. */
.radial{display:none}

/* Transparent center: the wood is only the window surround. */
.window-wood-frame{
  z-index:7;
  inset:5% 4% 1% 2%;
  pointer-events:none;
  background:transparent;
  border:18px solid #4b2b18;
  box-shadow:
    inset 0 0 0 3px #c9a75e,
    inset 0 0 0 7px #6d401f,
    inset 0 0 0 10px #321b10,
    0 16px 35px #0009;
}

/* Subtle wood grain on the frame itself, without covering the opening. */
.window-wood-frame:before{
  content:"";
  position:absolute;
  inset:-18px;
  border:18px solid transparent;
  border-image:repeating-linear-gradient(
    8deg,
    #6a3b20 0 14px,
    #9a6133 15px 24px,
    #5a301a 25px 34px,
    #b0743c 35px 39px
  ) 18;
  pointer-events:none;
  opacity:.92;
}

.window-wood-frame:after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid #e1bd6b80;
  border-radius:4px;
  pointer-events:none;
}

.peter{z-index:10 !important}
.info-panel{z-index:9 !important}
.comic-note{z-index:11 !important}

@media (max-width:900px){
  .petersburg-backdrop{inset:5% 4% 1% 2%}
  .window-wood-frame{border-width:13px}
}

@media (max-width:650px){
  .window-wood-frame{border-width:11px}
}

/* === WORLD WINDOW: explicit image layer === */
.hero-scene{position:relative;}
.petersburg-backdrop{
  position:absolute !important;
  z-index:0 !important;
  inset:5% 4% 1% 2% !important;
  overflow:hidden;
  opacity:1 !important;
  background:#172d36 !important;
  border-radius:0 !important;
}
.petersburg-backdrop .world-image{
  display:block !important;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.petersburg-backdrop:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,19,29,.03),rgba(7,19,29,.12));
}
.window-wood-frame{
  z-index:7 !important;
  background:transparent !important;
  border:18px solid #4b2b18 !important;
  box-shadow:inset 0 0 0 3px #c9a75e,inset 0 0 0 7px #6d401f,inset 0 0 0 10px #321b10,0 16px 35px #0009 !important;
}
.radial{display:none !important;}
.peter{z-index:10 !important;}
.info-panel{z-index:9 !important;}
.comic-note{z-index:11 !important;}
@media(max-width:900px){.petersburg-backdrop{inset:5% 4% 1% 2% !important}.window-wood-frame{border-width:13px !important}}
@media(max-width:650px){.window-wood-frame{border-width:11px !important}}


/* FINAL WORLD WINDOW LAYER — deliberately independent from the old Petersburg CSS. */
.world-backdrop-layer{
  position:absolute !important;
  z-index:2 !important;
  left:2% !important;
  right:4% !important;
  top:5% !important;
  bottom:1% !important;
  overflow:hidden !important;
  opacity:1 !important;
  background:#172d36 !important;
}
.world-backdrop-layer .world-image{
  position:absolute !important;
  display:block !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.world-backdrop-layer:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,19,29,.02),rgba(7,19,29,.10));
  pointer-events:none;
}
/* The wooden window frame is above the illustration, while Peter/card remain above both. */
.window-wood-frame{z-index:7 !important;background:transparent !important;}
.peter{z-index:10 !important;}
.info-panel{z-index:9 !important;}
.comic-note{z-index:11 !important;}
@media(max-width:900px){.world-backdrop-layer{left:2% !important;right:4% !important;top:5% !important;bottom:1% !important}}