:root{
--bg:#bbf4d9;
--bg-alt:#a6e8d8;
--panel:#c6ffe6;
--panel-border:#ff18a8;
--text:#3f1187;
--muted:#54209d;
--primary:#ff16a6;
--primary-dark:#ff43bc;
--secondary:#ffe27b;
--outline:#45108f;
--white:#ffffff;
--ink:#2d0668;
--chip-1:#ff16a6;
--chip-2:#4f14a7;
--chip-3:#ffe27b;
--shadow:0 26px 70px rgba(69,16,143,0.2);
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Barlow Condensed",sans-serif;
color:var(--text);
background:linear-gradient(180deg, #bff8dc 0%, #b1f0d8 100%);
min-height:100vh;
overflow-x:hidden;
position:relative;
}

.page-shell{
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
min-height:100vh;
position:relative;
z-index:2;
}

.container{
width:min(100%, 720px);
margin:auto;
text-align:center;
}

.card{
padding:32px 26px 30px;
background:rgba(198,255,230,0.72);
backdrop-filter:blur(8px);
border:4px solid var(--panel-border);
border-radius:32px;
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg, rgba(255,255,255,0.28), transparent 42%),
radial-gradient(circle at top right, rgba(255,22,166,0.18), transparent 28%);
pointer-events:none;
}

.card-wide{
width:min(100%, 960px);
}

.display-screen .page-shell{
padding:28px 24px;
align-items:stretch;
}

.display-card{
width:min(100%, 1240px);
min-height:calc(100vh - 56px);
display:flex;
flex-direction:column;
justify-content:flex-start;
overflow:hidden;
}

.display-card .brand-row{
margin-bottom:14px;
}

.display-card .intro{
max-width:44rem;
margin-top:10px;
}

.brand-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
position:relative;
z-index:1;
}

.ignite-logo{
display:block;
width:clamp(190px, 30vw, 360px);
height:auto;
flex:0 0 auto;
}

.event-tag{
margin:0;
font-size:clamp(1.3rem, 3.4vw, 2rem);
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--outline);
}

.eyebrow{
margin:0 0 10px;
font-size:clamp(1.3rem, 3.4vw, 2rem);
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--outline);
position:relative;
z-index:1;
}

.section-tag{
display:inline-block;
padding:12px 18px 10px;
font-family:"Bungee",sans-serif;
font-size:clamp(1.15rem, 3vw, 1.85rem);
line-height:1;
letter-spacing:0.02em;
color:var(--white);
background:var(--primary);
border-radius:10px;
box-shadow:5px 5px 0 var(--outline);
}

h1{
margin:0;
font-family:"Bungee",sans-serif;
font-size:clamp(2.4rem, 8vw, 5.5rem);
line-height:0.92;
text-transform:uppercase;
letter-spacing:0.02em;
color:var(--white);
position:relative;
z-index:1;
text-shadow:
4px 4px 0 var(--outline),
8px 8px 0 var(--primary);
}

.intro{
max-width:34rem;
margin:16px auto 0;
font-size:1.4rem;
font-weight:600;
line-height:1.35;
color:var(--muted);
position:relative;
z-index:1;
}

.input-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin-top:28px;
position:relative;
z-index:1;
}

input{
flex:1 1 320px;
width:100%;
min-width:0;
padding:18px 20px;
font:inherit;
font-size:1.2rem;
font-weight:600;
color:var(--ink);
background:rgba(255,255,255,0.98);
border:4px solid var(--outline);
border-radius:18px;
outline:none;
box-shadow:6px 6px 0 rgba(79,20,167,0.18);
}

input::placeholder{
color:rgba(45,6,104,0.68);
}

input:focus{
border-color:var(--primary);
box-shadow:
0 0 0 5px rgba(255,22,166,0.16),
6px 6px 0 rgba(79,20,167,0.18);
}

button{
padding:18px 24px;
font-family:"Bungee",sans-serif;
font-size:0.98rem;
font-weight:700;
letter-spacing:0.04em;
color:var(--white);
border:4px solid var(--outline);
border-radius:18px;
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
cursor:pointer;
transition:transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
box-shadow:7px 7px 0 var(--outline);
}

button:hover,
button:focus-visible{
transform:translateY(-1px);
box-shadow:9px 9px 0 var(--outline);
}

button:disabled{
opacity:0.88;
cursor:wait;
}

.message-card{
margin-top:24px;
padding:22px 20px;
border-radius:24px;
background:rgba(79,20,167,0.98);
border:4px solid var(--secondary);
box-shadow:10px 10px 0 rgba(255,22,166,0.95);
position:relative;
z-index:1;
}

.message-card .eyebrow{
color:var(--secondary);
margin-bottom:12px;
}

#promiseText{
margin:0;
font-family:"Changa",sans-serif;
font-size:clamp(1.7rem, 4vw, 2.5rem);
line-height:1.2;
font-weight:700;
color:var(--white);
}

.screenshot-note{
margin:14px 0 0;
font-size:1rem;
font-weight:700;
letter-spacing:0.03em;
color:var(--secondary);
}

.hidden{
display:none;
}

#cloud{
margin-top:32px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-content:flex-start;
gap:14px;
position:relative;
z-index:1;
}

.display-card #cloud{
flex:1;
width:100%;
margin-top:26px;
padding:4px 4px 0;
gap:12px 14px;
justify-content:flex-start;
align-items:flex-start;
align-content:flex-start;
overflow:hidden;
}

.word{
padding:10px 14px;
border-radius:18px;
font-family:"Bungee",sans-serif;
font-weight:700;
line-height:1.05;
color:var(--white);
background:var(--chip-1);
border:4px solid var(--outline);
box-shadow:6px 6px 0 rgba(69,16,143,0.82);
transform:translateY(0) rotate(var(--tilt, 0deg));
animation:floatWord var(--float-duration, 9s) ease-in-out infinite;
animation-delay:var(--float-delay, 0s);
will-change:transform;
}

.word:nth-child(3n){
background:var(--chip-2);
}

.word:nth-child(3n+1){
background:var(--chip-3);
color:#220652;
}

@keyframes floatWord{
0%, 100%{
transform:translateY(0) rotate(var(--tilt, 0deg));
}
50%{
transform:translateY(-8px) rotate(calc(var(--tilt, 0deg) * -1));
}
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0, 0, 0, 0);
white-space:nowrap;
border:0;
}

.bg-orb,
.bg-ring,
.bg-panel{
position:fixed;
pointer-events:none;
z-index:1;
}

.bg-panel{
background:rgba(255,255,255,0.16);
transform:rotate(-32deg);
clip-path:polygon(16% 0, 100% 0, 82% 100%, 0 100%);
}

.panel-one{
width:38vw;
height:110vh;
top:-14vh;
left:-6vw;
}

.panel-two{
width:34vw;
height:90vh;
top:6vh;
right:14vw;
opacity:0.28;
}

.panel-three{
width:42vw;
height:75vh;
bottom:-12vh;
left:32vw;
opacity:0.2;
}

.bg-orb,
.bg-ring{
border-radius:50%;
}

.orb-one{
width:320px;
height:320px;
bottom:-90px;
left:-80px;
background:conic-gradient(from 110deg, var(--secondary) 0 28%, var(--primary) 28% 78%, var(--outline) 78% 100%);
}

.orb-two{
width:300px;
height:300px;
bottom:12%;
right:-110px;
background:radial-gradient(circle at center, var(--outline) 0 58%, transparent 59%);
border:28px solid var(--secondary);
box-shadow:inset 0 0 0 20px var(--primary);
}

.orb-three{
width:180px;
height:180px;
top:-40px;
right:12%;
background:conic-gradient(from 30deg, var(--outline) 0 35%, var(--primary) 35% 68%, var(--secondary) 68% 100%);
}

.ring-one,
.ring-two{
border:22px solid var(--primary);
}

.ring-one{
width:260px;
height:260px;
bottom:8%;
left:6%;
border-right-color:transparent;
border-top-color:var(--secondary);
}

.ring-two{
width:340px;
height:340px;
right:4%;
bottom:-80px;
border-left-color:var(--secondary);
border-top-color:transparent;
}

@media (max-width:700px){
.display-screen .page-shell{
padding:18px 14px 28px;
align-items:flex-start;
}

.display-card{
min-height:auto;
}

.page-shell{
align-items:flex-start;
padding:18px 14px 28px;
}

.card{
padding:22px 16px 24px;
border-radius:22px;
}

.brand-row{
align-items:center;
flex-direction:column;
justify-content:center;
gap:10px;
margin-bottom:12px;
text-align:center;
}

.ignite-logo{
width:200px;
}

.event-tag{
align-self:center;
font-size:1rem;
}

.eyebrow{
letter-spacing:0.08em;
font-size:1rem;
margin-bottom:8px;
}

.section-tag{
padding:10px 14px 8px;
font-size:1rem;
box-shadow:4px 4px 0 var(--outline);
}

.intro{
max-width:16rem;
margin-top:10px;
font-size:1.05rem;
line-height:1.2;
}

.input-area{
flex-direction:column;
align-items:center;
gap:10px;
margin-top:20px;
}

button,
input{
width:min(100%, 230px);
padding:14px 16px;
font-size:0.95rem;
box-shadow:4px 4px 0 rgba(69,16,143,0.82);
}

button{
font-size:0.84rem;
letter-spacing:0.03em;
}

.panel-one{
width:56vw;
left:-18vw;
}

.panel-two{
width:46vw;
right:-8vw;
}

.panel-three{
width:60vw;
left:22vw;
}

.orb-one{
width:220px;
height:220px;
left:-110px;
}

.orb-two{
width:220px;
height:220px;
right:-90px;
}

.orb-three{
top:-50px;
right:-40px;
}

.ring-one,
.ring-two{
display:none;
}

#cloud{
gap:10px;
}

.display-card #cloud{
margin-top:20px;
padding:0;
gap:12px;
justify-content:center;
}

.word{
animation:none;
}

.word{
padding:10px 14px;
}

.message-card{
margin-top:20px;
padding:18px 16px;
box-shadow:7px 7px 0 rgba(255,22,166,0.95);
}

#promiseText{
font-size:1.45rem;
}

.screenshot-note{
font-size:0.9rem;
}
}