:root{
  --navy:#071a35;--navy2:#0b2a54;--blue:#1677ff;--blue2:#3aa8ff;--cyan:#64d8ff;
  --gold:#d7a84a;--gold2:#f4cf72;--ink:#0b2142;--muted:#5f7692;--line:rgba(62,128,194,.18);
  --ice:#eef7ff;--ice2:#e4f2ff;--ice3:#d9edff;--glass:rgba(255,255,255,.70);--white:#fff;--max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;color:var(--ink);line-height:1.65;
  background:
    radial-gradient(circle at 11% 8%,rgba(58,166,255,.25),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(113,211,255,.22),transparent 24%),
    linear-gradient(180deg,#eaf6ff 0%,#dff1ff 34%,#edf8ff 68%,#dcefff 100%);
  background-attachment:fixed;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.26;background-image:linear-gradient(rgba(37,123,204,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(37,123,204,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.header{position:sticky;top:0;z-index:100;background:rgba(235,247,255,.78);backdrop-filter:blur(20px) saturate(1.25);border-bottom:1px solid rgba(51,127,198,.15);box-shadow:0 8px 30px rgba(39,99,157,.08)}
.headin{height:84px;display:flex;align-items:center;gap:24px}
.brand{margin-right:auto;text-decoration:none;color:var(--navy);font-weight:900;letter-spacing:.06em;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.brand-slot{display:block;width:92px;height:1px;margin-right:auto;flex:0 0 auto}
.hero{position:relative}
.section-logo{position:absolute;top:10px;left:10px;z-index:20;width:82px;height:82px;display:flex;align-items:center;justify-content:center;pointer-events:none;filter:drop-shadow(0 8px 20px rgba(5,51,103,.22))}
.section-logo img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:950px){.section-logo{left:8px;top:8px;width:72px;height:72px}.brand-slot{width:72px}}
@media(max-width:620px){.section-logo{left:6px;top:6px;width:54px;height:54px}.brand-slot{width:54px}}
.nav{display:flex;gap:20px}.nav a{text-decoration:none;color:#18385d;font-size:12px;font-weight:800;letter-spacing:.04em;position:relative}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:.25s}.nav a:hover{color:var(--blue)}.nav a:hover:after{right:0}
.lang{border:1px solid rgba(52,126,192,.20);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.62);color:#17304f;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(37,96,151,.06)}
.hero{background:linear-gradient(180deg,#d7efff,#edf8ff);box-shadow:0 28px 70px rgba(28,104,178,.12)}
.slider{position:relative;max-width:1920px;margin:auto;aspect-ratio:16/9;overflow:hidden}
.slider:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -40px 90px rgba(9,55,100,.10)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.025) brightness(1.02)}
.dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5;padding:8px 12px;border-radius:999px;background:rgba(12,51,91,.12);backdrop-filter:blur(10px)}
.dot{width:10px;height:10px;border-radius:50%;border:1px solid white;background:rgba(255,255,255,.42);cursor:pointer;box-shadow:0 1px 6px rgba(0,48,99,.25)}.dot.active{background:white;transform:scale(1.18)}
.section{padding:118px 0 92px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(224,242,255,.94) 0%,rgba(239,249,255,.96) 42%,rgba(214,237,255,.94) 100%);border-top:1px solid rgba(73,148,215,.12);border-bottom:1px solid rgba(73,148,215,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.section:not(.dark):before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-240px;top:-250px;background:radial-gradient(circle,rgba(68,167,255,.14),rgba(95,194,255,.04) 42%,transparent 70%);pointer-events:none}
.section:not(.dark):after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;left:-220px;bottom:-220px;background:radial-gradient(circle,rgba(109,204,255,.12),transparent 70%);pointer-events:none}
.section>.wrap{position:relative;z-index:1}

.section:not(.dark){
  background-image:
    radial-gradient(circle at 18% 20%,rgba(75,173,255,.14),transparent 28%),
    radial-gradient(circle at 82% 74%,rgba(91,198,255,.11),transparent 30%),
    linear-gradient(135deg,rgba(224,242,255,.94) 0%,rgba(239,249,255,.96) 42%,rgba(214,237,255,.94) 100%);
}
.section:not(.dark)>.wrap:before{
  content:"";position:absolute;inset:-34px -24px auto auto;width:280px;height:280px;pointer-events:none;opacity:.38;
  background:radial-gradient(circle at center,rgba(255,255,255,.78) 0 2%,transparent 3%),radial-gradient(circle at center,rgba(56,152,237,.12),transparent 66%);
  background-size:34px 34px,100% 100%;border-radius:50%;mask-image:radial-gradient(circle,black,transparent 72%);
}
.section.soft{background:linear-gradient(135deg,#d8edff 0%,#e9f6ff 44%,#cfe8ff 100%);border-top:1px solid rgba(64,137,204,.16);border-bottom:1px solid rgba(64,137,204,.16);box-shadow:inset 0 24px 70px rgba(255,255,255,.34),inset 0 -22px 60px rgba(62,155,232,.06)}
.section.dark{background:radial-gradient(circle at 12% 5%,#17436f 0%,#0a2850 38%,#06172f 70%,#041023 100%);color:#fff;box-shadow:inset 0 20px 70px rgba(66,165,255,.08),inset 0 -20px 70px rgba(66,165,255,.07)}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--blue);text-transform:uppercase}.dark .eyebrow{color:#76d0ff}
.title{font-size:clamp(34px,4.6vw,58px);line-height:1.08;margin:10px 0 16px;letter-spacing:-.03em;color:#09264b;text-wrap:balance}.dark .title{color:#fff}
.lead{font-size:18px;color:var(--muted);max-width:830px;margin:0}.dark .lead{color:#c4d5e8}.intro{text-align:center}.intro .lead{margin:0 auto}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.business{margin-top:42px;border:1px solid rgba(66,139,205,.18);border-radius:28px;padding:34px;background:linear-gradient(145deg,rgba(244,251,255,.94),rgba(209,235,255,.86));box-shadow:0 22px 70px rgba(27,94,157,.12),inset 0 1px 0 rgba(255,255,255,.92);min-height:300px;position:relative;overflow:hidden;backdrop-filter:blur(10px);transition:.3s transform,.3s box-shadow}
.business:hover{transform:translateY(-5px);box-shadow:0 28px 80px rgba(27,94,157,.17),inset 0 1px 0 rgba(255,255,255,.96)}
.business:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-80px;top:-70px;background:radial-gradient(circle,rgba(20,120,255,.18),rgba(90,204,255,.07) 46%,transparent 70%)}
.business .num{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.16em}.business h3{font-size:32px;margin:8px 0;color:#082750}.business p{color:var(--muted);max-width:500px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.tag{font-size:11px;font-weight:800;color:#174d86;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(222,241,255,.86));border:1px solid rgba(58,137,210,.18);padding:7px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(38,112,178,.06)}.dark .tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#dff2ff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:38px}
.visual{border-radius:28px;overflow:hidden;background:linear-gradient(145deg,rgba(242,250,255,.96),rgba(205,233,255,.88));box-shadow:0 26px 80px rgba(22,89,151,.18),0 0 0 1px rgba(255,255,255,.72) inset;border:1px solid rgba(46,125,197,.17);padding:8px;position:relative}
.visual:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 34%,rgba(64,170,255,.08));pointer-events:none;z-index:1}
.visual img{display:block;width:100%;height:auto;border-radius:20px;filter:saturate(1.05) contrast(1.02);position:relative;z-index:0}
.dark .visual{background:linear-gradient(145deg,rgba(20,62,102,.72),rgba(5,24,48,.88));border-color:rgba(121,198,255,.16);box-shadow:0 28px 90px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.05) inset}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}.feature{padding:22px;border:1px solid rgba(61,133,198,.16);border-radius:20px;background:linear-gradient(145deg,rgba(241,249,255,.95),rgba(211,236,255,.88));box-shadow:0 12px 34px rgba(28,91,149,.08),inset 0 1px 0 rgba(255,255,255,.9)}.feature b{display:block;color:var(--navy);font-size:16px}.feature span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.dark .feature{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border-color:rgba(255,255,255,.12);box-shadow:none}.dark .feature b{color:#fff}.dark .feature span{color:#c0d1e5}
.crewline{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px}.crew{padding:14px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.crew strong{display:block}.crew small{color:#9fb3ce}
.flow{margin-top:40px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}.node{border-radius:24px;padding:28px;border:1px solid rgba(62,134,199,.17);background:linear-gradient(145deg,rgba(241,250,255,.96),rgba(207,234,255,.88));text-align:center;box-shadow:0 16px 45px rgba(31,91,148,.10),inset 0 1px 0 rgba(255,255,255,.94)}.node strong{display:block;font-size:20px;color:var(--navy)}.node span{font-size:13px;color:var(--muted)}.arrow{font-size:28px;color:var(--blue);font-weight:900;text-shadow:0 0 22px rgba(48,157,255,.30)}
.roadgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:32px 0}.step{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(91,181,255,.035));border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}.step em{font-style:normal;color:var(--gold2);font-size:11px;font-weight:900;letter-spacing:.13em}.step strong{display:block;font-size:18px;margin:8px 0}.step p{font-size:13px;color:#bdcce0;margin:0}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.proof .box{border:1px solid rgba(62,134,199,.16);border-radius:22px;padding:26px;background:linear-gradient(145deg,rgba(241,250,255,.96),rgba(205,233,255,.86));box-shadow:0 15px 44px rgba(31,91,148,.09),inset 0 1px 0 rgba(255,255,255,.94)}.proof h3{margin:0 0 8px;font-size:19px;color:#0a2d59}.proof p{margin:0;color:var(--muted);font-size:14px}
.contact{padding:46px;border-radius:30px;background:linear-gradient(135deg,#0a3970,#0a2851 58%,#0b4d82);color:#fff;display:flex;align-items:center;gap:30px;border:1px solid rgba(126,207,255,.18);box-shadow:0 30px 80px rgba(13,65,119,.25),inset 0 1px 0 rgba(255,255,255,.08);position:relative;overflow:hidden}.contact:after{content:"";position:absolute;width:330px;height:330px;right:-110px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(83,204,255,.24),transparent 66%)}.contact div:first-child{margin-right:auto;position:relative;z-index:1}.contact h2{margin:4px 0 8px;font-size:34px}.contact p{margin:0;color:#c8d9e9}.btn{display:inline-flex;text-decoration:none;color:#06152b;background:linear-gradient(135deg,#fff,#d8efff);font-weight:900;border-radius:14px;padding:13px 19px;white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.12);position:relative;z-index:1}
.foot{padding:28px 0;border-top:1px solid rgba(76,145,205,.18);color:#5f7e9f;font-size:12px;background:linear-gradient(180deg,rgba(210,235,255,.90),rgba(226,243,255,.94))}.source-note{font-size:11px;color:#8297ad;margin-top:16px}.dark .source-note{color:#839ab3}
@media(max-width:950px){.nav{display:none}.split,.grid2{grid-template-columns:1fr}.grid3,.grid4{grid-template-columns:repeat(2,1fr)}.roadgrid{grid-template-columns:repeat(2,1fr)}.proof{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.arrow{transform:rotate(90deg);text-align:center}.crewline{grid-template-columns:repeat(5,minmax(90px,1fr));overflow:auto}.section{padding:108px 0 70px}}
@media(max-width:620px){.section{padding-top:88px}.wrap{width:min(var(--max),calc(100% - 24px))}.headin{height:70px}.lang{max-width:110px}.slider{aspect-ratio:16/10}.slide img{object-fit:cover}.section{padding:58px 0}.title{font-size:36px}.lead{font-size:16px}.grid3,.grid4,.features,.roadgrid{grid-template-columns:1fr}.business{padding:24px;min-height:0}.split{gap:24px}.contact{padding:28px;display:block}.contact .btn{margin-top:22px}.dots{bottom:10px}.section:not(.dark):before{width:300px;height:300px;right:-180px;top:-160px}}

/* Two project films directly below the opening hero */
.video-showcase{position:relative;padding:64px 0 58px;background:linear-gradient(135deg,#d8efff 0%,#edf8ff 46%,#cfe8ff 100%);border-top:1px solid rgba(73,148,215,.13);border-bottom:1px solid rgba(73,148,215,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -26px 70px rgba(58,146,222,.06);overflow:hidden}
.video-showcase:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 12%,rgba(64,175,255,.13),transparent 28%),radial-gradient(circle at 88% 76%,rgba(82,196,255,.12),transparent 30%)}
.video-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.video-card{border-radius:24px;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(202,232,255,.88));border:1px solid rgba(49,129,202,.18);box-shadow:0 22px 60px rgba(18,83,145,.16),inset 0 1px 0 rgba(255,255,255,.95);overflow:hidden}
.video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:17px;background:#041022;box-shadow:0 10px 28px rgba(2,35,69,.14)}
@media(max-width:900px){.video-grid{grid-template-columns:1fr}.video-showcase{padding:56px 0 48px}}
@media(max-width:620px){.video-showcase{padding:48px 0 40px}.video-grid{gap:16px}.video-card{padding:5px;border-radius:18px}.video-card video{border-radius:13px}}

.demeter-inline-videos{margin:26px 0 30px}
.demeter-inline-videos .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.demeter-inline-videos .video-card{border-radius:22px;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(208,233,255,.90));border:1px solid rgba(49,129,202,.18);box-shadow:0 16px 40px rgba(18,83,145,.12),inset 0 1px 0 rgba(255,255,255,.96);overflow:hidden}
.demeter-inline-videos .video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#041022;box-shadow:0 8px 22px rgba(2,35,69,.14)}
@media(max-width:900px){.demeter-inline-videos .video-grid{grid-template-columns:1fr}}
@media(max-width:620px){.demeter-inline-videos{margin:18px 0 24px}.demeter-inline-videos .video-grid{gap:14px}.demeter-inline-videos .video-card{padding:5px;border-radius:18px}.demeter-inline-videos .video-card video{border-radius:12px}}

.gold-video-section{padding:56px 0;background:linear-gradient(180deg,rgba(233,244,255,.65),rgba(255,250,240,.55));position:relative;overflow:hidden}
.gold-video-section:before{content:"";position:absolute;inset:auto -120px -120px auto;width:280px;height:280px;background:radial-gradient(circle,rgba(255,210,86,.35),rgba(255,210,86,0) 72%);pointer-events:none}
.gold-wrap{position:relative}
.gold-card{position:relative;border-radius:32px;padding:26px;background:linear-gradient(145deg,rgba(255,250,239,.95),rgba(255,241,201,.92) 45%,rgba(255,252,243,.98));border:1px solid rgba(202,147,34,.38);box-shadow:0 18px 48px rgba(173,121,24,.18),0 0 0 1px rgba(255,220,120,.28) inset,0 2px 0 rgba(255,255,255,.75) inset;overflow:hidden}
.gold-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.46) 45%,rgba(255,255,255,0) 60%);transform:translateX(-120%);animation:goldShine 6.2s ease-in-out infinite;pointer-events:none}
.gold-card:after{content:"";position:absolute;inset:-1px;border-radius:32px;padding:1px;background:linear-gradient(135deg,rgba(255,228,143,.85),rgba(193,132,24,.92),rgba(255,240,185,.92));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@keyframes goldShine{0%{transform:translateX(-120%)}18%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.gold-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px;position:relative;z-index:1}
.gold-meta .eyebrow{margin:0;color:#9b6a00}
.gold-title{font-size:36px;line-height:1.18;margin:6px 0 8px;color:#163255;font-weight:900;letter-spacing:-.03em}
.gold-lead{margin:0;color:#71511a;font-size:15px;line-height:1.7;max-width:700px}
.gold-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,#fff4c3,#f4cf63);color:#7b5200;font-weight:800;font-size:13px;box-shadow:0 8px 18px rgba(191,136,18,.16)}
.gold-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:20px;position:relative;z-index:1}
.gold-video-main,.gold-video-slot{border-radius:24px;padding:10px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,246,224,.86));border:1px solid rgba(197,143,33,.2);box-shadow:0 14px 26px rgba(124,86,14,.12)}
.gold-video-main{display:flex;align-items:center;justify-content:center}.gold-video-main video{display:block;width:min(100%,406px);height:auto;aspect-ratio:406/720;object-fit:contain;border-radius:18px;background:#071525;box-shadow:0 12px 28px rgba(20,32,56,.2)}
.gold-video-slot{display:flex;min-height:100%;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,rgba(255,251,241,.92),rgba(255,241,210,.8));border-style:dashed}
.gold-video-slot .slot-inner{padding:28px 20px}
.gold-video-slot h3{margin:0 0 10px;color:#17365e;font-size:24px;letter-spacing:-.02em}
.gold-video-slot p{margin:0;color:#7b6128;line-height:1.7;font-size:15px}
.gold-video-slot .slot-chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff7d6;color:#9c6a00;font-weight:800;font-size:12px;margin-bottom:16px;border:1px solid rgba(214,170,54,.4)}
@media(max-width:980px){.gold-grid{grid-template-columns:1fr}.gold-meta{display:block}.gold-title{font-size:30px}}
@media(max-width:620px){.gold-video-section{padding:36px 0}.gold-card{padding:18px;border-radius:24px}.gold-card:after{border-radius:24px}.gold-title{font-size:25px}.gold-video-main,.gold-video-slot{border-radius:18px;padding:7px}.gold-video-main video{border-radius:13px}.gold-video-slot .slot-inner{padding:22px 14px}}

.gold-grid{grid-template-columns:1fr;gap:18px}
.gold-video-cluster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative;z-index:1}
.gold-video-tile{border-radius:22px;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.80),rgba(255,246,224,.90));border:1px solid rgba(197,143,33,.24);box-shadow:0 14px 26px rgba(124,86,14,.12);display:flex;flex-direction:column;align-items:center;gap:10px}
.gold-video-tile video{display:block;width:100%;max-width:406px;height:auto;aspect-ratio:406/720;object-fit:contain;border-radius:16px;background:#071525;box-shadow:0 12px 28px rgba(20,32,56,.18)}
.gold-video-caption{font-size:13px;font-weight:800;letter-spacing:.04em;color:#7c5605;text-align:center}
@media(max-width:1200px){.gold-video-cluster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.gold-video-cluster{grid-template-columns:1fr;gap:12px}.gold-video-tile{padding:6px;border-radius:18px}.gold-video-tile video{border-radius:13px}}

.gold-meta{align-items:center;margin-bottom:22px}
.gold-meta .eyebrow,.gold-lead{display:none !important}
.gold-title{margin:0;color:#163255}

.news-korea-link{margin-top:18px;padding-top:16px;border-top:1px solid rgba(55,124,190,.16);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.news-korea-title{font-size:13px;font-weight:900;letter-spacing:.04em;color:#0a2d59}
.news-korea-link a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:12px;font-weight:900;color:#0b5fc7;background:linear-gradient(180deg,#ffffff,#e6f3ff);border:1px solid rgba(50,125,194,.20);padding:8px 12px;border-radius:999px;box-shadow:0 8px 18px rgba(24,91,151,.08);transition:.22s transform,.22s box-shadow}
.news-korea-link a:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(24,91,151,.13)}

/* Top-left 3D business proposal PDF button */
.proposal-btn{
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:7px 15px 7px 8px;
  border-radius:14px;
  text-decoration:none;
  color:#08254a;
  font-weight:900;
  letter-spacing:.045em;
  font-size:11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(220,240,255,.98) 48%,rgba(183,218,247,.98) 100%);
  border:1px solid rgba(27,93,153,.28);
  box-shadow:
    0 6px 0 rgba(34,95,148,.26),
    0 11px 22px rgba(25,75,123,.18),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(40,105,165,.12);
  transform:translateY(-2px);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  white-space:nowrap;
}
.proposal-btn:hover{
  transform:translateY(-4px);
  filter:brightness(1.03);
  box-shadow:
    0 8px 0 rgba(34,95,148,.25),
    0 15px 28px rgba(25,75,123,.22),
    inset 0 1px 0 rgba(255,255,255,1);
}
.proposal-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 2px 0 rgba(34,95,148,.24),
    0 6px 12px rgba(25,75,123,.16),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.proposal-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#fff;
  font-size:9px;
  line-height:1;
  letter-spacing:.03em;
  background:linear-gradient(145deg,#0d57a3,#08366e);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 4px 9px rgba(6,47,90,.24),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.proposal-label{display:block}
@media(max-width:760px){
  .proposal-btn{padding:6px 9px 6px 6px;gap:7px;font-size:9px;border-radius:12px;min-height:40px}
  .proposal-icon{width:28px;height:28px;border-radius:8px;font-size:8px}
}
@media(max-width:520px){
  .proposal-label{display:none}
  .proposal-btn{padding:5px}
  .proposal-icon{width:31px;height:31px}
}


/* V21: Gold-highlighted MemePiece game & guide videos */
.gold-showcase{position:relative;z-index:1;padding:26px;border-radius:34px;background:linear-gradient(180deg,rgba(255,251,240,.98) 0%,rgba(255,245,221,.97) 100%);border:4px solid rgba(223,168,49,.96);box-shadow:0 26px 70px rgba(146,102,15,.18),0 0 0 2px rgba(255,223,132,.50) inset,inset 0 1px 0 rgba(255,255,255,.96),inset 0 -18px 40px rgba(255,220,120,.16),0 0 32px rgba(244,195,67,.24);overflow:hidden}
.gold-showcase:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 16%,rgba(255,234,166,.45),transparent 27%),radial-gradient(circle at 84% 26%,rgba(255,215,107,.18),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.20),transparent 55%)}
.gold-showcase-head{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-bottom:24px}
.gold-showcase-button{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;border-radius:18px;text-align:center;font-size:clamp(15px,1.55vw,21px);font-weight:900;letter-spacing:.045em;color:#fff7da;background:linear-gradient(180deg,#f7d977 0%,#d79b18 50%,#a96d00 100%);border:2px solid rgba(255,237,173,.92);box-shadow:0 8px 0 rgba(122,78,3,.75),0 15px 30px rgba(143,92,8,.26),inset 0 2px 0 rgba(255,251,223,.86),inset 0 -2px 0 rgba(126,80,7,.55);text-shadow:0 2px 4px rgba(88,54,0,.45)}
.gold-video-grid{position:relative;z-index:1;gap:28px;align-items:start}
.gold-video-card{position:relative;padding:10px;border-radius:28px;background:linear-gradient(160deg,rgba(255,249,233,.98),rgba(255,240,199,.96));border:4px solid rgba(219,163,42,.92);box-shadow:0 18px 40px rgba(146,102,15,.18),0 0 0 1px rgba(255,236,175,.95) inset,0 0 20px rgba(240,188,51,.18)}
.gold-video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#041022;box-shadow:0 10px 28px rgba(2,35,69,.18)}
@media(max-width:900px){.gold-showcase{padding:18px;border-radius:26px}.gold-showcase-head{margin-bottom:18px}.gold-showcase-button{padding:14px 18px;border-radius:16px;box-shadow:0 6px 0 rgba(122,78,3,.74),0 12px 24px rgba(143,92,8,.22),inset 0 2px 0 rgba(255,251,223,.86),inset 0 -2px 0 rgba(126,80,7,.55)}.gold-video-grid{grid-template-columns:1fr;gap:18px}}
@media(max-width:620px){.gold-showcase{padding:14px;border-radius:22px;border-width:3px}.gold-showcase-button{font-size:13px;line-height:1.3;padding:12px 14px}.gold-video-card{padding:7px;border-width:3px;border-radius:20px}.gold-video-card video{border-radius:14px}}


/* =========================================================
   V25 — slightly deeper sky-blue canvas + luminous outer edge
   ========================================================= */
body{
  padding:16px 0 28px;
  background:
    radial-gradient(circle at 5% 8%,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle at 94% 16%,rgba(178,244,255,.52),transparent 21%),
    radial-gradient(circle at 4% 76%,rgba(87,185,255,.34),transparent 24%),
    radial-gradient(circle at 96% 78%,rgba(93,195,255,.38),transparent 24%),
    linear-gradient(180deg,#86cafa 0%,#a6dcff 33%,#8bcdf8 68%,#72bcee 100%);
  background-attachment:fixed;
  position:relative;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.92;
  background-image:
    radial-gradient(circle at 2.5% 8%,rgba(255,255,255,.95) 0 1.8px,transparent 3px),
    radial-gradient(circle at 5% 28%,rgba(255,244,189,.82) 0 2px,transparent 3.5px),
    radial-gradient(circle at 1.8% 50%,rgba(255,255,255,.88) 0 1.4px,transparent 2.8px),
    radial-gradient(circle at 4% 82%,rgba(255,243,185,.88) 0 2px,transparent 3.5px),
    radial-gradient(circle at 97.5% 10%,rgba(255,255,255,.95) 0 1.8px,transparent 3px),
    radial-gradient(circle at 95.5% 34%,rgba(255,246,204,.86) 0 2px,transparent 3.5px),
    radial-gradient(circle at 98% 58%,rgba(255,255,255,.88) 0 1.5px,transparent 2.8px),
    radial-gradient(circle at 96% 85%,rgba(255,243,185,.9) 0 2px,transparent 3.5px),
    repeating-linear-gradient(116deg,transparent 0 88px,rgba(255,255,255,.055) 89px 90px,transparent 91px 176px);
}
body:after{
  content:"";position:fixed;inset:-12% -5%;pointer-events:none;z-index:-1;opacity:.9;
  background:
    radial-gradient(ellipse at left center,transparent 0 34%,rgba(255,255,255,.27) 34.15% 34.42%,transparent 34.7% 100%),
    radial-gradient(ellipse at right center,transparent 0 34%,rgba(255,255,255,.24) 34.15% 34.42%,transparent 34.7% 100%),
    radial-gradient(ellipse at left 24%,transparent 0 47%,rgba(190,239,255,.26) 47.2% 47.48%,transparent 47.8%),
    radial-gradient(ellipse at right 76%,transparent 0 47%,rgba(190,239,255,.24) 47.2% 47.48%,transparent 47.8%);
}
.header,main,.foot{width:min(1560px,calc(100% - 28px));margin-left:auto;margin-right:auto}
.header{top:10px;border-radius:22px 22px 0 0;border:1px solid rgba(255,255,255,.58);border-bottom-color:rgba(48,127,196,.18);background:rgba(222,242,255,.86);box-shadow:0 16px 42px rgba(24,96,157,.18),inset 0 1px 0 rgba(255,255,255,.95)}
main{overflow:hidden;border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);box-shadow:0 0 85px rgba(23,105,174,.24),0 0 0 1px rgba(51,134,202,.08)}
.foot{border-radius:0 0 24px 24px;box-shadow:0 26px 70px rgba(21,91,151,.18)}
.section:not(.dark){
  background-image:
    radial-gradient(circle at 16% 18%,rgba(80,179,255,.18),transparent 29%),
    radial-gradient(circle at 84% 72%,rgba(83,194,255,.15),transparent 31%),
    linear-gradient(135deg,rgba(204,235,255,.97) 0%,rgba(228,246,255,.98) 44%,rgba(194,227,252,.96) 100%);
}
.section.soft{background:linear-gradient(135deg,#c8e8ff 0%,#e1f4ff 44%,#bcdfff 100%)}
.gold-video-section{background:linear-gradient(180deg,rgba(201,232,255,.88),rgba(245,242,222,.72))}

/* =========================================================
   V25 — subject-separated video cards
   ========================================================= */
.topic-video-panel{position:relative;margin:34px 0 38px;padding:25px;border-radius:32px;overflow:hidden;isolation:isolate}
.topic-video-panel:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(120deg,transparent 24%,rgba(255,255,255,.26) 45%,transparent 62%);transform:translateX(-120%);animation:topicShine 8s ease-in-out infinite}
@keyframes topicShine{0%{transform:translateX(-120%)}16%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.topic-video-head{display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.topic-video-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:15px 26px;border-radius:17px;font-size:clamp(14px,1.5vw,20px);font-weight:900;letter-spacing:.055em;white-space:nowrap}
.topic-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.topic-video-card{padding:9px;border-radius:25px;overflow:hidden}
.topic-video-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:17px;background:#041022}

/* Demeter = cool blue / financial infrastructure */
.demeter-video-panel{background:linear-gradient(145deg,rgba(239,249,255,.97),rgba(194,228,253,.95));border:4px solid rgba(61,156,226,.82);box-shadow:0 22px 60px rgba(36,117,182,.18),0 0 30px rgba(77,177,242,.16),inset 0 0 0 2px rgba(255,255,255,.68)}
.demeter-video-button{color:#fff;background:linear-gradient(180deg,#9ad7ff 0%,#4b9ddd 52%,#1e6fb3 100%);border:2px solid rgba(218,245,255,.92);box-shadow:0 7px 0 rgba(24,87,139,.58),0 14px 28px rgba(28,106,170,.22),inset 0 2px 0 rgba(255,255,255,.7);text-shadow:0 2px 4px rgba(8,55,94,.34)}
.demeter-topic-card{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(210,237,255,.94));border:3px solid rgba(64,155,222,.68);box-shadow:0 16px 38px rgba(28,103,164,.14),inset 0 1px 0 rgba(255,255,255,.98)}
.demeter-topic-card video{box-shadow:0 10px 28px rgba(5,52,96,.18)}

/* MemePiece = gold / game-world identity */
.memepiece-video-panel{background:linear-gradient(145deg,rgba(13,39,72,.95),rgba(6,22,44,.98));border:4px solid rgba(227,176,60,.96);box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 34px rgba(246,197,72,.22),inset 0 0 0 2px rgba(255,232,159,.13)}
.memepiece-video-button{color:#fff8dc;background:linear-gradient(180deg,#f5d97e 0%,#d79a18 52%,#a86700 100%);border:2px solid rgba(255,237,175,.94);box-shadow:0 8px 0 rgba(114,70,0,.78),0 15px 30px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,252,226,.82);text-shadow:0 2px 4px rgba(80,48,0,.48)}
.memepiece-topic-card{background:linear-gradient(155deg,rgba(255,248,225,.98),rgba(241,210,131,.93));border:4px solid rgba(226,169,43,.92);box-shadow:0 17px 42px rgba(0,0,0,.24),0 0 18px rgba(241,188,48,.16),inset 0 1px 0 rgba(255,255,255,.82)}
.memepiece-topic-card video{box-shadow:0 11px 30px rgba(0,0,0,.28)}

/* Guide = only how-to videos, still vertical 9:16 */
.guide-video-head{display:flex;justify-content:center;align-items:center;margin-bottom:22px;position:relative;z-index:2}
.guide-video-button{display:inline-flex;align-items:center;justify-content:center;padding:15px 25px;border-radius:17px;font-size:clamp(14px,1.5vw,19px);font-weight:900;letter-spacing:.055em;color:#fff8dc;background:linear-gradient(180deg,#f6dc83 0%,#d89d20 52%,#a96a00 100%);border:2px solid rgba(255,239,183,.95);box-shadow:0 7px 0 rgba(121,77,3,.72),0 14px 28px rgba(157,106,10,.22),inset 0 2px 0 rgba(255,253,231,.84);text-shadow:0 2px 4px rgba(83,50,0,.42)}
.gold-card{border:4px solid rgba(215,158,36,.88);box-shadow:0 22px 58px rgba(159,107,15,.18),0 0 30px rgba(243,195,69,.18),inset 0 0 0 2px rgba(255,235,170,.32)}
.gold-video-tile{border:3px solid rgba(208,151,31,.56);box-shadow:0 15px 32px rgba(124,86,14,.13),inset 0 1px 0 rgba(255,255,255,.88)}

@media(max-width:1590px){body{padding:8px 0 18px}.header,main,.foot{width:calc(100% - 16px)}.header{top:0}}
@media(max-width:900px){.topic-video-grid{grid-template-columns:1fr}.topic-video-panel{padding:18px;border-radius:26px}.topic-video-head{margin-bottom:18px}}
@media(max-width:620px){body{padding:0}.header,main,.foot{width:100%}.header{border-radius:0}.foot{border-radius:0}.topic-video-panel{padding:13px;border-width:3px;border-radius:21px;margin:24px 0 28px}.topic-video-button,.guide-video-button{font-size:12px;line-height:1.25;padding:11px 13px;white-space:normal}.topic-video-card{padding:6px;border-radius:18px}.topic-video-card video{border-radius:12px}}


/* =========================================================
   V26 — correction:
   NO decorative outer-page frame.
   Make the actual webpage sections a deeper sky-blue
   and add subtle effects INSIDE the page itself.
   ========================================================= */

/* Remove V25 outer-canvas decoration completely */
body{
  padding:0 !important;
  margin:0 !important;
  background:#b8def7 !important;
  background-attachment:scroll !important;
}
body:before,
body:after{
  display:none !important;
  content:none !important;
}

/* Return the site to full browser width */
.header,
main,
.foot{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 !important;
}
.header{
  top:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  background:rgba(201,232,252,.93) !important;
  box-shadow:
    0 10px 30px rgba(24,96,157,.12),
    inset 0 -1px 0 rgba(61,145,208,.18),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}
main{
  border:0 !important;
  box-shadow:none !important;
}

/* Actual page/section canvas: slightly deeper sky blue */
.hero{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.30),transparent 28%),
    linear-gradient(180deg,#b5dcf7 0%,#a8d4f2 100%) !important;
}

/* Standard light sections */
.section:not(.dark){
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.34),transparent 24%),
    radial-gradient(circle at 88% 76%,rgba(68,166,233,.18),transparent 29%),
    linear-gradient(135deg,#b8ddf6 0%,#c9e8fb 42%,#abd4f1 100%) !important;
  border-top:1px solid rgba(45,130,197,.15) !important;
  border-bottom:1px solid rgba(45,130,197,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -28px 70px rgba(45,139,205,.07) !important;
}

/* Softer Demeter-type blue section */
.section.soft{
  background:
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.30),transparent 25%),
    radial-gradient(circle at 8% 78%,rgba(73,171,234,.18),transparent 30%),
    linear-gradient(135deg,#aed8f5 0%,#c4e6fa 45%,#9fceed 100%) !important;
}

/* Subtle light streaks and network-like page effects INSIDE each light section */
.section:not(.dark):before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  right:auto !important;
  top:auto !important;
  left:auto !important;
  bottom:auto !important;
  pointer-events:none !important;
  opacity:.62 !important;
  background:
    linear-gradient(118deg,transparent 0 18%,rgba(255,255,255,.20) 18.3% 18.6%,transparent 19% 46%,rgba(255,255,255,.13) 46.2% 46.5%,transparent 47% 100%),
    radial-gradient(circle at 15% 30%,rgba(255,255,255,.72) 0 1.3px,transparent 2.2px),
    radial-gradient(circle at 33% 66%,rgba(255,255,255,.46) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 24%,rgba(255,255,255,.58) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 88% 72%,rgba(255,255,255,.48) 0 1px,transparent 2px) !important;
  background-size:auto,220px 180px,260px 210px,240px 190px,280px 220px !important;
  z-index:0 !important;
}

/* Soft arcs/glows INSIDE the page, not outside */
.section:not(.dark):after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-20% -8% !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  left:auto !important;
  bottom:auto !important;
  pointer-events:none !important;
  opacity:.38 !important;
  background:
    radial-gradient(ellipse at 10% 50%,transparent 0 38%,rgba(255,255,255,.34) 38.2% 38.5%,transparent 38.8% 100%),
    radial-gradient(ellipse at 88% 36%,transparent 0 42%,rgba(104,192,244,.23) 42.2% 42.5%,transparent 42.8% 100%) !important;
  z-index:0 !important;
}

/* Top video showcase also uses the page-blue canvas */
.video-showcase{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.30),transparent 25%),
    radial-gradient(circle at 86% 72%,rgba(58,163,230,.16),transparent 28%),
    linear-gradient(135deg,#afd8f4 0%,#c7e7fa 46%,#a4d1ef 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -28px 70px rgba(45,139,205,.06) !important;
}
.video-showcase:before{
  opacity:.46 !important;
  background:
    linear-gradient(120deg,transparent 0 31%,rgba(255,255,255,.16) 31.3% 31.6%,transparent 32% 67%,rgba(255,255,255,.10) 67.2% 67.5%,transparent 68%),
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.55) 0 1.2px,transparent 2px),
    radial-gradient(circle at 82% 68%,rgba(255,255,255,.44) 0 1px,transparent 2px) !important;
  background-size:auto,240px 200px,280px 230px !important;
}

/* Guide-video area keeps gold cards but sits on the same blue page */
.gold-video-section{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.30),transparent 25%),
    radial-gradient(circle at 86% 78%,rgba(62,165,232,.14),transparent 30%),
    linear-gradient(135deg,#b5dbf5 0%,#c7e7f9 46%,#aad4f0 100%) !important;
}

/* Footer stays in the same deeper sky-blue family */
.foot{
  background:linear-gradient(180deg,#aed6f2 0%,#9fcbea 100%) !important;
  border-top:1px solid rgba(54,136,198,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Keep content above the page effects */
.section > .wrap,
.video-showcase > .wrap,
.gold-video-section > .wrap{
  position:relative;
  z-index:2;
}

/* Dark brand sections remain intentionally dark */
.section.dark{
  background:
    radial-gradient(circle at 14% 8%,#17436f 0%,#0a2850 38%,#06172f 70%,#041023 100%) !important;
}

@media(max-width:620px){
  body{padding:0 !important}
  .header,main,.foot{width:100% !important}
}


/* =========================================================
   V27 — Header buttons update
   - Add left gold 3D invite button
   - Move business proposal button visually about 5cm to the right
   ========================================================= */
.headin{
  gap:18px !important;
}
.invite-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:7px 16px 7px 9px;
  border-radius:14px;
  text-decoration:none;
  color:#6b3f00;
  font-weight:900;
  letter-spacing:.045em;
  font-size:11px;
  white-space:nowrap;
  background:
    linear-gradient(180deg,#fff6c7 0%,#ffd95e 20%,#f2b928 55%,#cf8d08 100%);
  border:1px solid rgba(179,121,7,.65);
  box-shadow:
    0 6px 0 rgba(136,88,4,.55),
    0 12px 24px rgba(148,96,4,.25),
    inset 0 1px 0 rgba(255,252,222,.95),
    inset 0 -2px 0 rgba(146,92,3,.45),
    0 0 24px rgba(255,212,92,.18);
  transform:translateY(-2px);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.invite-btn:hover{
  transform:translateY(-4px);
  filter:brightness(1.03);
  box-shadow:
    0 8px 0 rgba(136,88,4,.52),
    0 16px 28px rgba(148,96,4,.28),
    inset 0 1px 0 rgba(255,252,222,1),
    0 0 28px rgba(255,212,92,.25);
}
.invite-btn:active{
  transform:translateY(1px);
  box-shadow:
    0 2px 0 rgba(136,88,4,.52),
    0 6px 12px rgba(148,96,4,.20),
    inset 0 1px 0 rgba(255,252,222,.95);
}
.invite-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#fff8db;
  font-size:14px;
  line-height:1;
  background:linear-gradient(145deg,#ffd351,#f0a90c 60%,#ba7704);
  border:1px solid rgba(255,247,199,.95);
  box-shadow:0 4px 10px rgba(120,74,0,.22), inset 0 1px 0 rgba(255,255,255,.42);
  text-shadow:0 1px 2px rgba(111,67,2,.3);
}
.invite-label{display:block}

/* Move PDF button to the right approximately 5cm on desktop */
.proposal-btn{
  margin-right:0 !important;
  margin-left:188px !important;
}
.nav{margin-left:auto}

@media(max-width:1100px){
  .proposal-btn{margin-left:96px !important}
}
@media(max-width:760px){
  .invite-btn{padding:6px 10px 6px 6px;gap:7px;font-size:9px;border-radius:12px;min-height:40px}
  .invite-icon{width:28px;height:28px;border-radius:8px;font-size:12px}
  .proposal-btn{margin-left:16px !important}
}
@media(max-width:520px){
  .invite-label{display:none}
  .invite-btn{padding:5px}
  .invite-icon{width:31px;height:31px}
  .proposal-btn{margin-left:8px !important}
}


/* =========================================================
   V28 — Phoenix invite button + ocean theme backgrounds
   ========================================================= */
.invite-btn{
  background:
    linear-gradient(180deg,#fff8cf 0%,#ffe37a 18%,#f7c83e 50%,#d89a13 100%);
  color:#6b4301;
  border:1px solid rgba(174,121,16,.78);
  box-shadow:
    0 6px 0 rgba(136,88,4,.48),
    0 14px 28px rgba(148,96,4,.22),
    inset 0 1px 0 rgba(255,252,222,.98),
    inset 0 -2px 0 rgba(146,92,3,.42),
    0 0 26px rgba(255,214,107,.20);
}
.invite-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:3px;
  border-radius:10px;
  background:linear-gradient(145deg,#fff3ba,#ffd24d 55%,#c98906);
  border:1px solid rgba(255,246,199,.95);
  box-shadow:0 4px 10px rgba(120,74,0,.22), inset 0 1px 0 rgba(255,255,255,.50);
  overflow:hidden;
}
.invite-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(104,66,4,.22));
}
.invite-btn:hover{filter:brightness(1.04)}

/* Ocean theme across the site */
body{
  background:
    radial-gradient(circle at 16% 10%,rgba(255,255,255,.30),transparent 19%),
    radial-gradient(circle at 82% 14%,rgba(187,244,255,.35),transparent 20%),
    radial-gradient(circle at 20% 82%,rgba(61,158,224,.24),transparent 22%),
    radial-gradient(circle at 88% 86%,rgba(53,154,232,.22),transparent 20%),
    linear-gradient(180deg,#5caee3 0%,#8ecdf3 22%,#b6e0f8 48%,#84c3eb 76%,#5ca6db 100%);
  background-attachment:fixed;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.70;
  background:
    radial-gradient(circle at 4% 12%,rgba(255,255,255,.85) 0 1.4px,transparent 2.7px),
    radial-gradient(circle at 95% 22%,rgba(255,252,222,.85) 0 1.7px,transparent 3px),
    radial-gradient(circle at 8% 84%,rgba(255,255,255,.78) 0 1.6px,transparent 2.9px),
    radial-gradient(circle at 92% 78%,rgba(255,248,214,.85) 0 1.8px,transparent 3.1px),
    repeating-radial-gradient(ellipse at 50% -18%,rgba(255,255,255,.06) 0 11px,transparent 12px 34px),
    repeating-linear-gradient(108deg,transparent 0 100px,rgba(255,255,255,.05) 101px 102px,transparent 103px 200px);
}
body:after{
  content:"";position:fixed;inset:-14% -6%;pointer-events:none;z-index:-1;opacity:.82;
  background:
    radial-gradient(ellipse at left center,transparent 0 33%,rgba(255,255,255,.20) 33.2% 33.45%,transparent 33.75% 100%),
    radial-gradient(ellipse at right center,transparent 0 33%,rgba(255,255,255,.18) 33.2% 33.45%,transparent 33.75% 100%),
    radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.12),transparent 58%);
}
.header{
  background:rgba(218,239,252,.88);
  box-shadow:0 16px 42px rgba(19,95,156,.16),inset 0 1px 0 rgba(255,255,255,.96);
}
.hero{
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.25),transparent 24%),
    linear-gradient(180deg,#9ed3f4 0%,#e3f4ff 100%);
  box-shadow:0 28px 70px rgba(18,88,150,.16);
}
.section:not(.dark){
  background-image:
    radial-gradient(circle at 16% 16%,rgba(255,255,255,.28),transparent 25%),
    radial-gradient(circle at 86% 72%,rgba(126,218,255,.16),transparent 30%),
    repeating-radial-gradient(ellipse at 50% 118%,rgba(255,255,255,.075) 0 14px,transparent 14px 30px),
    linear-gradient(180deg,rgba(153,212,245,.95) 0%,rgba(215,240,255,.97) 45%,rgba(161,216,246,.95) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76), inset 0 28px 60px rgba(255,255,255,.10), inset 0 -28px 60px rgba(43,145,214,.06);
}
.section.soft{
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.24),transparent 22%),
    repeating-radial-gradient(ellipse at 48% 120%,rgba(255,255,255,.07) 0 14px,transparent 14px 30px),
    linear-gradient(180deg,#86c6eb 0%,#d6efff 50%,#7ebee3 100%);
}
.business,.visual,.feature,.node,.card,.road-card,.doc-card,.contact-card,.gold-video-tile,.gold-video-card,.gold-card,.news-card{
  background-image:
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.55),transparent 22%),
    linear-gradient(145deg,rgba(244,251,255,.95),rgba(197,227,247,.88));
}
.gold-video-section{
  background:
    repeating-radial-gradient(ellipse at 50% 118%,rgba(255,255,255,.07) 0 13px,transparent 13px 29px),
    linear-gradient(180deg,rgba(145,204,238,.92),rgba(245,242,222,.70));
}
.foot{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.16),transparent 24%),
    linear-gradient(180deg,#133f69 0%,#0b2e53 58%,#08213d 100%);
}


/* =========================================================
   V29 — Bright ocean-blue correction for all formerly navy pages
   ========================================================= */

/* Replace deep navy sections with clearly visible ocean blue */
.section.dark{
  color:#ffffff !important;
  background:
    radial-gradient(circle at 14% 10%,rgba(255,255,255,.22),transparent 26%),
    radial-gradient(circle at 86% 78%,rgba(158,232,255,.20),transparent 30%),
    repeating-radial-gradient(ellipse at 50% 118%,rgba(255,255,255,.055) 0 14px,transparent 14px 32px),
    linear-gradient(180deg,#58abe3 0%,#2f8fce 42%,#2479b7 72%,#4a9bd4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 28px 70px rgba(255,255,255,.10),
    inset 0 -24px 70px rgba(22,100,157,.12) !important;
}
.section.dark:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(116deg,transparent 0 23%,rgba(255,255,255,.10) 23.2% 23.5%,transparent 23.8% 66%,rgba(255,255,255,.07) 66.2% 66.5%,transparent 66.8%),
    radial-gradient(circle at 12% 30%,rgba(255,255,255,.65) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.55) 0 1.1px,transparent 2.1px),
    radial-gradient(circle at 88% 70%,rgba(255,255,255,.48) 0 1px,transparent 2px);
  background-size:auto,220px 180px,260px 210px,280px 230px;
  opacity:.45;
}
.section.dark > .wrap{position:relative;z-index:2}
.dark .eyebrow{color:#e7f8ff !important}
.dark .title{color:#ffffff !important;text-shadow:0 3px 18px rgba(18,72,116,.16)}
.dark .lead{color:#e7f5ff !important}
.dark .source-note{color:#d7ebf8 !important}

/* Light glass cards inside formerly dark sections */
.dark .feature,
.dark .step,
.dark .crew,
.dark .tag{
  background:linear-gradient(145deg,rgba(247,252,255,.88),rgba(198,231,250,.74)) !important;
  border-color:rgba(255,255,255,.48) !important;
  box-shadow:0 12px 30px rgba(18,87,138,.10),inset 0 1px 0 rgba(255,255,255,.72) !important;
  color:#0b3158 !important;
}
.dark .feature b,.dark .step strong,.dark .crew strong{color:#0b3158 !important}
.dark .feature span,.dark .step p,.dark .crew small{color:#476c8c !important}
.dark .step em{color:#8b5f00 !important}
.dark .tag{color:#0d568e !important}

/* Brighten image cards in former navy sections */
.dark .visual{
  background:linear-gradient(145deg,rgba(239,249,255,.96),rgba(188,226,248,.90)) !important;
  border-color:rgba(255,255,255,.60) !important;
  box-shadow:0 24px 65px rgba(19,89,142,.18),0 0 0 1px rgba(255,255,255,.70) inset !important;
}

/* Specifically brighten the dark Global Expansion Roadmap artwork */
#roadmap .visual{
  position:relative;
  background:linear-gradient(145deg,#dff3ff,#a8d9f5) !important;
  border:2px solid rgba(255,255,255,.72) !important;
  box-shadow:0 26px 68px rgba(18,82,132,.20),0 0 0 1px rgba(255,255,255,.72) inset !important;
}
#roadmap .visual img{
  filter:brightness(1.42) saturate(.92) contrast(.88) !important;
}
#roadmap .visual:after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:20px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(167,222,255,.22),rgba(255,255,255,.06) 42%,rgba(102,188,240,.10));
  mix-blend-mode:screen;
  z-index:2;
}

/* MemePiece video cards: blue rather than navy */
.memepiece-video-panel{
  background:linear-gradient(180deg,rgba(213,240,255,.96),rgba(162,215,247,.92)) !important;
  border-color:rgba(255,255,255,.64) !important;
  box-shadow:0 24px 70px rgba(19,87,139,.18),inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.memepiece-topic-card{
  background:linear-gradient(145deg,rgba(246,252,255,.96),rgba(186,225,248,.90)) !important;
  border-color:rgba(255,255,255,.72) !important;
}

/* Footer also stays blue, not deep navy */
.foot{
  color:#eaf8ff !important;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.14),transparent 24%),
    linear-gradient(180deg,#397fb3 0%,#2d6f9f 58%,#28658f 100%) !important;
  border-top:1px solid rgba(255,255,255,.24) !important;
}


/* =========================================================
   V30 — APPROVED LUXURY SPACE THEME
   First hero remains unchanged.
   From the 2nd screen onward: lightweight premium blue-space atmosphere.
   ========================================================= */

:root{
  --space-blue-1:#083f78;
  --space-blue-2:#0d66ad;
  --space-blue-3:#124f8d;
  --space-cyan:#58c8ff;
  --space-gold:#f0c760;
}

/* Invite button: remove star and use a clean phoenix emblem. */
.invite-icon{
  width:38px !important;
  height:38px !important;
  padding:2px !important;
  overflow:hidden;
  background:linear-gradient(145deg,#fff6be 0%,#ffd554 52%,#d9980b 100%) !important;
  border:1px solid rgba(255,246,190,.98) !important;
  box-shadow:
    0 4px 10px rgba(120,74,0,.20),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}
.invite-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform:scale(1.10);
  filter:drop-shadow(0 2px 3px rgba(77,48,0,.18));
}

/* Keep the first/main hero exactly as the visual opening. */
main > .hero{
  position:relative;
  z-index:2;
}

/* Every screen after the hero gets the same premium space family. */
main > section:not(.hero){
  position:relative;
  overflow:hidden;
  color:#f4fbff;
  background:
    radial-gradient(circle at 11% 14%,rgba(114,211,255,.20),transparent 26%),
    radial-gradient(circle at 86% 22%,rgba(94,151,255,.18),transparent 27%),
    radial-gradient(circle at 76% 88%,rgba(78,193,255,.15),transparent 28%),
    radial-gradient(circle at 28% 78%,rgba(27,101,184,.20),transparent 32%),
    linear-gradient(145deg,#0a4d8c 0%,#0f6bb2 42%,#0a4d8b 72%,#073768 100%) !important;
  border-top:1px solid rgba(141,220,255,.20) !important;
  border-bottom:1px solid rgba(44,123,191,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 28px 90px rgba(93,194,255,.06),
    inset 0 -34px 100px rgba(0,27,67,.14) !important;
}

/* Fine stars — deliberately subtle, not a loud wallpaper. */
main > section:not(.hero)::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  pointer-events:none !important;
  opacity:.58 !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 5% 14%,rgba(255,255,255,.95) 0 1.2px,transparent 2.3px),
    radial-gradient(circle at 16% 44%,rgba(196,236,255,.90) 0 1px,transparent 2px),
    radial-gradient(circle at 26% 21%,rgba(255,235,177,.90) 0 1.1px,transparent 2.1px),
    radial-gradient(circle at 39% 72%,rgba(255,255,255,.85) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 52% 28%,rgba(191,229,255,.90) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 57%,rgba(255,244,203,.86) 0 1.1px,transparent 2px),
    radial-gradient(circle at 77% 18%,rgba(255,255,255,.92) 0 1.3px,transparent 2.4px),
    radial-gradient(circle at 88% 64%,rgba(187,231,255,.88) 0 1px,transparent 2px),
    radial-gradient(circle at 96% 31%,rgba(255,237,181,.85) 0 1.1px,transparent 2px),
    radial-gradient(circle at 72% 82%,rgba(255,255,255,.82) 0 1px,transparent 2px);
  background-size:
    260px 210px,310px 250px,350px 280px,290px 230px,330px 260px,
    380px 300px,300px 240px,360px 290px,420px 330px,340px 270px !important;
}

/* Nebula / orbital glow layer. */
main > section:not(.hero)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-18% -6% !important;
  width:auto !important;
  height:auto !important;
  pointer-events:none !important;
  opacity:.72 !important;
  z-index:0 !important;
  background:
    radial-gradient(ellipse at 4% 55%,transparent 0 36%,rgba(119,215,255,.18) 36.2% 36.55%,transparent 36.9% 100%),
    radial-gradient(ellipse at 96% 44%,transparent 0 38%,rgba(128,180,255,.16) 38.2% 38.5%,transparent 38.9% 100%),
    radial-gradient(circle at 82% 16%,rgba(117,219,255,.15),transparent 24%),
    radial-gradient(circle at 18% 86%,rgba(48,126,219,.18),transparent 30%),
    linear-gradient(116deg,transparent 0 30%,rgba(255,255,255,.055) 30.2% 30.45%,transparent 30.8% 67%,rgba(125,221,255,.05) 67.2% 67.45%,transparent 67.8%);
}

/* All actual content stays above the space layers. */
main > section:not(.hero) > .wrap{
  position:relative !important;
  z-index:2 !important;
}

/* Titles on the space canvas. */
main > section:not(.hero) .eyebrow{
  color:#f2c967 !important;
  text-shadow:0 2px 12px rgba(0,34,74,.22);
}
main > section:not(.hero) .title{
  color:#ffffff !important;
  text-shadow:0 3px 22px rgba(1,29,68,.26);
}
main > section:not(.hero) .lead{
  color:#def3ff !important;
}
main > section:not(.hero) .source-note{
  color:#cce8fa !important;
}

/* Glass cards: keep information light and readable over the space backdrop. */
main > section:not(.hero) .business,
main > section:not(.hero) .feature,
main > section:not(.hero) .visual,
main > section:not(.hero) .node,
main > section:not(.hero) .box,
main > section:not(.hero) .step,
main > section:not(.hero) .crew{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.46),transparent 24%),
    linear-gradient(145deg,rgba(242,250,255,.92),rgba(187,222,245,.82)) !important;
  border-color:rgba(216,243,255,.54) !important;
  box-shadow:
    0 18px 48px rgba(0,36,82,.17),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  backdrop-filter:blur(8px);
}
main > section:not(.hero) .business h3,
main > section:not(.hero) .feature b,
main > section:not(.hero) .node strong,
main > section:not(.hero) .box h3,
main > section:not(.hero) .step strong,
main > section:not(.hero) .crew strong{
  color:#0a315d !important;
}
main > section:not(.hero) .business p,
main > section:not(.hero) .feature span,
main > section:not(.hero) .node span,
main > section:not(.hero) .box p,
main > section:not(.hero) .step p,
main > section:not(.hero) .crew small{
  color:#476b8a !important;
}

/* Existing dark sections are now premium sapphire-space, not black/navy. */
main > section.dark:not(.hero){
  background:
    radial-gradient(circle at 12% 10%,rgba(91,201,255,.22),transparent 27%),
    radial-gradient(circle at 88% 74%,rgba(90,134,255,.18),transparent 30%),
    linear-gradient(145deg,#0b4f8e 0%,#126db1 45%,#0b4c87 72%,#083e72 100%) !important;
}

/* Guide area: preserve the gold guide card, but place it in the same space world. */
.gold-video-section{
  background:
    radial-gradient(circle at 14% 16%,rgba(91,205,255,.20),transparent 28%),
    radial-gradient(circle at 87% 78%,rgba(99,145,255,.16),transparent 30%),
    linear-gradient(145deg,#0a4d8b 0%,#116bac 48%,#083e75 100%) !important;
}
.gold-card{
  background:
    radial-gradient(circle at 10% 8%,rgba(255,255,255,.22),transparent 22%),
    linear-gradient(160deg,rgba(255,248,222,.97),rgba(246,218,151,.94)) !important;
  border-color:rgba(239,188,66,.86) !important;
  box-shadow:
    0 24px 70px rgba(1,31,68,.25),
    0 0 34px rgba(241,190,66,.18),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Roadmap panel: brighten it slightly while keeping its gold storyline. */
#roadmap .visual img{
  filter:brightness(1.30) saturate(.98) contrast(.94) !important;
}
#roadmap .visual{
  background:linear-gradient(145deg,rgba(218,242,255,.96),rgba(144,204,239,.90)) !important;
}

/* Footer continues the same space-blue world, but stays readable. */
.foot{
  color:#eaf8ff !important;
  background:
    radial-gradient(circle at 18% 10%,rgba(95,205,255,.12),transparent 24%),
    radial-gradient(circle at 82% 72%,rgba(91,129,255,.12),transparent 27%),
    linear-gradient(180deg,#0b4d86 0%,#093f72 58%,#07345f 100%) !important;
  border-top:1px solid rgba(145,219,255,.18) !important;
}

@media(max-width:620px){
  main > section:not(.hero)::before{opacity:.42 !important}
  main > section:not(.hero)::after{opacity:.52 !important}
}


/* =========================================================
   V31 — USER-APPROVED SAMPLE BACKGROUND, USED AS-IS
   - First hero stays unchanged.
   - From the 2nd screen onward, every section uses the exact
     uploaded sample image as the background source.
   - The sample file itself is not edited.
   - Redundant text has been removed from HTML.
   ========================================================= */

/* Do not add generated star/nebula patterns anymore. */
main > section:not(.hero){
  position:relative !important;
  overflow:hidden !important;
  background:#0a4f8d !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.18) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* EXACT sample image, unchanged. */
main > section:not(.hero)::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.72 !important;
  background-image:url("images/space-sample-reference.png") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
  filter:none !important;
  transform:none !important;
}

/* A very light readability veil only; the background file is untouched. */
main > section:not(.hero)::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:rgba(4,34,72,.24) !important;
  opacity:1 !important;
}

/* All section content stays above the exact sample background. */
main > section:not(.hero) > .wrap{
  position:relative !important;
  z-index:2 !important;
}

/* Remove all previously generated per-section background graphics. */
main > section:not(.hero),
main > section.soft:not(.hero),
main > section.dark:not(.hero),
.gold-video-section,
.video-showcase{
  background-image:none !important;
}

/* Compact section spacing after removing redundant copy. */
main > section:not(.hero){
  padding-top:72px !important;
  padding-bottom:72px !important;
}
main > section:not(.hero) .intro,
main > section:not(.hero) > .wrap{
  min-height:0 !important;
}

/* Bright premium glass panels over the sample space background. */
main > section:not(.hero) .business,
main > section:not(.hero) .feature,
main > section:not(.hero) .visual,
main > section:not(.hero) .node,
main > section:not(.hero) .box,
main > section:not(.hero) .step,
main > section:not(.hero) .crew,
main > section:not(.hero) .topic-video-panel{
  background:
    linear-gradient(145deg,rgba(247,252,255,.90),rgba(188,224,247,.82)) !important;
  border-color:rgba(224,245,255,.62) !important;
  box-shadow:
    0 18px 52px rgba(0,28,69,.22),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(8px);
}

/* Keep card text readable. */
main > section:not(.hero) .business h3,
main > section:not(.hero) .feature b,
main > section:not(.hero) .node strong,
main > section:not(.hero) .box h3,
main > section:not(.hero) .step strong,
main > section:not(.hero) .crew strong{
  color:#082e5a !important;
}
main > section:not(.hero) .business p,
main > section:not(.hero) .feature span,
main > section:not(.hero) .node span,
main > section:not(.hero) .box p,
main > section:not(.hero) .step p,
main > section:not(.hero) .crew small{
  color:#456987 !important;
}

/* Since the big headings were removed, center the remaining key content cleanly. */
main > section:not(.hero) .grid2{
  margin-top:0 !important;
}
main > section:not(.hero) .business{
  margin-top:0 !important;
}
.topic-video-panel{
  margin-top:0 !important;
}

/* Guide card stays gold and sits on top of the same exact sample. */
.gold-card{
  background:
    linear-gradient(160deg,rgba(255,249,225,.97),rgba(244,216,151,.95)) !important;
  border-color:rgba(238,188,68,.90) !important;
}
.guide-video-head{
  margin-bottom:20px !important;
}

/* Roadmap: no redundant heading; roadmap artwork becomes the main object. */
#roadmap .roadgrid{
  margin-top:0 !important;
}
#roadmap .visual{
  margin-top:28px !important;
}
#roadmap .visual img{
  filter:brightness(1.18) saturate(.98) contrast(.96) !important;
}

/* Contact area simplified. */
#contact .contact{
  background:rgba(8,52,96,.68) !important;
  border:1px solid rgba(196,232,255,.28) !important;
  box-shadow:0 18px 55px rgba(0,24,60,.25) !important;
}
#contact .contact h2{
  color:#fff !important;
  margin:0 !important;
}

/* Footer: same sample-space family, simple and clean. */
.foot{
  color:#eaf8ff !important;
  background:#073d70 !important;
  border-top:1px solid rgba(183,229,255,.18) !important;
}

@media(max-width:620px){
  main > section:not(.hero){
    padding-top:52px !important;
    padding-bottom:52px !important;
  }
  main > section:not(.hero)::before{
    opacity:.66 !important;
    background-position:center top !important;
  }
}


/* =========================================================
   V32 — CLEAN SPACE BACKGROUND FIX
   No screenshot, no duplicated text/cards in the background.
   First hero remains unchanged.
   ========================================================= */

main > section:not(.hero){
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(rgba(2,20,52,.24),rgba(2,20,52,.24)),
    url("images/space-clean-bg.png") center center / cover no-repeat !important;
  color:#fff !important;
  border-top:1px solid rgba(149,215,255,.20) !important;
  border-bottom:1px solid rgba(149,215,255,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -50px 110px rgba(0,18,55,.10) !important;
}

/* Delete old pseudo-background screenshot/space layers completely. */
main > section:not(.hero)::before,
main > section:not(.hero)::after{
  display:none !important;
  content:none !important;
}

main > section:not(.hero) > .wrap{
  position:relative !important;
  z-index:2 !important;
}

/* Dark sections use the same clean background instead of a different navy block. */
main > section.dark:not(.hero),
main > section.soft:not(.hero),
.gold-video-section{
  background:
    linear-gradient(rgba(2,20,52,.24),rgba(2,20,52,.24)),
    url("images/space-clean-bg.png") center center / cover no-repeat !important;
}

/* Keep only essential labels visible. */
main > section:not(.hero) .eyebrow,
main > section:not(.hero) .lead,
main > section:not(.hero) .source-note{
  display:none !important;
}

/* Premium transparent panels so the space background remains visible. */
main > section:not(.hero) .business,
main > section:not(.hero) .feature,
main > section:not(.hero) .visual,
main > section:not(.hero) .node,
main > section:not(.hero) .box,
main > section:not(.hero) .step,
main > section:not(.hero) .crew,
main > section:not(.hero) .topic-video-panel{
  background:
    linear-gradient(145deg,rgba(12,55,101,.72),rgba(13,77,132,.58)) !important;
  border:1px solid rgba(179,226,255,.38) !important;
  box-shadow:
    0 20px 58px rgba(0,16,48,.24),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(10px) !important;
}

/* Remove the huge pale blocks around the video areas. */
.topic-video-panel{
  padding:24px !important;
  border-radius:30px !important;
}
.topic-video-card{
  background:rgba(5,28,62,.64) !important;
  border:2px solid rgba(195,230,255,.62) !important;
  box-shadow:0 18px 45px rgba(0,12,38,.30) !important;
}
.topic-video-card video{
  border-radius:16px !important;
}

/* Cards/text now fit a space theme. */
main > section:not(.hero) .business h3,
main > section:not(.hero) .feature b,
main > section:not(.hero) .node strong,
main > section:not(.hero) .box h3,
main > section:not(.hero) .step strong,
main > section:not(.hero) .crew strong{
  color:#ffffff !important;
}
main > section:not(.hero) .business p,
main > section:not(.hero) .feature span,
main > section:not(.hero) .node span,
main > section:not(.hero) .box p,
main > section:not(.hero) .step p,
main > section:not(.hero) .crew small{
  color:#d6ecfa !important;
}

/* Gold section button remains the visual accent. */
.topic-video-button,
.guide-video-button{
  box-shadow:
    0 7px 0 rgba(109,69,2,.70),
    0 16px 34px rgba(0,20,52,.24),
    inset 0 1px 0 rgba(255,249,214,.90) !important;
}

/* Guide video card: dark translucent blue + gold trim, no big cream block. */
.gold-card{
  background:linear-gradient(145deg,rgba(11,48,91,.80),rgba(10,70,121,.68)) !important;
  border:3px solid rgba(229,181,65,.82) !important;
  box-shadow:
    0 24px 70px rgba(0,16,48,.28),
    0 0 28px rgba(235,185,64,.14),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.gold-video-tile{
  background:rgba(8,42,79,.68) !important;
  border:1px solid rgba(230,188,84,.38) !important;
}
.gold-video-caption{color:#ffe29a !important}

/* Flow cards */
.flow .node{
  background:rgba(10,55,99,.70) !important;
}

/* Roadmap image stays the visual focus; surrounding background is clean space. */
#roadmap .visual{
  background:rgba(8,43,80,.62) !important;
}
#roadmap .visual img{
  filter:brightness(1.17) saturate(1.02) contrast(.97) !important;
}

/* Contact */
#contact .contact{
  background:rgba(7,43,83,.72) !important;
  border:1px solid rgba(179,226,255,.32) !important;
  box-shadow:0 20px 60px rgba(0,16,45,.28) !important;
}
#contact .contact h2{color:#fff !important}

/* Footer */
.foot{
  background:#062c55 !important;
  color:#dff4ff !important;
}

@media(max-width:620px){
  main > section:not(.hero){
    background-position:center top !important;
  }
  .topic-video-panel{padding:14px !important}
}


/* =========================================================
   V62 — THIS SCREEN ONLY
   Official Proposal / Field & Media / Global Content section.
   Other homepage backgrounds are NOT changed.
   ========================================================= */

html body main#top > section.section:nth-of-type(8),
html body main#top > section.section.soft:nth-of-type(8),
html body main#top > section.section.soft.key-materials-v61:nth-of-type(8){
  background-color:#071b3d !important;
  background-image:
    linear-gradient(rgba(2,15,40,.08),rgba(3,22,55,.10)),
    url("images/key-materials-bg-v62.jpg") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}

html body main#top > section.section:nth-of-type(8)::before,
html body main#top > section.section:nth-of-type(8)::after,
html body main#top > section.section:nth-of-type(8) > .wrap::before,
html body main#top > section.section:nth-of-type(8) > .wrap::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}


/* =========================================================
   V63 — REPLACE ONLY PALE / LIGHT-BLUE SECTION BACKGROUNDS
   Exact user-provided gold-space image.
   DO NOT change:
   - hero
   - dark sections (#memepiece, #roadmap)
   - videos / layout / HTML
   ========================================================= */

/* Intro and other ordinary light sections */
html body main#top > section.section:not(.dark):not(.hero),
html body main#top > section.section.soft:not(.dark),
html body main#top > section#ecosystem.section,
html body main#top > section#contact.section,
html body main#top > section.key-materials-v61,
html body main#top > section.key-materials-section {
  background-color:#080705 !important;
  background-image:
    linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.18)),
    url("images/gold-space-bg-v63.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}

/* Gold guide/video area was also a pale light-blue background */
html body main#top > section.gold-video-section {
  background-color:#080705 !important;
  background-image:
    linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.18)),
    url("images/gold-space-bg-v63.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* If a light video-showcase exists, change its background too */
html body main#top > section.video-showcase {
  background-color:#080705 !important;
  background-image:
    linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.18)),
    url("images/gold-space-bg-v63.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Remove old pale-blue decorative blobs/layers only on the replaced light sections */
html body main#top > section.section:not(.dark):not(.hero)::before,
html body main#top > section.section:not(.dark):not(.hero)::after,
html body main#top > section.section:not(.dark):not(.hero) > .wrap::before,
html body main#top > section.section:not(.dark):not(.hero) > .wrap::after,
html body main#top > section.gold-video-section::before,
html body main#top > section.video-showcase::before {
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Keep dark sections and hero exactly as they were */
html body main#top > section.hero,
html body main#top > section.section.dark,
html body main#top > section#memepiece,
html body main#top > section#roadmap {
  /* intentionally untouched by V63 */
}

/* Improve readability of text that sat on pale backgrounds */
html body main#top > section.section:not(.dark):not(.hero) .title,
html body main#top > section.section:not(.dark):not(.hero) .lead,
html body main#top > section.section:not(.dark):not(.hero) .eyebrow {
  color:#ffffff !important;
}


/* =========================================================
   V64 — DEMETER LOOP + CONTACT INVITE ONLY
   1) Demeter Loop image ~2x visual presence, centered above
   2) Payment/Data/Credit/Reward cards in one row below image
   3) Add a separate thick glowing SILVER invite card in Contact
   No other backgrounds/layouts are changed here.
   ========================================================= */

/* ---------- DEMETER LOOP ---------- */
#demeter .split{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:26px !important;
  margin-top:44px !important;
}

/* The visual comes first even though it appears second in the HTML */
#demeter .split > .visual{
  order:1 !important;
  width:min(100%,1200px) !important;
  max-width:1200px !important;
  justify-self:center !important;
  margin:0 auto !important;
  padding:14px !important;
}

#demeter .split > .visual img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

/* Feature-card wrapper moves below the enlarged Loop image */
#demeter .split > div:first-child{
  order:2 !important;
  width:min(100%,1200px) !important;
  margin:0 auto !important;
}

#demeter .features{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:0 !important;
  width:100% !important;
}

#demeter .features .feature{
  min-height:108px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:22px 22px !important;
}

/* ---------- CONTACT: NEW SILVER INVITE CARD ---------- */
#contact .wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:24px !important;
}

#contact .invite-silver-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:26px !important;
  width:100% !important;
  padding:30px 34px !important;
  border:4px solid #eef7ff !important;
  outline:1px solid rgba(255,255,255,.96) !important;
  outline-offset:-6px !important;
  border-radius:28px !important;
  color:#ffffff !important;
  text-decoration:none !important;
  background:
    linear-gradient(145deg,rgba(26,58,91,.93),rgba(7,32,63,.95)) !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.98),
    0 0 26px rgba(214,235,255,.88),
    0 0 52px rgba(154,205,255,.58),
    0 18px 42px rgba(0,15,40,.28) !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
}

#contact .invite-silver-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:
    0 0 12px rgba(255,255,255,1),
    0 0 32px rgba(225,242,255,.96),
    0 0 64px rgba(145,200,255,.68),
    0 22px 48px rgba(0,15,40,.32) !important;
}

#contact .invite-silver-copy{
  min-width:0 !important;
}

#contact .invite-silver-title{
  display:block !important;
  color:#ffffff !important;
  font-size:30px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
}

#contact .invite-silver-sub{
  display:block !important;
  margin-top:8px !important;
  color:#dceeff !important;
  font-size:16px !important;
  font-weight:700 !important;
}

#contact .invite-silver-action{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:170px !important;
  min-height:58px !important;
  padding:13px 24px !important;
  border-radius:999px !important;
  color:#0a396f !important;
  background:linear-gradient(180deg,#ffffff,#e4f1ff) !important;
  font-size:17px !important;
  font-weight:900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 24px rgba(0,18,48,.22) !important;
}

@media(max-width:950px){
  #demeter .features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:620px){
  #demeter .features{
    grid-template-columns:1fr !important;
  }

  #contact .invite-silver-card{
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:26px 24px !important;
    border-width:3px !important;
  }

  #contact .invite-silver-title{
    font-size:25px !important;
  }

  #contact .invite-silver-action{
    width:100% !important;
  }
}