@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root{
  --bg:#0f0907;
  --bg-soft:#18100c;
  --panel:#17100d;
  --panel-2:#211511;
  --ink:#f6ede1;
  --muted:#c2aa97;
  --accent:#dd9330;
  --accent-2:#f4bb63;
  --line:rgba(255,226,190,.12);
  --ok:#8dc47b;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Manrope',system-ui,sans-serif;
  background:
    radial-gradient(circle at top right, rgba(221,147,48,.18), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(116,52,12,.25), transparent 35%),
    linear-gradient(180deg, #110907 0%, #090504 100%);
  color:var(--ink);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.shell{width:min(1180px, calc(100% - 40px)); margin:0 auto}
.page-shell{display:flex; min-height:100vh}
.frame-rail{
  width:280px; flex:0 0 280px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--line);
  padding:28px 22px 26px;
  background:linear-gradient(180deg, rgba(27,16,12,.94), rgba(16,9,8,.92));
}
.rail-brand{display:flex; flex-direction:column; gap:16px; margin-bottom:30px}
.rail-brand__mark{
  width:78px;height:78px;border-radius:24px;
  background:linear-gradient(160deg,#2a1b13,#0f0d0c 55%);
  border:1px solid rgba(244,187,99,.45); box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  padding:14px;
}
.rail-brand__copy strong{display:block; font-size:1.5rem; letter-spacing:.02em}
.rail-brand__copy span{display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.24em; margin-top:6px}
.rail-nav{display:grid; gap:8px; margin:30px 0}
.rail-nav a{
  padding:14px 16px; border-radius:16px; color:#dfc4b0; font-weight:600;
  border:1px solid transparent; transition:.35s ease;
}
.rail-nav a:hover,.rail-nav a.active{background:rgba(221,147,48,.08); border-color:rgba(244,187,99,.2); color:#fff; transform:translateX(4px)}
.rail-note{
  margin-top:auto; padding:18px; border-radius:24px; background:linear-gradient(180deg, rgba(244,187,99,.09), rgba(244,187,99,.02));
  border:1px solid rgba(244,187,99,.16)
}
.rail-note small{display:block; color:var(--accent-2); text-transform:uppercase; letter-spacing:.22em; margin-bottom:8px}
.rail-note p{margin:0; color:#e5d4c7; font-size:.92rem; line-height:1.65}
.rail-contacts{margin-top:18px; font-size:.88rem; color:var(--muted); line-height:1.7}
.main-stage{flex:1; min-width:0}
.mobile-topbar{display:none}
.hero{padding:54px 0 36px; position:relative; overflow:hidden}
.hero::before{content:''; position:absolute; inset:40px 0 auto auto; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle, rgba(221,147,48,.12), transparent 64%); filter:blur(12px); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:54px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--accent-2); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem}
.eyebrow::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.hero h1{font-family:'Cormorant Garamond',serif; font-size:clamp(3.7rem, 7vw, 6.8rem); line-height:.92; margin:18px 0 18px; letter-spacing:-.03em}
.hero h1 .soft{color:var(--accent-2)}
.lead{font-size:1.07rem; line-height:1.9; color:#e7d6c8; max-width:700px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px; border-radius:999px; font-weight:700; transition:.35s ease; border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg, var(--accent), #b96d12); color:#140d0a; box-shadow:0 14px 40px rgba(221,147,48,.24)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 48px rgba(221,147,48,.34)}
.btn-secondary{border-color:rgba(255,226,190,.18); color:var(--ink); background:rgba(255,255,255,.03)}
.btn-secondary:hover{border-color:rgba(244,187,99,.4); background:rgba(244,187,99,.08)}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
.hero-stats article{padding:18px 18px 16px; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:20px; min-height:118px}
.hero-stats strong{font-family:'Cormorant Garamond',serif; font-size:2.35rem; color:var(--accent-2); display:block}
.hero-stats span{display:block; font-size:.86rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-top:6px}
.hero-visual{position:relative; min-height:720px}
.hero-card{
  position:absolute; padding:18px; border-radius:28px; background:linear-gradient(180deg, rgba(29,18,13,.95), rgba(16,10,8,.94)); border:1px solid rgba(244,187,99,.16); box-shadow:var(--shadow)
}
.hero-card--glance{top:0; left:0; width:56%;}
.hero-card--glance h3,.hero-card--note h3{margin:0 0 10px; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2)}
.hero-card--glance p,.hero-card--note p{margin:0; color:#ead9cc; line-height:1.75; font-size:.96rem}
.hero-phone{position:absolute; border-radius:38px; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.12); background:#120a08}
.hero-phone img{display:block; width:100%; height:100%; object-fit:cover}
.hero-phone--one{top:86px; right:18px; width:44%; transform:rotate(3deg)}
.hero-phone--two{top:240px; left:60px; width:36%; transform:rotate(-1deg)}
.hero-card--note{right:10px; bottom:34px; width:48%}
.hero-gridline{position:absolute; inset:auto 0 22px; height:240px; background:linear-gradient(180deg, transparent, rgba(221,147,48,.07)); mask:linear-gradient(180deg, transparent, black 40%); opacity:.8}
.section{padding:44px 0}
.section-head{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; margin-bottom:28px}
.section-head h2{font-family:'Cormorant Garamond',serif; font-size:clamp(2.3rem,5vw,4.2rem); line-height:.96; margin:0}
.section-head p{max-width:520px; margin:0; color:var(--muted); line-height:1.8}
.feature-ribbon{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature-ribbon article, .info-card, .service-card, .metric-card, .contact-card, .app-detail-card, .summary-card{background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.feature-ribbon article{padding:22px; transition:transform .4s ease, border-color .4s ease, background .4s ease}
.feature-ribbon article:hover{transform:translateY(-8px); border-color:rgba(244,187,99,.34); background:rgba(255,255,255,.05)}
.icon-badge{width:54px;height:54px;border-radius:18px; display:grid; place-items:center; background:rgba(221,147,48,.1); border:1px solid rgba(244,187,99,.22); margin-bottom:16px}
.icon-badge svg{width:26px;height:26px; stroke:var(--accent-2); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.feature-ribbon h3, .service-card h3, .app-detail-card h3, .contact-card h3, .summary-card h3{margin:0 0 10px; font-size:1.2rem}
.feature-ribbon p, .service-card p, .app-detail-card p, .contact-card p, .summary-card p, .info-card p{margin:0; color:#d6c4b6; line-height:1.8}
.story-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px}
.info-card{padding:30px}
.info-card h3{margin:0 0 14px; font-size:1.1rem; color:var(--accent-2); text-transform:uppercase; letter-spacing:.16em}
.info-card ul{margin:0; padding-left:20px; color:#e8dacc; line-height:2}
.showcase-grid{display:grid; grid-template-columns:.86fr 1.14fr; gap:22px; align-items:stretch}
.showcase-visual{padding:26px; position:relative; min-height:520px; overflow:hidden}
.showcase-visual::before{content:''; position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(221,147,48,.18), transparent 65%); right:-80px; top:-90px}
.showcase-visual .poster{border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.showcase-detail{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.app-detail-card{padding:24px}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.service-card{padding:26px}
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.metric-card{padding:22px}
.metric-card small{display:block; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-2); margin-bottom:10px}
.metric-card strong{display:block; font-family:'Cormorant Garamond',serif; font-size:2.1rem; margin-bottom:8px}
.metric-card p{margin:0; color:var(--muted); line-height:1.8}
.contact-layout{display:grid; grid-template-columns:1.05fr .95fr; gap:22px}
.contact-card{padding:30px}
.kv{display:grid; gap:16px; margin-top:18px}
.kv div{padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,226,190,.1)}
.kv span{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-2); margin-bottom:7px}
.kv strong{font-size:1rem; font-weight:600; color:#fff}
.note-strip{margin-top:18px; padding:16px 18px; border-left:3px solid var(--accent); background:rgba(255,255,255,.03); border-radius:0 16px 16px 0; color:#ead7c8}
.site-footer{padding:40px 0 34px; border-top:1px solid var(--line); margin-top:48px}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:22px}
.footer-brand{padding:24px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line)}
.footer-brand .mini-mark{width:56px; height:56px; border-radius:18px; padding:8px; background:linear-gradient(160deg,#2a1b13,#0f0d0c 55%); border:1px solid rgba(244,187,99,.28); margin-bottom:14px}
.footer-brand strong{display:block; font-size:1.15rem; margin-bottom:8px}
.footer-links, .footer-legal{display:grid; gap:10px; align-content:start}
.footer-links a, .footer-legal a{padding:12px 14px; border-radius:16px; color:#d9c7b8; background:rgba(255,255,255,.03); border:1px solid transparent; transition:.3s ease}
.footer-links a:hover, .footer-legal a:hover{background:rgba(221,147,48,.08); border-color:rgba(244,187,99,.18); color:#fff}
.copyright{margin-top:20px; color:#8f7768; font-size:.88rem}
.page-title{padding:48px 0 18px}
.page-title h1{font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,5vw,5rem); line-height:.95; margin:16px 0 10px}
.page-title p{max-width:760px; color:#d9c6b7; line-height:1.9; margin:0}
.page-panels{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.policy-wrap{padding-bottom:20px}
.policy-content{padding:30px; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:32px; color:#ecddd2; line-height:1.85}
.policy-content strong{display:block; margin-top:14px; margin-bottom:8px; color:var(--accent-2); font-size:1.06rem}
.policy-content p, .policy-content div{margin:0 0 10px}
.policy-content hr{border:none; border-top:1px solid var(--line); margin:26px 0}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
.floaty{animation:floaty 7s ease-in-out infinite}
.floaty-slow{animation:floaty 9s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}
@media (max-width: 1180px){
  .frame-rail{display:none}
  .page-shell{display:block}
  .mobile-topbar{display:flex; position:sticky; top:0; z-index:20; align-items:center; justify-content:space-between; padding:16px 20px; background:rgba(17,9,7,.92); backdrop-filter:blur(18px); border-bottom:1px solid var(--line)}
  .mobile-brand{display:flex; align-items:center; gap:12px}
  .mobile-brand__mark{width:46px; height:46px; border-radius:14px; padding:8px; background:linear-gradient(160deg,#2a1b13,#0f0d0c 55%); border:1px solid rgba(244,187,99,.28)}
  .mobile-brand strong{display:block; font-size:1rem}
  .mobile-brand span{display:block; color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
  .mobile-nav-toggle{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:#fff}
  .mobile-drawer{display:none; padding:0 20px 20px; background:#110907; border-bottom:1px solid var(--line)}
  .mobile-drawer.open{display:grid; gap:10px}
  .mobile-drawer a{padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03)}
  .hero{padding-top:30px}
}
@media (max-width: 980px){
  .hero-grid,.story-grid,.showcase-grid,.contact-layout,.footer-grid{grid-template-columns:1fr}
  .showcase-detail,.service-grid,.timeline,.feature-ribbon,.page-panels,.hero-stats{grid-template-columns:1fr 1fr}
  .hero-visual{min-height:620px}
}
@media (max-width: 720px){
  .shell{width:min(100% - 28px, 1180px)}
  .hero h1{font-size:3.1rem}
  .hero-visual{min-height:500px}
  .hero-phone--one{width:52%; right:0}
  .hero-phone--two{width:42%; left:8px; top:225px}
  .hero-card--glance{width:70%}
  .hero-card--note{width:58%}
  .showcase-detail,.service-grid,.timeline,.feature-ribbon,.page-panels,.hero-stats{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
}



/* --- fixed navigation visibility and real app-logo rendering --- */
.mobile-drawer{display:none}
.mobile-topbar{display:none}
.rail-brand__mark,
.mobile-brand__mark,
.footer-brand .mini-mark{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(160deg,#2a1b13,#0f0d0c 55%);
}
.rail-brand__mark img,
.mobile-brand__mark img,
.footer-brand .mini-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.rail-brand__mark{
  padding:0;
  border-radius:24px;
}
.footer-brand .mini-mark{
  padding:0;
  border-radius:18px;
}
.mobile-brand__mark{
  padding:0;
  border-radius:14px;
}
@media (max-width:1180px){
  .mobile-topbar{display:flex}
  .mobile-drawer{display:none}
  .mobile-drawer.open{display:grid}
}