:root{
  --bg:#0a0a0e;
  --bg-2:#0e0e15;
  --panel:#14141d;
  --panel-2:#191924;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --ink:#f6f5f2;
  --muted:#9a9aa7;
  --muted-2:#6d6d7a;
  --amber:#ffb64d;        /* director / cinematic */
  --amber-deep:#ff9d2e;
  --violet:#8b7bff;       /* agentic AI */
  --violet-deep:#6d5cff;
  --cyan:#43e6d4;         /* data micro-accent */
  --glow-v:rgba(109,92,255,.55);
  --glow-a:rgba(255,157,46,.5);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Space Mono',monospace;
  --maxw:1200px;
}


.gradient-text {
  background-image: linear-gradient(to right, #14d1e6, #6b54f8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.syne{
  font-family: 'Syne', sans-serif;
}

.timeline-wrapper{
max-width:1200px;
margin:auto;
}

.title{

font-size:54px;
font-weight:900;
text-align:center;
color:#16224f;
margin-bottom:15px;
letter-spacing:-1px;
}

.subtitle{
text-align:center;
font-size:20px;
color:#67708f;
margin-bottom:60px;
}

.grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;

}

.timeline-wrapper .card{

position: relative;
  overflow: hidden;
background: #0c001a;
  border-radius: 28px;
  padding: 10px 37px;
  box-shadow: 0 30px 70px rgba(29,73,184,.10), 0 10px 25px rgba(67,97,238,.08);
  transition: .45s;
  border: 1px solid rgba(117, 123, 255, 0.53);

}

.timeline-wrapper .card:hover{

transform:translateY(-10px);
box-shadow:
0 40px 90px rgba(43,84,196,.18);

}

.glow{

position:absolute;
width:250px;
height:250px;
border-radius:50%;
filter:blur(60px);
opacity:.25;
top:-100px;
right:-90px;

}

.blue{
background:#35b7ff;
}

.pink{
background:#ff5eb7;
}

.purple{
background:#8a6cff;
}

.orange{
background:#ff8b2d;
}

.top{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:0;

}

.icon{

width:82px;
height:82px;

border-radius:24px;

display:flex;
align-items:center;
justify-content:center;

font-size:42px;

background:linear-gradient(135deg,#7dd3ff,#4d8cff);

box-shadow:
0 18px 35px rgba(63,118,255,.30);

color:#fff;

}

.tag{

display:inline-block;
padding:11px 22px;
border-radius:100px;
font-weight:700;
font-size:14px;
letter-spacing:.5px;
text-transform:uppercase;
color:#fff;

}

.blueTag{
background:linear-gradient(90deg,#2ea6ff,#5672ff);
}

.pinkTag{
background:linear-gradient(90deg,#ff5aa5,#ff7b7b);
}

.greenTag{
background:linear-gradient(90deg,#34d399,#10b981);
}

.orangeTag{
background:linear-gradient(90deg,#ff8b2d,#ff5e62);
}

h2{

font-size:38px;
font-weight:900;
color:#16224f;
color: #fff ;
margin: 10px 0 0px;

}

.date{
font-size: 22px;
  font-weight: 300;
  margin-top: 5px;
margin-bottom: 5px;
}

.time{
margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed #4f4f4f;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-align: end;

}

.time span{
font-size: 22px;
  font-weight: 800;
  color: #3555ff;

}

.footer{

margin-top:55px;
text-align:center;
font-size:18px;
color:#6b7692;

}

@media(max-width:900px){

.grid{
grid-template-columns:1fr;
}

.title{
font-size:38px;
}

.card{
padding:28px;
}

h2{
font-size:28px;
}

.date{
font-size:22px;
}

.time{
font-size:18px;
}

}

.timeline-date .card{
text-align:start;
}

/*====================================================
                PREMIUM GLOBAL CSS
====================================================*/

:root{

--primary:#4F7DFF;
--secondary:#7A5FFF;
--dark:#16213d;
--text:#3b4664;
--light:#ffffff;
--border:#edf2ff;
--shadow:0 25px 70px rgba(27,61,129,.10);
--radius:28px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}
/* 
body{

font-family:'Outfit',sans-serif;
background:#f8fbff;
color:var(--text);
overflow-x:hidden;

} */

a{
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

.container{
position:relative;
z-index:2;
}

/*====================================================
                SECTION
====================================================*/

.premium-contact-section{

position:relative;
padding:90px 0 120px;
overflow:hidden;
background:

linear-gradient(180deg,#ffffff 0%,#f7faff 100%);

}

/*====================================================
                BACKGROUND
====================================================*/

.bg-circle{

position:absolute;
border-radius:50%;
filter:blur(90px);
opacity:.45;
animation:float 8s ease-in-out infinite;

}

.bg1{

width:420px;
height:420px;
background:#4f7dff;

top:-150px;
left:-120px;

}

.bg2{

width:380px;
height:380px;
background:#8d74ff;

right:-120px;
top:80px;

animation-delay:2s;

}

.bg3{

width:350px;
height:350px;
background:#9ed6ff;

bottom:-150px;
left:35%;

animation-delay:4s;

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-35px);
}

100%{
transform:translateY(0px);
}

}

/*====================================================
                TOP BADGE
====================================================*/

.top-badge{

display:inline-flex;
align-items:center;
gap:10px;

padding:12px 26px;

background:#fff;

border:1px solid var(--border);

border-radius:100px;

font-weight:700;

color:var(--primary);

box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.top-badge i{

font-size:15px;

}

/*====================================================
                TITLE
====================================================*/

.main-title{

font-size:66px;
font-weight:900;
line-height:1.08;

margin-top:28px;

color:#17284f;

}

.subtitle{

margin-top:25px;

font-size:22px;

line-height:1.9;

color:#68738d;

max-width:850px;

margin-inline:auto;

}

/*====================================================
                LAUNCH CARD
====================================================*/

.launch-card{

position:relative;

/* background:#fff; */

border-radius:32px;

padding:55px;

box-shadow:var(--shadow);

border:1px solid var(--border);

overflow:hidden;

}

/* Gradient Border */

.launch-card::before{

content:"";

position:absolute;

inset:0;

padding:2px;

border-radius:32px;

/* background:

linear-gradient(135deg,#4f7dff,#8b64ff,#4f7dff);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0); */

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/* Shine */

.launch-card::after{

content:"";

position:absolute;

width:180px;

height:500px;

background:rgba(255,255,255,.55);

transform:rotate(30deg);

left:-220px;

top:-80px;

animation:shine 7s linear infinite;

}

@keyframes shine{

100%{

left:120%;

}

}

.launch-label{

display:inline-block;

padding:12px 24px;

border-radius:100px;

background:linear-gradient(90deg,#4f7dff,#7d63ff);

color:#fff;

font-weight:700;

margin-bottom:35px;

letter-spacing:.5px;

}

.launch-box{

display:flex;

align-items:center;

gap:18px;

padding:12px 20px;

}

.launch-icon{

width:74px;
height:74px;

border-radius:22px;

background:

linear-gradient(135deg,#4f7dff,#8263ff);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

box-shadow:

0 20px 45px rgba(79,125,255,.35);

}

.launch-box small{

display:block;

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;

color:#8d95ad;

margin-bottom:8px;

}

.launch-box h3{

font-size:30px;

font-weight:800;

margin:0;

color:#16213d;

}

.webinar-text{

margin-top:28px;

text-align:center;

font-size:20px;

font-weight:700;

color:#5c6d95;

}

.webinar-text i{

margin-right:10px;

color:#4f7dff;

}

/*====================================================
                FEATURE CARD
====================================================*/

.feature-card{

height:100%;

background:#fff;

border-radius:24px;

padding:28px;

text-align:center;

border:1px solid var(--border);

box-shadow:0 15px 45px rgba(27,61,129,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

left:-60px;
top:-60px;

width:120px;
height:120px;

background:rgba(79,125,255,.08);

border-radius:50%;

transition:.4s;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(27,61,129,.15);

}

.feature-card:hover::before{

transform:scale(3);

}

.feature-icon{

width:70px;
height:70px;

margin:auto;

border-radius:20px;

background:

linear-gradient(135deg,#4f7dff,#7b61ff);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

margin-bottom:22px;

box-shadow:0 20px 45px rgba(79,125,255,.30);

}

.feature-card span{

font-size:21px;

font-weight:800;

color:#1f2d52;

}

/*====================================================
                CTA BUTTON
====================================================*/

.premium-btn{

display:flex;

justify-content:center;

align-items:center;

gap:16px;

padding:24px 40px;

border-radius:80px;

background:

linear-gradient(90deg,#4f7dff,#755dff);

font-size:22px;

font-weight:800;

color:#fff;

box-shadow:

0 25px 60px rgba(79,125,255,.35);

position:relative;

overflow:hidden;

transition:.35s;

}

.premium-btn span{

position:relative;

z-index:2;

}

.premium-btn i{

position:relative;

z-index:2;

transition:.35s;

}

.premium-btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;
height:100%;

background:

rgba(255,255,255,.20);

transform:skewX(-35deg);

transition:1s;

}

.premium-btn:hover::before{

left:130%;

}

.premium-btn:hover{

transform:translateY(-6px);

box-shadow:0 35px 80px rgba(79,125,255,.45);

}

.premium-btn:hover i{

transform:translateX(8px);

}

/*====================================================
                PREMIUM FORM CARD
====================================================*/

.form-card{

position:relative;
background:rgba(255,255,255,.95);

backdrop-filter:blur(18px);

border-radius:32px;

padding:50px 45px;

border:1px solid rgba(79,125,255,.12);

box-shadow:
0 30px 80px rgba(0,0,0,.08);

overflow:hidden;

transition:.4s;

}

.form-card:hover{

transform:translateY(-8px);

box-shadow:
0 45px 100px rgba(79,125,255,.15);

}

.form-card::before{

content:"";

position:absolute;

top:-140px;
right:-140px;

width:280px;
height:280px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(79,125,255,.18),
transparent 70%);

}

.form-card::after{

content:"";

position:absolute;

bottom:-120px;
left:-120px;

width:240px;
height:240px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(122,95,255,.15),
transparent 70%);

}

.form-card h3{

font-size:34px;

font-weight:900;

color:#16213d;

margin-bottom:10px;

position:relative;
z-index:2;

}

.form-card p{

font-size:18px;

color:#6f7892;

margin-bottom:35px;

position:relative;
z-index:2;

}

/*====================================================
                INPUTS
====================================================*/

.input-group-custom{

position:relative;

margin-bottom:22px;

z-index:2;

}

.input-group-custom i{

position:absolute;

left:22px;
top:50%;

transform:translateY(-50%);

font-size:18px;

color:#5d79ff;

}

.input-group-custom input{

width:100%;

height:68px;

padding:0 22px 0 60px;

border-radius:18px;

border:1px solid #e6edff;

background:#fff;

font-size:17px;

font-family:'Outfit',sans-serif;

outline:none;

transition:.35s;

box-shadow:
0 10px 30px rgba(0,0,0,.03);

}

.input-group-custom input::placeholder{

color:#a0aac5;

}

.input-group-custom input:focus{

border-color:#5d79ff;

box-shadow:
0 0 0 4px rgba(79,125,255,.10),
0 18px 45px rgba(79,125,255,.10);

}

/*====================================================
                SIGNUP BUTTON
====================================================*/

.signup-btn{

width:100%;

height:68px;

border:none;

border-radius:18px;

cursor:pointer;

font-size:20px;

font-weight:800;

color:#fff;

background:
linear-gradient(135deg,#4f7dff,#7b61ff);

box-shadow:
0 20px 50px rgba(79,125,255,.35);

transition:.35s;

position:relative;

overflow:hidden;

z-index:2;

}

.signup-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;
height:100%;

background:
rgba(255,255,255,.28);

transform:skewX(-25deg);

transition:1s;

}

.signup-btn:hover::before{

left:150%;

}

.signup-btn:hover{

transform:translateY(-5px);

box-shadow:
0 35px 70px rgba(79,125,255,.45);

}

/*====================================================
              DECORATIVE ELEMENTS
====================================================*/

.launch-card,
.feature-card,
.form-card{

animation:fadeUp .8s ease both;

}

.feature-card:nth-child(2){

animation-delay:.15s;

}

.feature-card:nth-child(3){

animation-delay:.3s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(35px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/* Floating dots */

.premium-contact-section::before{

content:"";

position:absolute;

width:14px;
height:14px;

border-radius:50%;

background:#6b82ff;

top:20%;

left:8%;

box-shadow:
120px 180px #a07cff,
250px -40px #79c7ff,
920px 80px #6b82ff,
780px 420px #9f8bff,
-20px 520px #79c7ff;

opacity:.35;

animation:floatDots 12s linear infinite;

}

@keyframes floatDots{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}

/*====================================================
                RESPONSIVE
====================================================*/

@media(max-width:1200px){

.main-title{

font-size:54px;

}

.subtitle{

font-size:20px;

}

}

@media(max-width:991px){

.premium-contact-section{

padding:70px 0;

}

.main-title{

font-size:44px;

}

.subtitle{

font-size:18px;
line-height:1.8;

}

.launch-card{

padding:35px;

}

.launch-box{

padding:18px 0;

}

.launch-box.border-start{

border-left:none !important;

border-top:1px solid #edf2ff;

margin-top:20px;

padding-top:30px;

}

.launch-box h3{

font-size:24px;

}

.form-card{

margin-top:20px;

}

}

@media(max-width:767px){

.main-title{

font-size:34px;

}

.subtitle{

font-size:16px;

}

.top-badge{

font-size:14px;

padding:10px 18px;

}

.launch-card{

padding:28px 22px;

border-radius:22px;

}

.launch-label{

font-size:14px;

}

.launch-icon{

width:58px;
height:58px;

font-size:22px;

border-radius:16px;

}

.launch-box h3{

font-size:20px;

}

.feature-card{

padding:22px;

}

.feature-card span{

font-size:18px;

}

.premium-btn{

font-size:18px;

padding:18px 24px;

}

.form-card{

padding:35px 25px;

}

.form-card h3{

font-size:28px;

}

.signup-btn{

height:60px;

font-size:18px;

}

.input-group-custom input{

height:60px;

}

}

@media(max-width:480px){

.main-title{

font-size:30px;

}

.subtitle{

font-size:15px;

}

.webinar-text{

font-size:16px;

}

.premium-btn{

font-size:16px;

gap:10px;

}

.form-card{

padding:30px 20px;

}

}


.eyebrow {
  color: #ffe7a6;
  background: rgba(242,176,30,.12);
  border: 1px solid rgba(242,176,30,.4);
  margin-bottom: 22px;
}



/* new css */


/* ---- image slots (drop real product screenshots here) ---- */

/* ============ LAYOUT UTILS ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.sec{padding:96px 0;position:relative;z-index:1}
.sec-sm{padding:64px 0}
.center{text-align:center}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.7}
.eyebrow.v::before{background:var(--violet)}
.eyebrow.v{color:var(--violet)}
h2.title{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em;margin:18px 0}
.lead{color:var(--muted);font-size:18px;max-width:680px}
.center .lead{margin-inline:auto}
.hl{
  background:linear-gradient(100deg,var(--amber),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hl-v{color:var(--violet)}
.hl-a{color:var(--amber)}

/* frame corner brackets — the cinematic signature motif */
.framed{position:relative}
.framed::before,.framed::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border:1.5px solid var(--line-2);
}
.framed::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.framed::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;
  font-size:15px;padding:15px 26px;border-radius:2px;cursor:pointer;border:0;transition:.25s;letter-spacing:.01em;
}
.btn-primary{
background: linear-gradient( 90deg, #4edcff 0%, #61baff 30%, #9a72ff 62%, #e270ff 100% );
  
  color:#1a1206;position:relative;
 box-shadow:0 0 0 1px rgba(193, 126, 255, 0.6),0 18px 50px -12px var(--glow-a);
}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(193, 126, 255, 0.6),0 18px 50px -12px var(--glow-a);
  background: linear-gradient( 90deg, #4edcff 0%, #61baff 30%, #9a72ff 62%, #e270ff 100% );
}


.btn-ghost{background: linear-gradient(90deg, #7c3aed, #2563eb);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--violet);color:#fff;box-shadow:0 0 30px -10px var(--glow-v)}
.btn svg{width:16px;height:16px}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,10,14,.72);border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand .mark{
  width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet-deep),var(--amber));position:relative;
}
.brand .mark::after{content:"";position:absolute;inset:6px;border:2px solid rgba(10,10,14,.85);border-radius:50%}
.brand b{color:var(--amber)}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:10px 18px;font-size:13px}
@media(max-width:900px){.nav-links{display:none}}

/* ============ HERO ============ */
.hero{padding:84px 0 64px;position:relative;text-align:center}
.hero-grid{max-width:820px;margin:0 auto}
.hero .eyebrow{justify-content:center}
.hero-cta,.stat-chips{justify-content:center}
.hero h1{
  font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.6vw,66px);line-height:1.02;
  letter-spacing:-.03em;margin:22px 0 20px;
}
.hero h1 .sm{display:block;font-size:.42em;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-bottom:6px;font-family:var(--font-mono);text-transform:uppercase}
.hero p.sub{color:var(--muted);font-size:18px;max-width:600px;margin:0 auto 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px; margin-top:10px}
.stat-chips{display:flex;gap:14px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--panel);padding:14px 18px;border-radius:3px;min-width: 200px;
  text-align: center;
}
.chip .k{font-family:var(--font-display);font-weight:700;font-size:24px}
.chip .k.amber{color:var(--amber)} .chip .k.violet{color:var(--violet)}
.chip .l{font-size:12px;color:#fff;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* ---- signature: Director's Monitor ---- */
.monitor{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2);border-radius:8px;padding:20px;position:relative;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;
}
.monitor .scan{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.012) 4px);}
.mon-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.08em}
.rec{display:flex;align-items:center;gap:7px;color:#ff6b6b}
.rec .dot{width:8px;height:8px;border-radius:50%;background:#ff6b6b;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.mon-screen{
  background:radial-gradient(120% 120% at 50% 0%,#101018,#0a0a10);
  border:1px solid var(--line);
  border-radius:20px;padding:22px;position:relative;overflow:hidden;
}
.mon-screen .corner{position:absolute;width:14px;height:14px;border:1.5px solid rgba(255,182,77,.55)}
.c1{top:10px;left:10px;border-right:0;border-bottom:0}
.c2{top:10px;right:10px;border-left:0;border-bottom:0}
.c3{bottom:10px;left:10px;border-right:0;border-top:0}
.c4{bottom:10px;right:10px;border-left:0;border-top:0}
.goal-label{font-family:var(--font-mono);font-size:11px;color:var(--violet);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.goal-line{font-family:var(--font-display);font-size:19px;font-weight:600;min-height:52px;color:var(--ink)}
.goal-line .cur{display:inline-block;width:9px;height:20px;background:var(--amber);vertical-align:-3px;margin-left:2px;animation:blink 1s step-end infinite}
.mon-div{height:1px;background:var(--line);margin:18px 0}
.direct-label{font-family:var(--font-mono);font-size:11px;color:var(--amber);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.direct-label .spark{width:14px;height:14px}
.fmt-list{display:flex;flex-direction:column;gap:9px}
.fmt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.015);
  font-size:14px;color:var(--muted);transition:.4s;
}
.fmt .lbl{display:flex;align-items:center;gap:11px}
.fmt .ar{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.fmt .ic{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line)}
.fmt.sel{
  border-color:rgba(255,182,77,.7);background:linear-gradient(100deg,rgba(255,182,77,.14),rgba(139,123,255,.1));
  color:var(--ink);box-shadow:0 0 30px -12px var(--glow-a);
}
.fmt.sel .tag{font-family:var(--font-mono);font-size:10px;color:var(--amber);letter-spacing:.1em;border:1px solid rgba(255,182,77,.5);padding:3px 8px;border-radius:3px}
.mon-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.mon-foot .prog{flex:1;height:3px;background:var(--line);border-radius:3px;margin:0 14px;overflow:hidden}
.mon-foot .prog i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--amber),var(--violet));animation:load 4s ease-in-out infinite}
@keyframes load{0%{width:8%}60%{width:100%}100%{width:100%}}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:16px 0}
.mq-track{display:flex;gap:44px;white-space:nowrap;animation:mq 26s linear infinite;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.mq-track span{display:inline-flex;align-items:center;gap:44px}
.mq-track b{color:var(--amber);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ DATES / COUNTDOWN ============ */
.dates-box{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:8px;
  padding:40px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
}
@media(max-width:820px){.dates-box{grid-template-columns:1fr;gap:28px}}
.dline{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.dline:last-child{margin-bottom:0}
.dline .n{font-family:var(--font-mono);color:var(--violet);font-size:12px;padding-top:3px;min-width:60px}
.dline .t{font-size:15px}.dline .t b{color:var(--ink)}
.countdown{display:flex;gap:12px}
.cd{background:var(--bg);border:1px solid var(--line-2);border-radius:5px;width:74px;padding:14px 0;text-align:center}
.cd .num{font-family:var(--font-mono);font-weight:700;font-size:30px;color:var(--amber)}
.cd .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}

/* ============ CARD GRIDS ============ */
.grid{display:grid;gap:20px}
.g5{grid-template-columns:repeat(5,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g5,.g4,.g3,.g2{grid-template-columns:1fr}}
/* .card{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px;transition:.3s;position:relative;
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.card .ic{
  width:44px;height:44px;border-radius:8px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(139,123,255,.18),rgba(255,182,77,.14));border:1px solid var(--line);
}
.card .ic svg{width:22px;height:22px}
.card h3{font-family:var(--font-display);font-weight:600;font-size:17px;margin-bottom:8px;letter-spacing:-.01em}
.card p{font-size:14px;color:var(--muted)}
.card .idx{position:absolute;top:20px;right:22px;font-family:var(--font-mono);font-size:12px;color:var(--muted-2)} */

/* problem callout */
.prob{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
@media(max-width:700px){.prob{grid-template-columns:1fr}}
.prob-c{border:1px solid var(--line);border-radius:8px;padding:28px;background:var(--panel);position:relative;overflow:hidden}
.prob-c .badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:3px;display:inline-block;margin-bottom:16px}
.prob-c.bad .badge{color:#ff7d7d;border:1px solid rgba(255,125,125,.35);background:rgba(255,125,125,.07)}
.prob-c.good .badge{color:var(--cyan);border:1px solid rgba(67,230,212,.35);background:rgba(67,230,212,.07)}
.prob-c h4{font-family:var(--font-display);font-size:20px;margin-bottom:8px}
.prob-c p{color:var(--muted);font-size:14px}
.prob-c.good{border-color:rgba(67,230,212,.25)}

/* steps / scenes */
.scene{
  display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-top:1px solid var(--line);align-items:start;
}
.scene:last-child{border-bottom:1px solid var(--line)}
.scene .tk{font-family:var(--font-mono);font-size:12px;color:var(--amber);letter-spacing:.12em}
.scene .tk b{display:block;font-family:var(--font-display);font-size:44px;color:var(--ink);font-weight:700;letter-spacing:-.02em;margin-top:6px}
.scene h3{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:10px}
.scene p{color:var(--muted);max-width:640px}
.scene .fmtrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pill{font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);padding:6px 11px;border-radius:20px;letter-spacing:.04em}

/* feature act header */
.act{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);
  margin:44px 0 18px;display:flex;align-items:center;gap:14px}
.act::after{content:"";flex:1;height:1px;background:var(--line)}
.act:first-of-type{margin-top:0}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.frow{
  display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:22px 26px;transition:.3s;
}
.frow:hover{border-color:var(--line-2)}
.frow.fe{background:linear-gradient(100deg,rgba(255,182,77,.1),rgba(139,123,255,.08));border-color:rgba(255,182,77,.4)}
.frow .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.frow.fe .tag{color:var(--amber)}
.frow h4{font-family:var(--font-display);font-size:18px;font-weight:600}
.frow .desc{font-size:13px;color:var(--muted);margin-top:3px}
.frow .price{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink);text-align:right;white-space:nowrap}
@media(max-width:640px){.frow{grid-template-columns:1fr;gap:8px}.frow .price{text-align:left}}

/* contest */
.prizes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
@media(max-width:700px){.prizes{grid-template-columns:1fr 1fr}}
.prize{border:1px solid var(--line);border-radius:8px;padding:26px;text-align:center;background:var(--panel);position:relative}
.prize.first{border-color:rgba(255,182,77,.5);background:linear-gradient(180deg,rgba(255,182,77,.1),transparent)}
.prize .pl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.prize .pv{font-family:var(--font-display);font-weight:700;font-size:34px;margin-top:8px}
.prize.first .pv{color:var(--amber)}

/* resources */
.res{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 22px;transition:.3s}
.res:hover{border-color:var(--violet);transform:translateY(-2px)}
.res .ic{width:40px;height:40px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.res .ic svg{width:20px;height:20px;color:var(--amber)}
.res h4{font-family:var(--font-display);font-size:15px;font-weight:600}
.res .go{font-family:var(--font-mono);font-size:12px;color:var(--violet)}

/* track record */
.tr{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:700px){.tr{grid-template-columns:1fr 1fr}}
.trbox{border:1px solid var(--line);border-radius:8px;padding:30px 20px;text-align:center;background:linear-gradient(180deg,var(--panel),transparent)}
.trbox .v{font-family:var(--font-display);font-weight:700;font-size:36px;background:linear-gradient(120deg,var(--amber),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.trbox .l{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:640px;margin:0 auto}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.tmember{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:28px;text-align:center}
.avatar{width:76px;height:76px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--violet-deep),var(--amber));display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:26px;color:#12100a}
.tmember h4{font-family:var(--font-display);font-size:18px}
.tmember .role{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);letter-spacing:.06em;margin-top:2px}

/* final cta / form */
.cta-final{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:12px;padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -20%,rgba(139,123,255,.2),transparent 60%);pointer-events:none}
.highlights{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin:26px 0 32px;font-family:var(--font-mono);font-size:13px;color:var(--muted);letter-spacing:.05em}
.highlights b{color:var(--amber)}
.form{max-width:440px;margin:36px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left}
.form label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.form input{background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:14px 16px;color:var(--ink);font-family:var(--font-body);font-size:15px}
.form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,92,255,.15)}

/* ftc / footer */
.ftc{font-size:12px;color:var(--muted-2);max-width:900px;margin:0 auto;line-height:1.8}
.footer{border-top:1px solid var(--line);padding:34px 0;background:var(--bg-2)}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer .links{display:flex;gap:20px;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap}
.footer .links a:hover{color:var(--ink)}

/* placeholder note */
.ph{outline:1px dashed rgba(255,182,77,.4);outline-offset:3px}

/* ---- image slots (drop real product screenshots here) ---- */
.shot{
  position:relative;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,var(--panel-2),var(--panel));
  box-shadow:0 40px 90px -34px rgba(0,0,0,.8);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .ph-fill{
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;gap:8px;padding:30px;
  background:
    radial-gradient(500px 240px at 70% -10%,rgba(109,92,255,.16),transparent 60%),
    radial-gradient(400px 200px at 10% 110%,rgba(255,157,46,.12),transparent 60%),
    repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(255,255,255,.02) 27px),
    repeating-linear-gradient(90deg,transparent,transparent 26px,rgba(255,255,255,.02) 27px);
}
.shot .ph-fill .pic{width:46px;height:46px;color:var(--muted-2)}
.shot .ph-fill .cap{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);letter-spacing:.06em}
.shot .ph-fill .cap b{color:var(--amber)}
.shot .badge-ar{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted-2);border:1px solid var(--line);padding:4px 8px;border-radius:3px;background:rgba(10,10,14,.6)}
.shot .corner{position:absolute;width:16px;height:16px;border:1.5px solid rgba(255,182,77,.5);z-index:2}
.shot .c1{top:10px;left:10px;border-right:0;border-bottom:0}
.shot .c3{bottom:10px;left:10px;border-right:0;border-top:0}
.shot .c4{bottom:10px;right:10px;border-left:0;border-top:0}

.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.showcase.rev{grid-template-columns:.85fr 1.15fr}
@media(max-width:820px){.showcase,.showcase.rev{grid-template-columns:1fr;gap:28px}}
.showcase .txt h3{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.01em;margin:14px 0 10px}
.showcase .txt p{color:var(--muted);font-size:15px}

/* full-width monitor band — AI chat agent */
/* .mon-band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0} */
.mon-band .monitor{max-width:920px;margin:34px auto 0;

}
/* Fixed-size "device screen" — height no longer grows with message count.
   The chat log scrolls internally instead of pushing the page layout. */
.mon-band .mon-screen{
  padding:22px 22px 18px;
  height:555px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* chat — internal scroll region, fixed within the monitor frame */
.chat{
  flex:1 1 auto;
  min-height:0; /* required so flex child can actually shrink & scroll instead of overflowing parent */
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
/* custom scrollbar to match the console aesthetic instead of the default browser bar */
.chat::-webkit-scrollbar{width:6px}
.chat::-webkit-scrollbar-track{background:transparent}
.chat::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.chat::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
.chat{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

.msg{display:flex;gap:11px;align-items:flex-start;opacity:0;transform:translateY(8px);animation:pop .4s forwards;flex:none;min-width:0;max-width:100%}
@keyframes pop{to{opacity:1;transform:none}}
.msg .av{width:30px;height:30px;border-radius:7px;flex:none;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700}
.msg.user{flex-direction:row-reverse}
.msg.user .av{background:var(--panel);border:1px solid var(--line-2);color:var(--muted)}
.msg.ai .av{background:linear-gradient(135deg,var(--violet-deep),var(--amber));color:#12100a;position:relative}
.bubble{
  max-width:58%;width:fit-content;padding:12px 15px;border-radius:12px;font-size:14.5px;line-height:1.55;
  overflow-wrap:break-word;
  min-width:0; /* flex items default to a content-based min-width, which silently
                  overrides max-width when inner content (like the format-option
                  list) is intrinsically wide — this was letting bubbles bleed
                  past the chat column on narrow screens. */
}
.msg.user .bubble{background:var(--panel-2);border:1px solid var(--line-2);border-top-right-radius:3px;color:var(--ink)}
.msg.ai .bubble{
  background:linear-gradient(100deg,rgba(139,123,255,.12),rgba(255,182,77,.07));
  border:1px solid var(--line);border-top-left-radius:3px;color:var(--ink);
}
.bubble .mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:6px}

/* typing dots */
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* format choice chips inside chat */
.choose{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;
  position:relative;isolation:isolate; /* own stacking context so glows/shadows never bleed onto siblings below */
  min-width:0;width:100%;
}
.copt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
  border:1px solid var(--line);border-radius:8px;background:rgba(10,10,15,.55);font-size:13.5px;color:var(--muted);transition:.35s;
  position:relative;
  min-width:0; /* let flex children shrink instead of forcing the row to overflow */
}
.copt .l{display:flex;align-items:center;gap:9px;min-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.copt .l .e{font-size:15px;flex:none}
.copt .ar{font-family:var(--font-mono);font-size:10px;color:var(--muted-2);flex:none}
/* NOTE: intentionally NOT named "scan" — .monitor .scan is the decorative
   scanline overlay; reusing that name here made this rule get matched by
   both selectors at once (.copt was a descendant of .monitor), which forced
   position:absolute + inset:0 onto whichever chip was mid-scan and made it
   stack directly on top of its neighbours. copt-scan is scoped to just this
   component so the two effects can no longer collide. */
.copt.copt-scan{border-color:var(--violet);color:var(--ink);box-shadow:0 0 24px -10px var(--glow-v)}
.copt.win{border-color:rgba(255,182,77,.7);background:linear-gradient(100deg,rgba(255,182,77,.14),rgba(139,123,255,.1));color:var(--ink);box-shadow:0 0 26px -10px var(--glow-a)}
.copt .pick{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--amber);border:1px solid rgba(255,182,77,.5);padding:3px 8px;border-radius:3px;opacity:0;transition:.3s;flex:none}
.copt.win .pick{opacity:1}

/* output render card */
.render{
  margin-top:11px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--bg);
  position:relative;isolation:isolate;
}
.render .rbar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted-2)}
.render .rbar .dl{display:flex;align-items:center;gap:6px;color:var(--cyan)}
.render .rbar .dl .d{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.render .rmeta{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:10px;color:var(--ink);background:rgba(10,10,14,.6);padding:4px 8px;border-radius:3px;letter-spacing:.06em}
.render .pbar{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--violet));animation:load 3.4s ease-in-out infinite}

.mon-restart{text-align:center;margin-top:14px;flex:none;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.06em;min-height:15px}
/* Structured bubbles (format-choice list, output-render card) size the same
   way as any other bubble now — .copt's label has its own min-width (9ch)
   so ellipsis only engages when a screen is genuinely too narrow, instead of
   the whole bubble chain collapsing to fit an artificially-shrinkable label. */
@media(max-width:560px){
  .bubble{max-width:84%}
  .mon-band .mon-screen{height:500px;padding:18px 16px 14px}
  /* Format-choice & output-render bubbles carry structured UI, not prose —
     give them a bit more headroom than a chat sentence needs. */
  .msg.ai.has-choose .bubble,
  .msg.ai.has-render .bubble,
  .msg.ai:has(.choose) .bubble,
  .msg.ai:has(.render) .bubble{max-width:94%}
}
@media(max-width:400px){
  .mon-band .mon-screen{height:160px}
  /* At this width there isn't room for label + aspect-ratio badge on one
     line without truncating the label — stack them so the format name
     stays fully readable instead of being cut off. */
  .copt{flex-wrap:wrap;row-gap:2px}
  .copt .l{min-width:0;flex-basis:100%;white-space:normal}
  .copt .ar{margin-left:29px} /* aligns under the label text, past the emoji icon */
}


/* reveal anim */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* .director-features */


.director-features {
  position: relative;
  overflow: hidden;
}

.director-features-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}


/* =========================
   HEADING
========================= */

.director-features-heading {
  text-align: center;

}

.director-eyebrow {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #ddd6fe;
  border-radius: 50px;
  background: #faf5ff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.director-features-heading h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: -2px;
  font-weight: 900;
}

.director-features-heading h2 span {
  display: block;
  background: linear-gradient(
    90deg,
    #6d28d9,
    #7c3aed,
    #2563eb
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================
   GRID
========================= */

.director-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}


/* =========================
   CARD
========================= */

.director-feature-card {
  position: relative;
padding: 10px;
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  border: 1px solid #e5e7eb;
  /* box-shadow:
    0 18px 50px rgba(15,23,42,.06),
    0 3px 12px rgba(15,23,42,.025); */
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.director-feature-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -75px;
  right: -75px;
  border-radius: 50%;
  background: rgba(124,58,237,.06);
  transition: .4s ease;
}

.director-feature-card:hover {
  /* transform: translateY(-8px); */
  border-color: #c4b5fd;
  /* box-shadow:
    0 28px 65px rgba(91,33,182,.12),
    0 8px 20px rgba(15,23,42,.04); */
}

.director-feature-card:hover::before {
  transform: scale(1.35);
}


/* =========================
   TOP
========================= */

.director-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.director-number {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #9ca3af;
}

.director-icon {
 width: 70px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient( 135deg, #f5f3ff, #eff6ff );
  border: 1px solid #e9d5ff;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(91,33,182,.08);
}


/* =========================
   CONTENT
========================= */

.director-card-content {
  position: relative;
  z-index: 2;
 
  display: flex;
}

.director-card-content h3 {
  margin: 0 0 15px;
  color: #111827;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.7px;

}

.director-card-content p {
  margin: 0;
  color: #6b7280;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
}

.director-card-content p strong {
  color: #374151;
  font-weight: 800;
}


/* =========================
   BOTTOM LINE
========================= */

.director-card-line {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 26px;
  height: 3px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    #7c3aed,
    #2563eb
  );
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .35s ease;
}

.director-feature-card:hover .director-card-line {
  transform: scaleX(1);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

  .director-feature-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin: 0 auto;
  }

  .director-feature-card {
    min-height: 260px;
  }

}


@media (max-width: 600px) {

  .director-features {
    padding: 65px 15px;
  }

  .director-features-heading {
    margin-bottom: 35px;
  }

  .director-features-heading h2 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .director-feature-card {
    padding: 25px;
    border-radius: 22px;
  }

  .director-card-content {
    margin-top: 32px;
  }

  .director-card-content h3 {
    font-size: 23px;
  }

  .director-card-content p {
    font-size: 15px;
  }

  .director-card-line {
    left: 25px;
    right: 25px;
  }

}





/* =====================================================
   DIRECTORAI WHY IT CONVERTS
   UNIQUE PREFIX: drcw-
===================================================== */

.drcw-section {
  position: relative;
  width: 100%;
  padding: 85px 20px 90px;

padding: 70px 0px 90px 0px;

		background: url(../images/drcw-section.png) no-repeat center top;

		background-size: cover;
  color: #ffffff;

  overflow: hidden;
}


/* subtle bottom glow */

.drcw-section::after {
  content: "";
  position: absolute;

  width: 600px;
  height: 250px;

  left: 50%;
  bottom: -220px;

  transform: translateX(-50%);

  background: rgba(124, 58, 237, 0.12);

  filter: blur(90px);

  pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.drcw-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1110px;

  margin: 0 auto;
}


/* =====================================================
   EYEBROW
===================================================== */

.drcw-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 24px;

  color: #f5a623;

  font-size: 20px;
  line-height: 1.4;

  font-weight: 800;

  letter-spacing: 4px;
}

.drcw-eyebrow span {
  width: 25px;
  height: 1px;

  background: #f5a623;

  opacity: .7;
}


/* =====================================================
   MAIN HEADLINE
===================================================== */

.drcw-title {
  max-width: 900px;

  margin: 0 auto;

  text-align: center;

  color: #f7f7fa;

  font-size: clamp(38px, 5.4vw, 58px);

  line-height: 1.02;

  letter-spacing: -2.5px;

  font-weight: 900;
}

.drcw-orange {
  color: #ffad42;
}

.drcw-gradient {
  background: linear-gradient(
    90deg,
    #ffb13b 0%,
    #d69a9c 48%,
    #b38bd6 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* =====================================================
   INTRO
===================================================== */

.drcw-intro {
  max-width: 700px;

  margin: 25px auto 40px;

  text-align: center;

  color: #8f91a2;

  font-size: 18px;
  line-height: 1.6;

  font-weight: 500;
}


/* =====================================================
   CARDS GRID
===================================================== */

.drcw-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

  margin-top: 38px;
}


/* =====================================================
   CARD
===================================================== */

.drcw-card {
  position: relative;

  min-height: 235px;

padding: 44px 25px;

 background: linear-gradient( 145deg, rgb(255, 255, 255), rgb(255, 255, 255) );

  border: 1px solid #292a35;

  border-radius: 7px;

  /* overflow: hidden; */

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.drcw-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);
}


/* =====================================================
   LEFT CARD
===================================================== */

.drcw-card-wrong {
  border-color: #292a35;
}

.drcw-card-wrong:hover {
  border-color: rgba(248,113,113,.45);
}


/* =====================================================
   RIGHT CARD
===================================================== */

.drcw-card-right {
  border-color: rgba(45, 170, 165, .38);
}

.drcw-card-right:hover {
  border-color: rgba(45, 210, 195, .7);

  box-shadow:
    0 20px 55px rgba(0, 210, 190, .07);
}
.titels{
padding: 10px;
  background-color: #10b981;
  border-radius: 5px;
  margin-top: -65px;
}

/* =====================================================
   TAG
===================================================== */

.drcw-tag {
display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  margin-bottom: 21px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 2px;
}

.drcw-tag-wrong {
  color: #ff7777;

  background: rgba(239,68,68,.06);

  border: 1px solid rgba(248,113,113,.45);
}

.drcw-tag-right {
  color: #35e3d2;

  background: rgba(20,184,166,.055);

  border: 1px solid rgba(45,212,191,.4);
}


/* =====================================================
   CARD HEADING
===================================================== */

.drcw-card h3 {
  margin: 0 0 12px;

  color: #f5f5f7;

  font-size: 20px;

  line-height: 1.35;

  letter-spacing: -.3px;

  font-weight: 800;
}


/* =====================================================
   CARD TEXT
===================================================== */

.drcw-card p {
  margin: 0;

  color: #9698a9;

  font-size: 16px;

  line-height: 1.65;

  font-weight: 500;
}

.drcw-card p em {
  color: #b7b8c5;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 767px) {

  .drcw-section {
    padding: 65px 16px 70px;
  }

  .drcw-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .drcw-title {
    font-size: 38px;
    letter-spacing: -1.6px;
    line-height: 1.08;
  }

  .drcw-intro {
    font-size: 18px;
    margin-top: 22px;
  }

  .drcw-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .drcw-card {
    min-height: auto;
    padding: 25px;
  }

}


@media (max-width: 480px) {

  .drcw-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .drcw-title {
    font-size: 33px;
  }

  .drcw-intro {
    font-size: 18px;
    line-height: 1.65;
  }

  .drcw-card h3 {
    font-size: 19px;
  }

  .drcw-card p {
    font-size: 16px;
  }

}


/* =========================================================
   DIRECTORAI — SECTION 5
   UNIQUE CLASS PREFIX: dai5-
========================================================= */

.dai5-market-section {
    position: relative;
    width: 100%;
    padding: 85px 20px 95px;
    background: #ffffff;
    overflow: hidden;
}


/* Soft premium background */

.dai5-market-section::before {
    content: "";
    position: absolute;

    width: 480px;
    height: 480px;

    top: -300px;
    right: -180px;

    border-radius: 50%;

    background: rgba(45, 212, 191, 0.055);

    pointer-events: none;
}

.dai5-market-section::after {
    content: "";
    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -280px;
    left: -180px;

    border-radius: 50%;

    background: rgba(124, 58, 237, 0.045);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.dai5-market-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1080px;

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.dai5-market-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

.dai5-market-heading h2 {
    margin: 0;

    color: #080b12;

    font-size: clamp(36px, 5vw, 55px);
    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 900;
}

.dai5-market-heading h2 span {
    position: relative;
    display: inline-block;
    z-index: 1;
}


/* Green brush-style highlight */

.dai5-market-heading h2 span::after {
    content: "";

    position: absolute;

    left: -7px;
    right: -7px;
    bottom: 1px;

    height: 12px;

    background: #20d3aa;

    border-radius: 2px;

    transform: rotate(-1.5deg);

    z-index: -1;
}


/* Heading underline */

.dai5-heading-line {
    width: 100%;
    max-width: 620px;

    height: 1px;

    margin: 27px auto 0;

    background: #e7e7e7;
}


/* =========================================================
   SUB HEADLINE
========================================================= */

.dai5-market-subheading {
    max-width: 700px;

    margin: 40px auto 38px;

    text-align: center;

    color: #111827;

    font-size: 22px;
    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -.4px;
}


/* =========================================================
   MARKET GRID
========================================================= */

.dai5-market-grid {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 16px;

    max-width: 960px;

    margin: 0 auto;
}


/* =========================================================
   MARKET CARD
========================================================= */

.dai5-market-card {
    flex: 0 0 calc((100% - 32px) / 3);

    min-height: 96px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 17px 24px;

    background: #ffffff;

    border: 1px solid #cfd1d5;

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.025);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.dai5-market-card:hover {
    transform: translateY(-5px);

    border-color: #b7ddd3;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   IMAGE BOX
   FIXED SIZE
========================================================= */

.dai5-market-image {
    flex: 0 0 56px;

    width: 56px;
    height: 56px;

    min-width: 56px;
    min-height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #f7f7f9;

    border: 1px solid #ececf0;
}


/* Actual image */

.dai5-market-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    padding: 9px;
}


/* =========================================================
   CARD TEXT
========================================================= */

.dai5-market-text {
    color: #111827;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -.2px;
}


/* =========================================================
   BOTTOM TWO CARDS
========================================================= */

.dai5-market-card:nth-child(4),
.dai5-market-card:nth-child(5) {
    flex-basis: calc((100% - 16px) / 3);
}


/* =========================================================
   CLOSING TEXT
========================================================= */

.dai5-market-closing {
    max-width: 900px;

    margin: 42px auto 0;

    padding: 28px 35px;

    text-align: center;

    color: #4b5563;

    font-size: 18px;
    line-height: 1.75;

    font-weight: 500;

    background:
        linear-gradient(
            135deg,
            #fafffd,
            #ffffff,
            #faf8ff
        );

    border: 1px solid #e6e8eb;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.035);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .dai5-market-section {
        padding: 70px 20px 80px;
    }

    .dai5-market-card {
        flex-basis: calc((100% - 16px) / 2);
    }

    .dai5-market-card:nth-child(4),
    .dai5-market-card:nth-child(5) {
        flex-basis: calc((100% - 16px) / 2);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .dai5-market-section {
        padding: 60px 15px 70px;
    }

    .dai5-market-heading h2 {
        font-size: 35px;
        letter-spacing: -1.3px;
    }

    .dai5-market-heading h2 span::after {
        height: 9px;
        left: -4px;
        right: -4px;
    }

    .dai5-market-subheading {
        margin: 30px auto 28px;
        font-size: 19px;
    }

    .dai5-market-grid {
        gap: 12px;
    }

    .dai5-market-card,
    .dai5-market-card:nth-child(4),
    .dai5-market-card:nth-child(5) {
        flex-basis: 100%;
    }

    .dai5-market-card {
        min-height: 88px;
        padding: 14px 18px;
        border-radius: 17px;
    }

    .dai5-market-image {
        flex-basis: 56px;

        width: 56px;
        height: 56px;

        min-width: 56px;
        min-height: 56px;
    }

    .dai5-market-text {
        font-size: 16px;
    }

    .dai5-market-closing {
        margin-top: 30px;
        padding: 24px 20px;
        font-size: 18px;
    }

}
.dash1-card {
  position: relative;
  width: 100%;
  padding: 28px 28px 35px;

  border: 1px solid #e4e7ec;

  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.045);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  background-image: linear-gradient(-45deg,rgb(216, 220, 238) 0%, rgb(244, 247, 252)100%);
}




/* =========================================================
   DIRECTORAI — HOW IT WORKS
   UNIQUE PREFIX: dai7-
========================================================= */

.dai7-how-section {
    position: relative;
    width: 100%;
  padding: 95px 0px 0px 0;
    background: #ffffff;
    overflow: hidden;
}


/* Soft background decoration */

.dai7-how-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    right: -220px;

    border-radius: 50%;

    background: rgba(124, 58, 237, 0.045);

    pointer-events: none;
}

.dai7-how-section::after {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    bottom: -280px;
    left: -220px;

    border-radius: 50%;

    background: rgba(20, 184, 166, 0.035);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.dai7-how-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1160px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.dai7-how-header {
    max-width: 850px;

    margin: 0 auto 80px;

    text-align: center;
}

.dai7-how-tag {
    display: inline-flex;

    padding: 7px 15px;

    margin-bottom: 17px;

    color: #7c3aed;

    background: #faf5ff;

    border: 1px solid #e9d5ff;

    border-radius: 30px;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.dai7-how-header h2 {
    margin: 0;

    color: #111827;

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;
}

.dai7-how-header h2 span {
    background: linear-gradient(
        90deg,
        #7c3aed,
        #ec4899
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.dai7-how-header p {
    max-width: 760px;

    margin: 25px auto 0;

    color: #64748b;

    font-size: 18px;

    line-height: 1.7;

    font-weight: 500;
}

.dai7-how-header strong {
    color: #111827;
    font-weight: 800;
}


/* =========================================================
   STEP ROW
========================================================= */

.dai7-step-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 75px;

    min-height: 330px;
}
.dai7-step-number{
border: 1px dashed #7f3aeb;
  padding: 4px 30px;
  background: #efe5ff;
  display: inline-block;
  font-size: 20px;
}

/* =========================================================
   MEDIA / IMAGE AREA
========================================================= */




/* =========================================================
   DIRECTORAI — SECTION 8
   UNIQUE PREFIX: dai8-
========================================================= */

.dai8-affiliate-section {
    position: relative;
    width: 100%;
    padding: 95px 20px 105px;

    color: #ffffff;

    overflow: hidden;

  background: radial-gradient( circle at 50% -10%, rgba(124, 58, 237, 0.16), transparent 42% ), linear-gradient( 180deg, #0b0b11 0%, #0e0e15 100% );
}


/* =========================================================
   SUBTLE GRID BACKGROUND
========================================================= */

.dai8-affiliate-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image: linear-gradient(
        to bottom,
        transparent 5%,
        black 35%,
        black 85%,
        transparent 100%
    );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.dai8-affiliate-section .container {
    position: relative;
    z-index: 2;

    max-width: 1000px;
}


/* =========================================================
   EYEBROW
========================================================= */

.dai8-heading-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.dai8-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    color: #a78bfa;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.dai8-eyebrow::before,
.dai8-eyebrow::after {
    content: "";

    width: 28px;
    height: 1px;

    margin: 0 10px;

    background: #8b5cf6;

    opacity: .7;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.dai8-heading {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(38px, 5.2vw, 58px);

    line-height: 1.06;

    letter-spacing: -2.3px;

    font-weight: 900;
}

.dai8-heading span {
    position: relative;

    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #34d399,
            #5eead4
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   BODY
========================================================= */

.dai8-body-wrap {
    max-width: 780px;

    margin: 30px auto 0;

    text-align: center;
}

.dai8-body-wrap p {
    margin: 0;

    color: #a4a7b5;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 500;
}

.dai8-body-wrap em {
    color: #d8d9e1;
}


/* =========================================================
   SUB HEADLINE
========================================================= */

.dai8-subheading-wrap {
    max-width: 720px;

    margin: 58px auto 30px;

    text-align: center;
}

.dai8-subheading-wrap h3 {
    margin: 0;

    color: #f3f4f6;

    font-size: 25px;

    line-height: 1.35;

    letter-spacing: -.5px;

    font-weight: 800;
}


/* =========================================================
   CARD ROW
========================================================= */

.dai8-card-row {
    margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.dai8-market-card {
    position: relative;

    min-height: 104px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 18px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(25,25,34,.98),
            rgba(18,18,26,.98)
        );

    border: 1px solid #30313d;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.dai8-market-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background: rgba(124,58,237,.08);

    transition: transform .4s ease;
}

.dai8-market-card:hover {
    transform: translateY(-5px);

    border-color: #4b4d5b;

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);
}

.dai8-market-card:hover::after {
    transform: scale(1.4);
}


/* =========================================================
   ICON BOX
========================================================= */

.dai8-icon-box {
    position: relative;
    z-index: 2;

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 28px;

    font-weight: 700;

    border: 1px solid rgba(255,255,255,.08);
}

.dai8-icon-one {
    color: #fb7185;
    background: rgba(236,72,153,.13);
}

.dai8-icon-two {
    color: #a78bfa;
    background: rgba(139,92,246,.13);
}

.dai8-icon-three {
    color: #5eead4;
    background: rgba(20,184,166,.12);
}

.dai8-icon-four {
    color: #fbbf24;
    background: rgba(245,158,11,.12);
}


/* =========================================================
   CARD TITLE
========================================================= */

.dai8-card-title {
    position: relative;
    z-index: 2;

    color: #f8fafc;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: -.2px;
}


/* =========================================================
   CLOSING
========================================================= */

.dai8-closing {
    margin-top: 30px;

    text-align: center;

    color: #858897;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 500;
}

.dai8-closing strong {
    color: #c4b5fd;

    font-weight: 800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767px) {

    .dai8-affiliate-section {
        padding: 70px 16px 80px;
    }

    .dai8-heading {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .dai8-body-wrap p {
        font-size: 18px;
    }

    .dai8-subheading-wrap {
        margin-top: 45px;
    }

    .dai8-subheading-wrap h3 {
        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .dai8-affiliate-section {
        padding: 60px 14px 70px;
    }

    .dai8-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .dai8-eyebrow::before,
    .dai8-eyebrow::after {
        width: 18px;
        margin: 0 7px;
    }

    .dai8-heading {
        font-size: 34px;
        line-height: 1.1;
        letter-spacing: -1.2px;
    }

    .dai8-body-wrap {
        margin-top: 23px;
    }

    .dai8-body-wrap p {
        font-size: 18px;
        line-height: 1.7;
    }

    .dai8-subheading-wrap {
        margin: 40px auto 25px;
    }

    .dai8-subheading-wrap h3 {
        font-size: 20px;
    }

    .dai8-market-card {
        min-height: 90px;
        padding: 15px 18px;
        border-radius: 16px;
    }

    .dai8-icon-box {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        font-size: 24px;
    }

    .dai8-card-title {
        font-size: 17px;
    }

}


.textbg7 {
  background-color: rgb(255, 228, 0);
  display: inline-block;
  border-radius: 50px;
  padding: 0.4% 3.3% 0% 3.3%;
}







/* =========================================================
   SECTION 12 — UNIQUE STYLES
   ========================================================= */

.dai12-section {
   position: relative;
   width: 100%;
   padding: 95px 20px 100px;
   overflow: hidden;
  background: radial-gradient(circle at 15% 15%, rgba(112, 78, 255, 0.14), transparent 32%), radial-gradient(circle at 85% 75%, rgb(9, 11, 18), transparent 30%), #090b12;
   color: #ffffff;
}

.dai12-section::before {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   top: -280px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(117, 82, 255, 0.08);
   filter: blur(100px);
   border-radius: 50%;
   pointer-events: none;
}

.dai12-container {
   position: relative;
   z-index: 2;
   max-width: 1100px;
   margin: 0 auto;
}


/* ================= HEADING ================= */

.dai12-heading-wrap {
   text-align: center;
   margin-bottom: 48px;
}

.dai12-kicker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 17px;
   border: 1px solid rgba(255,255,255,0.12);
   border-radius: 100px;
   background: rgba(255,255,255,0.045);
   color: #a99cff;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 1.8px;
   text-transform: uppercase;
   margin-bottom: 20px;
}

.dai12-headline {
   margin: 0;
   font-size: 48px;
   line-height: 1.15;
   font-weight: 900;
   letter-spacing: -1.4px;
   color: #ffffff;
}

.dai12-headline span {
   background: linear-gradient(90deg, #a99cff, #73b7ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.dai12-subheadline {
   margin-top: 18px;
   font-size: 20px;
   line-height: 1.5;
   font-weight: 500;
   color: rgba(255,255,255,0.68);
}


/* ================= FEATURE GRID ================= */

/* .dai12-features {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
   max-width: 980px;
   margin: 0 auto;
} */


/* ================= FEATURE CARD ================= */

.dai12-feature {
   position: relative;
   display: flex;
   align-items: center;
   gap: 18px;

  min-height: 70px;
  padding: 10px 22px;
   border: 1px solid rgba(255,255,255,0.09);
   border-radius: 16px;
   background: linear-gradient(
      145deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
   );
   box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.035),
      0 15px 40px rgba(0,0,0,0.16);
   transition:
      transform 0.3s ease,
      border-color 0.3s ease,
      background 0.3s ease,
      box-shadow 0.3s ease;
      margin-top: 10px;
}

.dai12-feature:hover {
   transform: translateY(-4px);
   border-color: rgba(151,132,255,0.42);
   background: linear-gradient(
      145deg,
      rgba(151,132,255,0.10),
      rgba(255,255,255,0.025)
   );
   box-shadow:
      0 18px 45px rgba(0,0,0,0.28),
      0 0 30px rgba(117,82,255,0.08);
}


/* ================= ICON ================= */

.dai12-icon {
   flex: 0 0 46px;
   width: 46px;
   height: 46px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 13px;
   background: linear-gradient(
      145deg,
      rgba(137,112,255,0.20),
      rgba(78,157,255,0.10)
   );
   border: 1px solid rgba(157,140,255,0.22);
   box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 8px 20px rgba(0,0,0,0.18);
}

.dai12-icon span {
   font-size: 21px;
   line-height: 1;
   color: #a99cff;
   text-shadow: 0 0 16px rgba(169,156,255,0.45);
}


/* ================= TEXT ================= */

.dai12-feature-text {
   font-size: 18px;
   line-height: 1.5;
   font-weight: 600;
   color: rgba(255,255,255,0.91);
}


/* ================= CLOSING ================= */

.dai12-closing {
   max-width: 850px;
   margin: 48px auto 0;
   padding: 27px 32px;
   text-align: center;
   font-size: 18px;
   line-height: 1.65;
   font-weight: 500;
   color: rgba(255,255,255,0.78);
   border-top: 1px solid rgba(255,255,255,0.08);
   border-bottom: 1px solid rgba(255,255,255,0.08);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 767px) {

   .dai12-section {
      padding: 70px 16px 75px;
   }

   .dai12-heading-wrap {
      margin-bottom: 34px;
   }

   .dai12-kicker {
      font-size: 11px;
      letter-spacing: 1.3px;
      padding: 7px 13px;
   }

   .dai12-headline {
      font-size: 34px;
      letter-spacing: -0.8px;
   }

   .dai12-subheadline {
      font-size: 18px;
      margin-top: 14px;
   }

   .dai12-features {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .dai12-feature {
      min-height: 72px;
      padding: 14px 16px;
      gap: 14px;
      border-radius: 14px;
   }

   .dai12-icon {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      border-radius: 11px;
   }

   .dai12-icon span {
      font-size: 18px;
   }

   .dai12-feature-text {
      font-size: 18px;
      line-height: 1.45;
   }

   .dai12-closing {
      margin-top: 35px;
      padding: 23px 10px;
      font-size: 18px;
      line-height: 1.6;
   }

}




/* =========================================================
   DIRECTORAI FUNNEL — UNIQUE CSS
   Prefix: dai13f-
========================================================= */

.dai13f-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0 100px;
background: radial-gradient( circle at 8% 18%, rgb(11, 16, 27), #090b12 25% ), radial-gradient( circle at 92% 25%, rgb(9, 11, 18), #0c111d 27% ), radial-gradient( circle at 50% 100%, rgb(12, 18, 30), #0c111c 35% ), #090b12;
  color: #fff;
}

.dai13f-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.dai13f-orb-one {
  width: 320px;
  height: 320px;
  left: -180px;
  top: 260px;
  background: rgba(255, 92, 112, .08);
}

.dai13f-orb-two {
  width: 360px;
  height: 360px;
  right: -200px;
  bottom: 100px;
  background: rgba(183, 53, 255, .09);
}


/* =========================================================
   HEADER
========================================================= */

.dai13f-header {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 65px;
}

.dai13f-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 123, 101, .35);
  border-radius: 100px;
  background: rgba(255, 255, 255, .035);
  color: #ff947e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow:
    0 8px 30px rgba(255, 92, 92, .07);
}

.dai13f-kicker-icon {
  font-size: 17px;
}

.dai13f-heading {
  margin: 23px 0 0;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -3px;
  font-weight: 950;
}

.dai13f-heading span {
  background:
    linear-gradient(
      90deg,
      #ffad27 0%,
      #ff7d5e 45%,
      #d13cff 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dai13f-intro {
  max-width: 690px;
  margin: 22px auto 0;
  color: #b9b5c3;
  font-size: 18px;
  line-height: 1.65;
}

.dai13f-warning {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 166, 106, .24);
  border-radius: 13px;
  background: rgba(255, 154, 83, .045);
  color: #9995a4;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

.dai13f-warning strong {
  color: #ffb18a;
}

.dai13f-warning-symbol {
  font-size: 15px;
}



/* =========================================================
   DIRECTORAI FUNNEL — UNIQUE CSS
   Prefix: dai13f-
========================================================= */

.dai13f-section {
position: relative;
  overflow: hidden;
  padding: 0px 0 100px;
  background: radial-gradient( circle at 8% 18%, rgba(255, 93, 132, .10), transparent 25% ), radial-gradient( circle at 92% 25%, rgba(183, 48, 255, .12), transparent 27% ), radial-gradient( circle at 50% 100%, rgba(82, 71, 255, .10), transparent 35% ), #0d0c15;
  color: #fff;
background: radial-gradient(circle at 15% 15%, rgb(20, 11, 28), #140b1c 32%), radial-gradient(circle at 85% 75%, rgb(9, 11, 18), transparent 30%), #090b12;
}

.dai13f-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}

.dai13f-orb-one {
  width: 320px;
  height: 320px;
  left: -180px;
  top: 260px;
  background: rgba(255, 92, 112, .08);
}

.dai13f-orb-two {
  width: 360px;
  height: 360px;
  right: -200px;
  bottom: 100px;
  background: rgba(183, 53, 255, .09);
}


/* =========================================================
   HEADER
========================================================= */

.dai13f-header {
position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0px auto 70px;
}

.dai13f-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 123, 101, .35);
  border-radius: 100px;
  background: rgba(255, 255, 255, .035);
  color: #ff947e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow:
    0 8px 30px rgba(255, 92, 92, .07);
}

.dai13f-kicker-icon {
  font-size: 17px;
}

.dai13f-heading {
  margin: 23px 0 0;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -3px;
  font-weight: 950;
}

.dai13f-heading span {
  background:
    linear-gradient(
      90deg,
      #ffad27 0%,
      #ff7d5e 45%,
      #d13cff 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dai13f-intro {
  max-width: 990px;
  margin: 22px auto 0;
  color: #b9b5c3;
  font-size: 18px;
  line-height: 1.65;
}

.dai13f-warning {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 13px 18px;
border: 1px solid rgba(167, 106, 255, 0.24);
  border-radius: 13px;
  background: rgba(137, 83, 255, 0.04);
color: #fff;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}

.dai13f-warning strong {
  color: #ffb18a;
}

.dai13f-warning-symbol {
  font-size: 15px;
}


/* =========================================================
   FUNNEL
========================================================= */

.dai13f-funnel {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: auto;
}


/* =========================================================
   UNIVERSAL CARD
========================================================= */

.dai13f-main-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.018)
    ),
    rgba(8, 8, 13, .80);
  box-shadow:
    0 25px 65px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.dai13f-main-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
background: linear-gradient( 90deg, #6500ff, #8e50ff, #fb75ff );
    
}

.dai13f-main-card:hover {
  transform: translateY(-7px);
  border-color: rgba(226, 84, 255, .42);
  box-shadow:
    0 30px 75px rgba(0,0,0,.45),
    0 0 45px rgba(191, 50, 255, .09),
    inset 0 1px 0 rgba(255,255,255,.07);
 
}

.dai13f-card-glow {
  position: absolute;
  width: 170px;
  height: 170px;
  top: -100px;
  right: -80px;
  border-radius: 50%;
  background: rgba(213, 48, 255, .10);
  filter: blur(35px);
  pointer-events: none;
}


/* =========================================================
   TOP LINE
========================================================= */

.dai13f-top-line {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dai13f-label {
display: inline-flex;
  padding: 6px 11px;
  border: 1px solid rgba(255, 125, 105, .28);
  border-radius: 50px;
  background: rgba(255, 110, 90, .06);
  color: #ff947f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.dai13f-label-hot {
  background:
    linear-gradient(
      90deg,
      rgba(255, 120, 91, .13),
      rgba(214, 54, 255, .09)
    );
}

.dai13f-step {
color: #ffc83d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
}


/* =========================================================
   FRONT CARD
========================================================= */

.dai13f-front-card {
padding: 27px;
  min-height: 362px;
}

.dai13f-icon-box {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 133, 109, .18),
      rgba(205, 49, 255, .14)
    );
  border: 1px solid rgba(255, 139, 121, .14);
  color: #ff967d;
  font-size: 25px;
  box-shadow:
    0 10px 30px rgba(221, 66, 255, .12);
}

.dai13f-product-title {
  position: relative;
  z-index: 2;
  margin: 17px 0 0;
  font-size: 27px;
  font-weight: 900;
}

.dai13f-price {
  position: relative;
  z-index: 2;
  margin-top: 7px;
  font-size: 53px;
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 950;
background-image: linear-gradient(-45deg,rgb(113, 129, 255) 0%, rgb(151, 65, 255)100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dai13f-confirm {
position: relative;
  z-index: 2;
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.dai13f-line {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 19px 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.02)
    );
}

.dai13f-description {
position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.7;
  font-family: "Inter", sans-serif;
}

.dai13f-includes {
position: relative;
  z-index: 2;
  margin-top: 14px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.dai13f-includes strong {
color: #934fff;
}


/* =========================================================
   FASTPASS
========================================================= */

.dai13f-fastpass-card {
min-height: 362px;
  padding: 27px;
}

.dai13f-fast-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.dai13f-fast-icon {
  margin-top: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 163, 58, .15),
      rgba(209, 49, 255, .14)
    );
}

.dai13f-fastpass-card .dai13f-product-title {
  margin-top: 13px;
}

.dai13f-fast-price-wrap {
  text-align: right;
}

.dai13f-fast-price-wrap .dai13f-price {
  font-size: 48px;
}


/* =========================================================
   FLOW ARROW
========================================================= */

.dai13f-flow-arrow {
  position: relative;
  width: 42px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dai13f-flow-arrow span {
  position: absolute;
  left: 0;
  right: 5px;
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.65) 0 6px,
      transparent 6px 11px
    );
}

.dai13f-flow-arrow b {
  position: relative;
  z-index: 2;
  padding-left: 13px;
  color: #fff;
  background: #0d0c15;
  font-size: 22px;
  font-weight: 300;
}


/* =========================================================
   STAGE HEADING
========================================================= */

.dai13f-stage-heading {
  margin: 63px 0 27px;
}

.dai13f-stage-heading span {
  color: #ff887b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
}

.dai13f-stage-heading h3 {
  margin: 9px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
}


/* =========================================================
   OTO CARDS
========================================================= */

.dai13f-oto-card {
  min-height: 300px;
  padding: 24px;
}

.dai13f-oto-number {
color: #ff8c7d;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border: 1px solid rgba(255, 140, 125, 0.36);
  border-radius: 50px;
  background: rgba(255, 110, 90, .06);
  padding: 2px 11px;
}

.dai13f-mini-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(208, 50, 255, .08);
  border: 1px solid rgba(209, 50, 255, .14);
  color: #d66aff;
  font-size: 10px;
  font-weight: 900;
}

.dai13f-oto-title {
  position: relative;
  z-index: 2;
  min-height: 51px;
  margin: 25px 0 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 850;
}

.dai13f-oto-price {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.5px;
  font-weight: 950;
background-image: linear-gradient(-45deg,rgb(113, 129, 255) 0%, rgb(151, 65, 255)100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================
   CONNECTORS
========================================================= */

.dai13f-down-flow {
  position: relative;
  height: 48px;
  justify-content: center;
  align-items: center;
}

.dai13f-dashed-line {
  width: 1px;
  height: 100%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.5) 0 6px,
      transparent 6px 12px
    );
}

.dai13f-down-arrow {
  position: absolute;
  bottom: -3px;
  padding: 0 7px;
  background: #0d0c15;
  color: #fff;
  font-size: 21px;
}

.dai13f-middle-connector {
  height: 52px;
  position: relative;
  align-items: center;
  justify-content: center;
}

.dai13f-middle-line {
  height: 100%;
  width: 1px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.48) 0 6px,
      transparent 6px 12px
    );
}

.dai13f-middle-arrow {
  position: absolute;
  bottom: -2px;
  padding: 0 7px;
  background: #0d0c15;
  color: #fff;
}


/* =========================================================
   BUNDLE CARD
========================================================= */

.dai13f-bundle-card {
  border-color: rgba(230, 70, 255, .40);
  background:
    linear-gradient(
      145deg,
      rgba(220, 54, 255, .09),
      rgba(255,255,255,.025)
    ),
    rgba(8, 8, 13, .84);
    padding: 24px;
}

.dai13f-bundle-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 13px;
  border-bottom-left-radius: 11px;
  background:
    linear-gradient(
      90deg,
      #ff805f,
      #d43aff
    );
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}

.dai13f-bundle-icon {
  background:
    linear-gradient(
      135deg,
      rgba(255, 159, 71, .18),
      rgba(205, 51, 255, .18)
    );
  color: #ffb16d;
}


/* =========================================================
   FINAL FUNNEL CARD
========================================================= */

.dai13f-final-wrap {
  position: relative;
  margin-top: 60px;
}

.dai13f-final-line {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.45) 0 6px,
      transparent 6px 12px
    );
}

.dai13f-final-card {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 16px 24px;
  border: 1px solid rgba(219, 70, 255, .30);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  box-shadow:
    0 15px 45px rgba(0,0,0,.25);
}

.dai13f-final-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      #ff886e,
      #c834ff
    );
  box-shadow:
    0 8px 25px rgba(204, 51, 255, .20);
  font-size: 18px;
  font-weight: 900;
}

.dai13f-final-text {
  text-align: left;
}

.dai13f-final-text strong {
  display: block;
  color: #fff;
  font-size: 16px;
}

.dai13f-final-text span {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 14px;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.dai13f-bottom-message {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 850px;
  margin: 55px auto 0;
  padding: 19px 23px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.dai13f-bottom-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(212, 52, 255, .10);
  color: #e66aff;
}

.dai13f-bottom-message strong {
 display: block;
  color: #fff;
  font-size: 18px;
}

.dai13f-bottom-message span {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .dai13f-section {
    padding: 80px 0;
  }

  .dai13f-header {
    margin-bottom: 48px;
  }

  .dai13f-front-row {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .dai13f-front-card {
    min-height: auto;
  }

  .dai13f-fastpass-card {
    margin-top: 25px;
    min-height: auto;
  }

  .dai13f-stage-heading {
    margin-top: 50px;
  }

  .dai13f-oto-card {
    min-height: 285px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .dai13f-section {
    padding: 65px 0 70px;
  }

  .dai13f-header {
    padding: 0 10px;
    margin-bottom: 40px;
  }

  .dai13f-heading {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .dai13f-intro {
    font-size: 14px;
    line-height: 1.6;
  }

  .dai13f-warning {
    width: 100%;
    font-size: 10px;
  }

  .dai13f-front-card,
  .dai13f-fastpass-card,
  .dai13f-oto-card {
    padding: 21px;
    border-radius: 17px;
  }

  .dai13f-price {
    font-size: 47px;
  }

  .dai13f-fast-content {
    display: block;
  }

  .dai13f-fast-price-wrap {
    margin-top: 18px;
    text-align: left;
  }

  .dai13f-fast-price-wrap .dai13f-price {
    font-size: 45px;
  }

  .dai13f-oto-title {
    min-height: auto;
    font-size: 18px;
  }

  .dai13f-oto-price {
    font-size: 37px;
  }

  .dai13f-final-card {
    width: 100%;
    justify-content: center;
    padding: 15px;
  }

  .dai13f-bottom-message {
    margin-left: 10px;
    margin-right: 10px;
    align-items: flex-start;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .dai13f-heading {
    font-size: 38px;
  }

  .dai13f-product-title {
    font-size: 24px;
  }

  .dai13f-price {
    font-size: 43px;
  }

  .dai13f-final-text span {
    font-size: 9px;
  }

}



/* =========================================================
   SECTION 14
   ULTRA PREMIUM WHITE THEME
   UNIQUE PREFIX: dai14c-
========================================================= */

.dai14c-section {

  position: relative;

  overflow: hidden;

padding: 105px 0 200px 0px;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(139,69,245,.055),
      transparent 27%
    ),
    radial-gradient(
      circle at 94% 72%,
      rgba(113,140,255,.065),
      transparent 30%
    ),
    #ffffff;

  color: #17151d;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.dai14c-bg-glow {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(90px);

}

.dai14c-bg-glow-1 {

  width: 360px;
  height: 360px;

  left: -180px;
  top: 180px;

  background: rgba(139,69,245,.055);

}

.dai14c-bg-glow-2 {

  width: 400px;
  height: 400px;

  right: -200px;
  bottom: 80px;

  background: rgba(113,140,255,.065);

}


.dai14c-bg-orb {

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(119,93,247,.08);

  pointer-events: none;

}

.dai14c-bg-orb-1 {

  width: 180px;
  height: 180px;

  left: 3%;

  top: 8%;

}

.dai14c-bg-orb-2 {

  width: 240px;
  height: 240px;

  right: 3%;

  bottom: 5%;

}



/* =========================================================
   HEADER
========================================================= */

.dai14c-header {

  position: relative;

  z-index: 2;

  max-width: 950px;

  margin: 0 auto 65px;

}


.dai14c-kicker {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 9px 18px;

  border: 1px solid rgba(119,93,247,.20);

  border-radius: 100px;

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.045),
      rgba(113,140,255,.055)
    );

  color: #7654ed;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.8px;

  box-shadow:
    0 8px 28px rgba(82,65,160,.055);

}


.dai14c-kicker-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #8b45f5,
      #718cff
    );

  box-shadow:
    0 0 0 4px rgba(119,93,247,.08);

}



/* =========================================================
   MAIN HEADING
========================================================= */

.dai14c-heading {

  margin: 23px 0 0;

  color: #111117;

  font-size: clamp(43px, 5.8vw, 70px);

  line-height: 1.05;

  letter-spacing: -3px;

  font-weight: 950;

}


.dai14c-heading span {

  display: inline;

  background:
    linear-gradient(
      90deg,
      #8b45f5 0%,
      #775df7 50%,
      #718cff 100%
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}


.dai14c-intro {

  max-width: 680px;

  margin: 22px auto 0;

  color: #68656f;

  font-size: 17px;

  line-height: 1.7;

}



/* =========================================================
   MAIN CONTEST LAYOUT
========================================================= */

.dai14c-contest-layout {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: .92fr 1.08fr;

  gap: 28px;

  max-width: 1120px;

  margin: 0 auto;

}



/* =========================================================
   LEFT FEATURE PANEL
========================================================= */

.dai14c-left-panel {

  position: relative;

  min-height: 545px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 38px 35px;

  overflow: hidden;

  border: 1px solid #ebe8f1;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfaff
    );

  box-shadow:
    0 25px 70px rgba(37,29,65,.075),
    inset 0 1px 0 #ffffff;

}


.dai14c-panel-accent {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #8b45f5,
      #775df7,
      #718cff
    );

}



/* =========================================================
   TROPHY AREA
========================================================= */

.dai14c-trophy-wrap {

  position: relative;

  width: 100%;

  /* height: 245px; */

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 13px;

}


.dai14c-trophy-glow {

  position: absolute;

  width: 210px;

  height: 210px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(119,93,247,.16),
      rgba(113,140,255,.06) 45%,
      transparent 70%
    );

  filter: blur(10px);

}


.dai14c-trophy-image {

  position: relative;

  z-index: 2;

width: 260px;
  height: 225px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 20px rgba(79,61,165,.15)
    );

  animation:
    dai14c-trophy-float 4s ease-in-out infinite;

}


@keyframes dai14c-trophy-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}



/* =========================================================
   PHASE BADGE
========================================================= */

.dai14c-phase-badge {

  display: inline-flex;

  align-items: center;

  padding: 7px 16px;

  border: 1px solid rgba(119,93,247,.24);

  border-radius: 100px;

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.045),
      rgba(113,140,255,.055)
    );

  color: #7654ed;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.8px;

}



/* =========================================================
   CONTEST TITLE
========================================================= */

.dai14c-contest-title {

  margin: 18px 0 0;

  color: #17151c;

  font-size: 29px;

  line-height: 1.2;

  font-weight: 900;

  text-align: center;

  letter-spacing: -.7px;

}



/* =========================================================
   PRIZE SUMMARY
========================================================= */

.dai14c-prize-summary {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 7px;

  margin-top: 16px;

  color: #6d6974;

  font-size: 11px;

  text-align: center;

}


.dai14c-prize-summary strong {

  color: #7654ed;

  font-weight: 900;

}


.dai14c-separator {

  color: #bbb7c3;

}



/* =========================================================
   LEFT BOTTOM LABEL
========================================================= */

.dai14c-left-bottom {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  width: 100%;

  margin-top: 25px;

  color: #b0acb8;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.7px;

}


.dai14c-left-bottom-line {

  width: 28px;

  height: 1px;

  background: #dedbe4;

}



/* =========================================================
   RIGHT PANEL
========================================================= */

.dai14c-right-panel {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 18px;

}



/* =========================================================
   INFO CARDS
========================================================= */

.dai14c-info-card {

  position: relative;

  min-height: 160px;

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 25px 27px;

  overflow: hidden;

  border: 1px solid #ebe8f1;

  border-radius: 22px;

  background: #ffffff;

  box-shadow:
    0 15px 45px rgba(37,29,65,.055);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.dai14c-info-card::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      #8b45f5,
      #718cff
    );

}


.dai14c-info-card:hover {

  transform: translateY(-5px);

  border-color: rgba(119,93,247,.22);

  box-shadow:
    0 24px 55px rgba(37,29,65,.09);

}



/* =========================================================
   CARD NUMBER
========================================================= */

.dai14c-card-number {

  position: absolute;

  top: 13px;

  right: 17px;

  color: #d0ccd7;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1px;

}



/* =========================================================
   CARD ICON
========================================================= */

.dai14c-card-icon {

  flex: 0 0 58px;

  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.08),
      rgba(113,140,255,.10)
    );

  border: 1px solid rgba(119,93,247,.12);

  color: #7654ed;

  font-size: 23px;

  box-shadow:
    0 10px 25px rgba(91,69,181,.07);

}


.dai14c-speed-icon {

  background:
    linear-gradient(
      135deg,
      rgba(113,140,255,.09),
      rgba(139,69,245,.08)
    );

}


.dai14c-closing-icon {

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.08),
      rgba(113,140,255,.09)
    );

}



/* =========================================================
   CARD CONTENT
========================================================= */

.dai14c-card-content {

  flex: 1;

}


.dai14c-card-label {

  display: block;

  margin-bottom: 7px;

  color: #7654ed;

 font-size: 14px;

  font-weight: 900;

  letter-spacing: 1.6px;

}


.dai14c-card-content h3 {

  margin: 0;

  color: #28252e;

 font-size: 18px;

  line-height: 1.45;

  font-weight: 800;

}



/* =========================================================
   CARD ARROW
========================================================= */

.dai14c-card-arrow {

  width: 34px;

  height: 34px;

  flex: 0 0 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #faf9fd;

  border: 1px solid #ebe8f2;

  color: #7654ed;

  font-size: 15px;

  transition:
    transform .3s ease,
    background .3s ease;

}


.dai14c-info-card:hover .dai14c-card-arrow {

  transform: translateX(4px);

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.08),
      rgba(113,140,255,.10)
    );

}



/* =========================================================
   PRIZE SECTION HEADING
========================================================= */

.dai14c-prize-heading {

  max-width: 1120px;

  margin: 48px auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

}


.dai14c-prize-heading-line {

  height: 1px;

  flex: 1;

  max-width: 170px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ddd9e6
    );

}


.dai14c-prize-heading-line:last-child {

  background:
    linear-gradient(
      90deg,
      #ddd9e6,
      transparent
    );

}


.dai14c-prize-heading-text {

color: #835bf8;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.9px;

}



/* =========================================================
   PRIZE GRID
========================================================= */

.dai14c-prize-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 17px;

  max-width: 1120px;

  margin: 0 auto;

}



/* =========================================================
   PRIZE CARD
========================================================= */

.dai14c-prize-card {

  position: relative;

  min-height: 225px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 25px 18px;

  overflow: hidden;

  border: 1px solid #ebe8f1;

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fcfbff
    );

  box-shadow:
    0 15px 45px rgba(37,29,65,.055);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.dai14c-prize-card:hover {

  transform: translateY(-6px);

  border-color: rgba(119,93,247,.20);

  box-shadow:
    0 25px 55px rgba(37,29,65,.09);

}



/* =========================================================
   FIRST PLACE
========================================================= */

.dai14c-first-place {

  border-color: rgba(119,93,247,.25);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #faf8ff
    );

  box-shadow:
    0 18px 50px rgba(91,69,181,.09);

}


.dai14c-first-place::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #8b45f5,
      #775df7,
      #718cff
    );

}



/* =========================================================
   RANK
========================================================= */

.dai14c-rank {

position: absolute;
  top: 14px;
  right: 16px;
  color: #c1bdc9;
  font-size: 0;
  font-weight: 900;
  letter-spacing: 1px;
}



/* =========================================================
   MEDAL
========================================================= */

.dai14c-medal {

  font-size: 45px;

  line-height: 1;

  margin-bottom: 12px;

  filter:
    drop-shadow(
      0 8px 9px rgba(70,50,140,.12)
    );

}



/* =========================================================
   PLACE
========================================================= */

.dai14c-place {

  color: #7654ed;

font-size: 18px;

  font-weight: 900;

  letter-spacing: 1.3px;

  text-transform: uppercase;

}



/* =========================================================
   MONEY
========================================================= */

.dai14c-money {

  margin-top: 7px;

  color: #19171d;

  font-size: 28px;

  line-height: 1;

  font-weight: 950;

  letter-spacing: -.7px;

}


.dai14c-first-place .dai14c-money {

  background:
    linear-gradient(
      90deg,
      #8b45f5,
      #718cff
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}



/* =========================================================
   RULES BOX
========================================================= */

.dai14c-rules-box {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-start;

  gap: 16px;

  max-width: 1120px;

  margin: 28px auto 0;

  padding: 23px 25px;

  border: 1px solid #e8e5ee;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfaff
    );

  box-shadow:
    0 14px 40px rgba(37,29,65,.045);

}


.dai14c-rules-icon {

  width: 39px;

  height: 39px;

  flex: 0 0 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(139,69,245,.09),
      rgba(113,140,255,.11)
    );

  color: #7654ed;

  font-size: 17px;

  font-weight: 900;

}


.dai14c-rules-content {

  flex: 1;

}


.dai14c-rules-label {

  display: block;

  margin-bottom: 6px;

  color: #7654ed;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.7px;

}


.dai14c-rules-content p {
margin: 0;
  color: #000;
  font-size: 18px;
  line-height: 1.7;

}


.dai14c-rules-content strong {

  color: #302c35;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .dai14c-section {

    padding: 80px 0 85px;

  }


  .dai14c-contest-layout {

    grid-template-columns: 1fr;

    max-width: 700px;

  }


  .dai14c-left-panel {

    min-height: 500px;

  }


  .dai14c-prize-grid {

    max-width: 700px;

    grid-template-columns:
      repeat(2, 1fr);

  }


  .dai14c-prize-heading {

    max-width: 700px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .dai14c-section {

    padding: 65px 0 70px;

  }


  .dai14c-header {

    margin-bottom: 42px;

  }


  .dai14c-kicker {

    font-size: 8px;

    padding: 8px 13px;

    letter-spacing: 1.2px;

  }


  .dai14c-heading {

    font-size: 40px;

    line-height: 1.08;

    letter-spacing: -1.8px;

  }


  .dai14c-heading span {

    display: block;

    margin-top: 5px;

  }


  .dai14c-intro {

    font-size: 14px;

    line-height: 1.65;

  }


  .dai14c-left-panel {

    min-height: auto;

    padding: 30px 20px;

    border-radius: 21px;

  }


  .dai14c-trophy-wrap {

    width: 220px;

    height: 205px;

  }


  .dai14c-trophy-image {

    width: 190px;

    height: 190px;

  }


  .dai14c-contest-title {

    font-size: 24px;

  }


  .dai14c-prize-summary {

    font-size: 10px;

    line-height: 1.8;

  }


  .dai14c-left-bottom {

    margin-top: 20px;

  }


  .dai14c-info-card {

    min-height: 135px;

    padding: 20px;

    gap: 14px;

    border-radius: 18px;

  }


  .dai14c-card-number {

    top: 10px;

    right: 12px;

  }


  .dai14c-card-icon {

    width: 48px;

    height: 48px;

    flex-basis: 48px;

    font-size: 19px;

    border-radius: 14px;

  }


  .dai14c-card-content h3 {

    font-size: 14px;

    line-height: 1.4;

  }


  .dai14c-card-arrow {

    display: none;

  }


  .dai14c-prize-heading {

    margin-top: 40px;

    gap: 9px;

  }


  .dai14c-prize-heading-text {

    font-size: 7px;

    letter-spacing: 1.2px;

    white-space: nowrap;

  }


  .dai14c-prize-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap: 12px;

  }


  .dai14c-prize-card {

    min-height: 190px;

    border-radius: 17px;

  }


  .dai14c-medal {

    font-size: 38px;

  }


  .dai14c-money {

    font-size: 23px;

  }


  .dai14c-rules-box {

    padding: 18px;

    gap: 12px;

  }


  .dai14c-rules-content p {

    font-size: 10px;

    line-height: 1.65;

  }

}



/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 380px) {

  .dai14c-heading {

    font-size: 36px;

  }


  .dai14c-prize-grid {

    grid-template-columns: 1fr;

  }


  .dai14c-prize-card {

    min-height: 175px;

  }


  .dai14c-prize-heading-line {

    max-width: 50px;

  }

}

.promo-date-title {
  background-color: rgb(254, 213, 0);
  border-radius: 0px 0px 15px 15px;
  padding: 10px 30px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}






/* =========================================================
   MAIN SECTION
========================================================= */

.dai20p-section {
  position: relative;
  width: 100%;
  padding: 80px 20px 90px;
  overflow: hidden;

background: radial-gradient( circle at 50% -10%, rgba(124, 58, 237, 0.16), transparent 42% ), linear-gradient( 180deg, #0b0b11 0%, #0e0e15 100% );



  color: #ffffff;
}
.dai20p-section::before {
content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient( rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px );
  background-size: 48px 48px;
  mask-image: linear-gradient( to bottom, transparent 5%, black 35%, black 85%, transparent 100% );
  pointer-events: none;
}

/* =========================================================
   BACKGROUND GLOW
========================================================= */

.dai20p-bg-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .12;
}

.dai20p-glow-left {
  left: -250px;
  top: 20%;
 background: #904dff;
}

.dai20p-glow-right {
  right: -250px;
  bottom: 5%;
background: #764fff;
}


/* =========================================================
   DECORATIVE STROKES
========================================================= */

.dai20p-stroke {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.dai20p-stroke-left {
  left: -25px;
  top: 210px;
  width: 285px;
  transform: rotate(-5deg);
  opacity: .9;
}

.dai20p-stroke-right {
  right: -15px;
  top: 35px;
  width: 185px;
  transform: rotate(7deg);
  opacity: .95;
}


/* =========================================================
   HEADING
========================================================= */

.dai20p-heading-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.dai20p-kicker {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 17px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50px;

  background: rgba(255,255,255,.045);

  color: #b9c4bd;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.dai20p-heading {
  margin: 0;

  color: #ffffff;

  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -2px;
}

.dai20p-heading span {
  background:
    linear-gradient(
      90deg,
      #18e7b0,
      #65dcb8
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================
   PROFILE GRID
========================================================= */

.dai20p-profile-grid {
  position: relative;
  z-index: 2;

  max-width: 800px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(0, minmax(0, 1fr));

  gap: 60px;
}


/* =========================================================
   PROFILE CARD
========================================================= */

.dai20p-profile-card {
  position: relative;

  min-height: 475px;

  padding: 49px 66px 46px;

  border-radius: 29px;

  background:
    linear-gradient(
      135deg,
      rgba(68, 72, 63, .92),
      rgba(40, 65, 62, .90)
    );

border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 25px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  background: radial-gradient( circle at 50% -10%, rgba(124, 58, 237, 0.16), transparent 42% ), linear-gradient( 180deg, #0b0b11 0%, #0e0e15 100% );
  box-shadow: 0 35px 85px rgba(36, 173, 255, 0.12), 0 0 35px rgba(255, 128, 247, 0.06);
}


/* Card inner green tint */

.dai20p-profile-card::before {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  right: -110px;
  top: -100px;

  border-radius: 50%;

  background: rgba(0, 210, 177, .10);

  filter: blur(30px);

  pointer-events: none;
}


/* Bottom tint */

.dai20p-profile-card::after {
 content: "";
  position: absolute;
  width: 260px;
  height: 170px;
  left: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(242, 84, 255, 0.07);
  filter: blur(35px);
  pointer-events: none;
}


.dai20p-profile-card:hover {
  transform: translateY(-9px);

  box-shadow:
    0 35px 85px rgba(0,0,0,.48),
    0 0 35px rgba(0,224,183,.06);
}


/* =========================================================
   IMAGE
========================================================= */

.dai20p-image-wrap {
  position: relative;

  width: 215px;
  height: 215px;

  margin: 0 auto 28px;

  overflow: hidden;

  border-radius: 25px;

  background: #202421;

  box-shadow:
    0 15px 35px rgba(0,0,0,.30);
}

.dai20p-image-wrap::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07);

  pointer-events: none;
}

.dai20p-profile-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform .5s ease;
}

.dai20p-profile-card:hover
.dai20p-profile-image {
  transform: scale(1.04);
}


/* =========================================================
   NAME
========================================================= */

.dai20p-name {
  position: relative;
  z-index: 3;

  margin: 0 0 27px;

  text-align: center;

  color: #ffffff;

  font-size: 30px;
  line-height: 1.15;

  font-weight: 900;

  letter-spacing: -.4px;
}


/* =========================================================
   SOCIAL BUTTONS
========================================================= */

.dai20p-social {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 31px;

  display: flex;
  align-items: center;

  margin-top: 10px;

  border-radius: 50px;

  overflow: hidden;

  font-size: 15px;
  font-weight: 500;

  color: #ffffff;
}


/* =========================================================
   TELEGRAM / INFO BAR
========================================================= */

.dai20p-social-telegram {
  background:
    linear-gradient(
      90deg,
      #6472df,
      #6879e8
    );
}


/* =========================================================
   FACEBOOK BAR
========================================================= */

.dai20p-social-facebook {
  background:
    linear-gradient(
      90deg,
      #0067b9,
      #005ca9
    );
}


/* =========================================================
   SOCIAL ICON
========================================================= */

.dai20p-social-icon {
  width: 39px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 39px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 900;

  background: rgba(0,0,0,.10);
}

.dai20p-facebook-icon {
  font-family: Arial, sans-serif;
  font-size: 20px;
}

.dai20p-social span {
  padding-left: 9px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {

  .dai20p-profile-grid {
    max-width: 720px;
    gap: 35px;
  }

  .dai20p-profile-card {
    padding: 42px 45px;
  }

  .dai20p-image-wrap {
    width: 195px;
    height: 195px;
  }

  .dai20p-name {
    font-size: 27px;
  }

  .dai20p-stroke-left {
    left: -100px;
    opacity: .55;
  }

  .dai20p-stroke-right {
    right: -80px;
    opacity: .55;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .dai20p-section {
    padding: 65px 18px 75px;
  }

  .dai20p-heading-wrap {
    margin-bottom: 38px;
  }

  .dai20p-heading {
    font-size: 39px;
    letter-spacing: -1.3px;
  }

  .dai20p-profile-grid {
    grid-template-columns: 1fr;
    max-width: 390px;
    gap: 25px;
  }

  .dai20p-profile-card {
    min-height: auto;
    padding: 38px 42px 40px;
    border-radius: 25px;
  }

  .dai20p-image-wrap {
    width: 210px;
    height: 210px;
  }

  .dai20p-name {
    font-size: 28px;
  }

  .dai20p-stroke-left {
    left: -125px;
    top: 300px;
    opacity: .35;
  }

  .dai20p-stroke-right {
    right: -110px;
    top: 70px;
    opacity: .35;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .dai20p-section {
    padding-left: 13px;
    padding-right: 13px;
  }

  .dai20p-profile-card {
    padding: 32px 27px 34px;
  }

  .dai20p-image-wrap {
    width: 190px;
    height: 190px;
  }

  .dai20p-name {
    font-size: 26px;
  }

  .dai20p-social {
    font-size: 14px;
  }

  .dai20p-stroke-left,
  .dai20p-stroke-right {
    opacity: .22;
  }

}
.form-card {
    display: flex;
  justify-content: space-around;
}



/* =========================================================
   DIRECTOR AI - CLASS APART COMPARISON TABLE
   Unique Prefix: drcmp31-
========================================================= */

.drcmp31-section {
   position: relative;
   overflow: hidden;
   padding: 95px 0;
   background:
      radial-gradient(circle at 50% -10%, rgba(115, 66, 255, 0.16), transparent 34%),
      #050817;
   color: #ffffff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.drcmp31-bg {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
}

.drcmp31-bg__grid {
   position: absolute;
   inset: 0;

   background-image:
      linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);

   background-size: 42px 42px;
   mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0.8),
      transparent 90%
   );
}

.drcmp31-bg__glow {
   position: absolute;
   width: 480px;
   height: 480px;
   border-radius: 50%;
   filter: blur(110px);
   opacity: 0.18;
}

.drcmp31-bg__glow--left {
   top: 18%;
   left: -280px;
   background: #155bff;
}

.drcmp31-bg__glow--right {
   right: -270px;
   bottom: 10%;
   background: #9c34ff;
}


/* =========================================================
   HEADER
========================================================= */

.drcmp31-header {
   max-width: 900px;
   margin: 0 auto 52px;
}

.drcmp31-kicker {
   display: inline-flex;
   align-items: center;
   gap: 9px;

   padding: 8px 15px;

   border: 1px solid rgba(149, 89, 255, 0.4);
   background: rgba(123, 68, 255, 0.08);

   border-radius: 100px;

   font-size: 11px;
   line-height: 1;
   letter-spacing: 2px;
   font-weight: 800;

   color: #d8c6ff;
}

.drcmp31-kicker__dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;

   background: #b46cff;

   box-shadow:
      0 0 0 4px rgba(180,108,255,0.10),
      0 0 16px rgba(180,108,255,0.9);
}

.drcmp31-title {
   margin: 22px 0 14px;
  font-size: clamp(30px, 5vw, 50px);
   line-height: 1.02;
   letter-spacing: -2.5px;
   font-weight: 800;
}

.drcmp31-title span {
   background: linear-gradient(
      90deg,
      #d162ff 0%,
      #8c65ff 44%,
      #4b77ff 100%
   );

   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.drcmp31-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   margin: 18px auto;
}

.drcmp31-divider span {
   display: block;

   width: 65px;
   height: 1px;

   background: linear-gradient(
      90deg,
      transparent,
      rgba(150, 103, 255, 0.6)
   );
}

.drcmp31-divider span:last-child {
   transform: scaleX(-1);
}

.drcmp31-divider i {
   display: block;

   width: 5px;
   height: 5px;

   background: #9664ff;
   border-radius: 50%;

   box-shadow: 0 0 12px #9664ff;
}

.drcmp31-intro {
   margin: 0;

   color: #a7afca;

   font-size: 16px;
   line-height: 1.7;
}


/* =========================================================
   MAIN TABLE
========================================================= */

.drcmp31-table-wrap {
   position: relative;

   max-width: 1180px;
   margin: 0 auto;

   overflow: hidden;

   border: 1px solid rgba(117, 105, 191, 0.35);
   border-radius: 18px;

   background:
      linear-gradient(
         145deg,
         rgba(17, 20, 48, 0.96),
         rgba(8, 11, 31, 0.98)
      );

   box-shadow:
      0 35px 100px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.04);
}


/* =========================================================
   TABLE HEADER
========================================================= */

.drcmp31-table-head {
   display: grid;
   grid-template-columns: 190px 1fr 1fr;

   background: rgba(255,255,255,0.018);

   border-bottom: 1px solid rgba(118, 108, 191, 0.28);
}

.drcmp31-head-cell {
   min-height: 120px;
   padding: 25px;

   display: flex;
   align-items: center;
   gap: 16px;

   position: relative;
}

.drcmp31-head-cell:not(:last-child) {
   border-right: 1px solid rgba(118,108,191,0.22);
}

.drcmp31-head-cell--topic {
   justify-content: center;

   color: #727b9e;

   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2px;
}

.drcmp31-head-cell--old {
   background:
      linear-gradient(
         180deg,
         rgba(0,162,255,0.075),
         transparent
      );
}

.drcmp31-head-cell--new {
   background:
      linear-gradient(
         180deg,
         rgba(146,65,255,0.10),
         transparent
      );
}

.drcmp31-head-number {
   font-size: 46px;
   line-height: 1;

   font-weight: 900;

   color: rgba(255,255,255,0.055);
}

.drcmp31-head-cell h3 {
   margin: 7px 0 0;

   color: #ffffff;

   font-size: 19px;
   line-height: 1.15;

   font-weight: 800;
}

.drcmp31-head-tag {
   display: inline-block;

   font-size: 9px;
   line-height: 1;

   font-weight: 800;
   letter-spacing: 1.2px;
}

.drcmp31-head-tag--old {
   color: #29c4ff;
}

.drcmp31-head-tag--new {
   color: #bd75ff;
}


/* =========================================================
   TABLE ROW
========================================================= */

.drcmp31-table-row {
   display: grid;
   grid-template-columns: 190px 1fr 1fr;

   border-bottom: 1px solid rgba(118,108,191,0.22);
}

.drcmp31-row-label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   gap: 10px;

   min-height: 100%;

   padding: 24px 15px;

   border-right: 1px solid rgba(118,108,191,0.22);

   color: #7d87aa;

   text-align: center;

   font-size: 10px;
   line-height: 1.4;

   font-weight: 800;
   letter-spacing: 1.4px;
}

.drcmp31-row-icon {
   display: flex;
   align-items: center;
   justify-content: center;

   width: 32px;
   height: 32px;

   border: 1px solid rgba(144,96,255,0.32);
   border-radius: 8px;

   background: rgba(126,75,255,0.08);

   color: #b488ff;

   font-size: 13px;
}

.drcmp31-cell {
   position: relative;

   padding: 28px;

   min-width: 0;
}

.drcmp31-cell--old {
   border-right: 1px solid rgba(118,108,191,0.22);

   background:
      linear-gradient(
         135deg,
         rgba(0,153,255,0.025),
         transparent
      );
}

.drcmp31-cell--new {
   background:
      linear-gradient(
         135deg,
         rgba(145,69,255,0.045),
         transparent
      );
}


/* =========================================================
   IMAGE CARDS
========================================================= */

.drcmp31-image-card {
   position: relative;

   height: 100%;

   overflow: hidden;

   border-radius: 13px;

   background: #080b22;

   transition:
      transform 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease;
}

.drcmp31-image-card--old {
   border: 1px solid rgba(49,181,255,0.20);
}

.drcmp31-image-card--new {
   border: 1px solid rgba(170,90,255,0.28);
}

.drcmp31-image-card:hover {
   transform: translateY(-4px);
}

.drcmp31-image-card--old:hover {
   border-color: rgba(49,181,255,0.42);

   box-shadow:
      0 20px 45px rgba(0,0,0,0.3),
      0 0 35px rgba(0,151,255,0.08);
}

.drcmp31-image-card--new:hover {
   border-color: rgba(170,90,255,0.5);

   box-shadow:
      0 20px 45px rgba(0,0,0,0.3),
      0 0 40px rgba(143,73,255,0.11);
}

.drcmp31-image-card__top {
   height: 38px;

   padding: 0 13px;

   display: flex;
   align-items: center;

   gap: 8px;

   border-bottom: 1px solid rgba(255,255,255,0.055);

   background: rgba(255,255,255,0.018);

   color: #7e88aa;

   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.3px;
}

.drcmp31-status-dot {
   width: 6px;
   height: 6px;

   border-radius: 50%;

   background: #895cff;

   box-shadow: 0 0 9px rgba(137,92,255,0.7);
}

.drcmp31-image-card__body {
   position: relative;

   display: flex;
   align-items: center;
   justify-content: center;

   min-height: 260px;

   padding: 18px;
}

.drcmp31-image-card__body img {
   display: block;

   max-width: 100%;
   max-height: 310px;

   object-fit: contain;

   transition: transform 0.45s ease;
}

.drcmp31-image-card:hover img {
   transform: scale(1.02);
}


/* =========================================================
   CONTENT COPY
========================================================= */

.drcmp31-copy-title {
   display: inline-block;

   margin-bottom: 16px;

   padding: 6px 9px;

   font-size: 12px;
   line-height: 1;

   font-weight: 900;
}

.drcmp31-copy-title--old {
   background: #0397ed;
   color: #ffffff;

   box-shadow: 7px 7px 0 rgba(3,151,237,0.08);
}

.drcmp31-copy-title--new {
   background:
      linear-gradient(
         90deg,
         #783cff,
         #bd4eff
      );

   color: #ffffff;

   box-shadow: 7px 7px 0 rgba(163,70,255,0.08);
}

.drcmp31-copy p {
   margin: 0;

   color: #aab2ce;

   font-size: 15px;
   line-height: 1.85;
}

.drcmp31-cell--new .drcmp31-copy p {
   color: #d2d5e7;
}


/* =========================================================
   COMPACT ROW
========================================================= */

.drcmp31-table-row--compact .drcmp31-cell {
   padding-top: 22px;
   padding-bottom: 22px;
}

.drcmp31-mini-point {
   height: 100%;

   display: flex;
   align-items: flex-start;

   gap: 12px;
}

.drcmp31-mini-point > span {
   flex: 0 0 28px;

   width: 28px;
   height: 28px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   font-size: 12px;
   font-weight: 900;
}

.drcmp31-mini-point--old > span {
   color: #ff7187;

   background: rgba(255,75,104,0.09);

   border: 1px solid rgba(255,75,104,0.22);
}

.drcmp31-mini-point--new > span {
   color: #b678ff;

   background: rgba(166,83,255,0.10);

   border: 1px solid rgba(166,83,255,0.28);
}

.drcmp31-mini-point p {
   margin: 3px 0 0;

   color: #aab1ca;

   font-size: 14px;
   line-height: 1.65;
}


/* =========================================================
   POSITIONING SHIFT
========================================================= */

.drcmp31-position-row {
   position: relative;

   padding: 38px;

   text-align: center;

   background:
      radial-gradient(
         circle at 50% 0%,
         rgba(123,65,255,0.10),
         transparent 60%
      );
}

.drcmp31-position-label {
   display: inline-flex;
   align-items: center;

   margin-bottom: 15px;

   color: #7e86a7;

   font-size: 9px;
   line-height: 1;

   font-weight: 800;
   letter-spacing: 2px;
}

.drcmp31-position-content {
   position: relative;

   max-width: 850px;
   margin: auto;

   padding: 20px 70px;

   border: 1px solid rgba(132,78,255,0.3);
   border-radius: 10px;

   background:
      linear-gradient(
         90deg,
         rgba(118,66,255,0.07),
         rgba(56,42,124,0.08)
      );
}

.drcmp31-position-content p {
   margin: 0;

   color: #ffffff;

   font-size: 17px;
   line-height: 1.5;

   font-weight: 700;
   font-style: italic;
}

.drcmp31-quote {
   position: absolute;
   top: 7px;
   left: 17px;

   color: #6542c9;

   font-size: 38px;
   line-height: 1;

   font-family: Georgia, serif;
}

.drcmp31-quote--end {
   left: auto;
   right: 17px;
   top: auto;
   bottom: -4px;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.drcmp31-final {
   position: relative;

   max-width: 1020px;

   margin: 24px auto 0;

   padding: 29px 34px;

   display: flex;
   align-items: center;

   gap: 22px;

   overflow: hidden;

   border: 1px solid rgba(140,83,255,0.3);
   border-radius: 14px;

   background:
      linear-gradient(
         135deg,
         rgba(19,20,49,0.98),
         rgba(10,10,29,0.98)
      );

   box-shadow:
      0 20px 60px rgba(0,0,0,0.3);
}

.drcmp31-final__grid {
   position: absolute;
   inset: 0;

   opacity: 0.22;

   background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);

   background-size: 24px 24px;
}

.drcmp31-final__glow {
   position: absolute;

   width: 240px;
   height: 240px;

   top: -130px;
   left: -90px;

   border-radius: 50%;

   background: rgba(117,64,255,0.24);

   filter: blur(65px);
}

.drcmp31-final__icon {
   position: relative;
   z-index: 2;

   flex: 0 0 48px;

   width: 48px;
   height: 48px;

   display: flex;
   align-items: center;
   justify-content: center;

   border: 1px solid rgba(169,98,255,0.42);
   border-radius: 10px;

   background:
      linear-gradient(
         145deg,
         rgba(138,76,255,0.23),
         rgba(79,55,171,0.12)
      );

   color: #f5d64e;

   font-size: 20px;

   box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 10px 28px rgba(0,0,0,0.25);
}

.drcmp31-final__content {
   position: relative;
   z-index: 2;
}

.drcmp31-final__eyebrow {
   display: block;

   margin-bottom: 7px;

   color: #aa72ff;

   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.5px;
}

.drcmp31-final__content p {
   margin: 0;

   color: #d5d8e9;

   font-size: 14px;
   line-height: 1.75;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

   .drcmp31-section {
      padding: 75px 0;
   }

   .drcmp31-table-head {
      grid-template-columns: 135px 1fr 1fr;
   }

   .drcmp31-table-row {
      grid-template-columns: 135px 1fr 1fr;
   }

   .drcmp31-head-cell {
      padding: 20px 16px;
   }

   .drcmp31-head-number {
      display: none;
   }

   .drcmp31-cell {
      padding: 20px;
   }

   .drcmp31-image-card__body {
      min-height: 210px;
   }

}


/* =========================================================
   MOBILE - TABLE BECOMES STACKED COMPARISON
========================================================= */

@media (max-width: 767px) {

   .drcmp31-section {
      padding: 58px 0;
   }

   .drcmp31-header {
      margin-bottom: 34px;
   }

   .drcmp31-title {
      letter-spacing: -1.5px;
   }

   .drcmp31-intro {
      font-size: 14px;
   }

   .drcmp31-table-wrap {
      border-radius: 14px;
   }


   /* Hide desktop table header */

   .drcmp31-table-head {
      display: none;
   }


   /* Rows become stacked */

   .drcmp31-table-row {
      display: block;
   }

   .drcmp31-row-label {
      min-height: auto;

      padding: 13px 18px;

      flex-direction: row;
      justify-content: flex-start;

      border-right: 0;
      border-bottom: 1px solid rgba(118,108,191,0.22);

      background: rgba(255,255,255,0.018);

      text-align: left;
   }

   .drcmp31-row-icon {
      width: 27px;
      height: 27px;

      flex: 0 0 27px;
   }

   .drcmp31-cell {
      padding: 20px 17px;
   }

   .drcmp31-cell--old {
      border-right: 0;
      border-bottom: 1px solid rgba(118,108,191,0.20);
   }

   .drcmp31-cell--old::before,
   .drcmp31-cell--new::before {
      display: block;

      margin-bottom: 13px;

      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1.4px;
   }

   .drcmp31-cell--old::before {
      content: "01  •  THE OLD MODEL";
      color: #28c0ff;
   }

   .drcmp31-cell--new::before {
      content: "02  •  THE DIRECTORAI MODEL";
      color: #bc75ff;
   }

   .drcmp31-image-card__body {
      min-height: 180px;
      padding: 12px;
   }

   .drcmp31-copy p {
      font-size: 14px;
      line-height: 1.75;
   }

   .drcmp31-position-row {
      padding: 28px 16px;
   }

   .drcmp31-position-content {
      padding: 24px 35px;
   }

   .drcmp31-position-content p {
      font-size: 15px;
   }

   .drcmp31-final {
      padding: 25px 20px;

      align-items: flex-start;
   }

   .drcmp31-final__icon {
      width: 40px;
      height: 40px;

      flex-basis: 40px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .drcmp31-title {
      font-size: 35px;
   }

   .drcmp31-kicker {
      font-size: 9px;
      letter-spacing: 1.3px;
   }

   .drcmp31-copy-title {
      font-size: 10px;
   }

   .drcmp31-position-content {
      padding-left: 30px;
      padding-right: 30px;
   }

   .drcmp31-position-content p {
      font-size: 14px;
   }

   .drcmp31-final {
      gap: 14px;
   }

   .drcmp31-final__content p {
      font-size: 13px;
   }

}
/* =========================================================
   MONITOR OUTPUT MEDIA — DYNAMIC ASPECT-RATIO FIT
   Added 31 Aug 2026
   Frame reads the real video's width/height at runtime
   (see loadedmetadata handler in the JS below) and sets
   --frame-ar accordingly, so the box always matches the
   source clip exactly and nothing is ever cropped.
========================================================= */

/* Keep every generated render constrained to its card.
   --frame-ar is set inline per-render by JS once the real
   video dimensions are known; 16/9 is only a pre-metadata
   fallback so the card isn't empty for a frame or two. */
.mon-band .render .frame {
  --frame-ar: 16 / 9;
  position: relative;
  width: min(100%, calc((var(--frame-max-h, 480px)) * (var(--frame-ar))));
  max-width: 100%;
  aspect-ratio: var(--frame-ar);
  display: block;
  overflow: hidden;
  margin-inline: auto;
  background: #08080d;
}

/* Support video whether it has a helper class or is a plain <video>.
   object-fit: contain guarantees the full frame is always visible —
   since the box's own ratio already matches the video, this only
   ever letterboxes during the brief pre-metadata fallback state. */
.mon-band .render .frame > video,
.mon-band .render .frame .output-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 1;
  background: #08080d;
}

/* GIF/background based output has no metadata event to read,
   so it keeps filling its box edge-to-edge as before. */
.mon-band .render .frame .output-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 1;
}

/* Generated UI must always remain visible above the media. */
.mon-band .render .frame .rmeta,
.mon-band .render .frame .pbar {
  position: absolute;
  z-index: 5;
}

/* Prevent render cards from forcing the AI bubble wider than available space. */
.mon-band .msg.ai .bubble .render {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Cap how tall a very narrow/tall (e.g. 9:16) frame is allowed
   to grow, so a portrait clip doesn't stretch the whole card
   down the page. Landscape/near-square clips rarely hit this
   cap since their width fills out long before the height does.
   Values are 40% smaller than the original cap. */
.mon-band .render .frame {
  --frame-max-h: 288px;
}

@media (max-width: 767px) {
  .mon-band .render .frame {
    --frame-max-h: 252px;
  }
}

@media (max-width: 480px) {
  .mon-band .render .frame {
    --frame-max-h: 216px;
  }
  .monitor {
  border-radius: 0;
  padding: 14px;

}
}


/* new mon band css */

/* =========================================================
   DIRECTOR AI 2026
   UNIQUE RESPONSIVE CHAT UI
========================================================= */

.cahatbox-monitor {
  background: linear-gradient(180deg,var(--panel-2),var(--panel));
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;
}

.dai26-app-shell,
.dai26-app-shell *,
.dai26-app-shell *::before,
.dai26-app-shell *::after {
    box-sizing: border-box;
}


.dai26-app-shell {
    --dai26-accent-1: #403895;
    --dai26-accent-2: #3e48a5;
    --dai26-accent-3: #29458f;

    --dai26-icon: #8991eb;

    --dai26-send-1: #6872d9;
    --dai26-send-2: #3f489f;

    --dai26-send-hover-1: #747ee5;
    --dai26-send-hover-2: #4852ad;

    position: relative;

    width: 100%;
    max-width: 1105px;

    aspect-ratio: 777 / 492;

    min-width: 0;

    margin: 0 auto;

    overflow: hidden;

    border-radius:
        clamp(14px, 1.5vw, 22px);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        radial-gradient(
            900px 550px at 105% -8%,
            rgba(64, 72, 180, 0.20),
            transparent 60%
        ),
        radial-gradient(
            800px 550px at -8% 108%,
            rgba(41, 69, 143, 0.16),
            transparent 55%
        ),
        #060609;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    font-family:
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: #fff;

    isolation: isolate;
}


/* =========================================================
   CHAT LAYOUT
========================================================= */

.dai26-chat-ui {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.dai26-chat-header {
    position: relative;

    z-index: 10;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    width: 100%;

    padding:
        clamp(12px, 1.6vw, 16px)
        clamp(13px, 2vw, 20px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);

    background:
        rgba(2, 2, 5, 0.22);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.dai26-chat-header-left {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.dai26-header-avatar {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width:
        clamp(34px, 4vw, 40px);

    height:
        clamp(34px, 4vw, 40px);

    border-radius: 50%;

    border:
        1px solid
        rgba(77, 86, 179, 0.44);

    background:
        rgba(62, 72, 165, 0.16);

    box-shadow:
        0 0 25px
        rgba(79, 88, 200, 0.10);

    overflow: hidden;
}


.dai26-header-avatar svg {
    width:
        clamp(18px, 2.2vw, 22px);

    height:
        clamp(18px, 2.2vw, 22px);

    color:
        var(--dai26-icon);
}


.dai26-header-titles {
    min-width: 0;
}


.dai26-header-titles h3 {
    margin: 0;

    padding: 0;

    font-family: inherit;

    font-size:
        clamp(13px, 1.5vw, 14.5px);

    font-weight: 600;

    line-height: 1.3;

    color: #fff;
}


.dai26-header-titles p {
    margin:
        2px 0 0;

    padding: 0;

    font-size:
        clamp(10px, 1.2vw, 12px);

    font-weight: 400;

    line-height: 1.35;

    color:
        rgba(255, 255, 255, 0.40);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.dai26-history-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    outline: none;

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.64);

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.dai26-history-btn:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, 0.06);
}


.dai26-history-btn:active {
    transform:
        scale(0.94);
}


.dai26-history-btn svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   CHAT SCROLL
========================================================= */

.dai26-chat-scroll {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.13)
        transparent;

    background:
        rgba(0, 0, 0, 0.05);
}


.dai26-chat-scroll::-webkit-scrollbar {
    width: 7px;
}


.dai26-chat-scroll::-webkit-scrollbar-track {
    background:
        transparent;
}


.dai26-chat-scroll::-webkit-scrollbar-thumb {
    background:
        rgba(255, 255, 255, 0.12);

    border-radius: 50px;
}


.dai26-chat-scroll::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255, 255, 255, 0.22);
}


.dai26-chat-inner {
    display: flex;

    flex-direction: column;

    gap:
        clamp(14px, 1.8vw, 20px);

    width: 100%;

    max-width: 720px;

    min-width: 0;

    margin:
        0 auto;

    padding:
        clamp(18px, 2vw, 24px)
        clamp(12px, 2vw, 20px)
        clamp(22px, 2.5vw, 28px);
}


/* =========================================================
   MESSAGE
========================================================= */

.dai26-msg-row {
    display: flex;

    align-items: flex-start;

    gap:
        clamp(8px, 1.2vw, 12px);

    width: 100%;

    min-width: 0;
}


.dai26-msg-row.dai26-user {
    flex-direction:
        row-reverse;
}


.dai26-msg-row.dai26-pre-reveal {
    opacity: 0;

    pointer-events: none;
}


.dai26-msg-row.dai26-revealed {
    opacity: 1;

    transition:
        opacity 0.35s ease;
}


/* =========================================================
   AVATAR
========================================================= */

.dai26-msg-avatar {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width:
        clamp(27px, 3vw, 32px);

    height:
        clamp(27px, 3vw, 32px);

    margin-top: 2px;

    overflow: hidden;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);
}


.dai26-msg-avatar.dai26-bot {
    color:
        var(--dai26-icon);

    background:
        rgba(62, 72, 165, 0.16);
}


.dai26-msg-avatar.dai26-user {
    color:
        rgba(255, 255, 255, 0.68);

    background:
        rgba(255, 255, 255, 0.04);
}


.dai26-msg-avatar svg {
    width:
        clamp(15px, 1.8vw, 18px);

    height:
        clamp(15px, 1.8vw, 18px);
}


/* =========================================================
   BUBBLE
========================================================= */

.dai26-msg-bubble {
    display: flex;

    flex-direction: column;

    gap: 8px;

    width: auto;

    max-width: 84%;

    min-width: 0;

    padding:
        clamp(9px, 1.1vw, 11px)
        clamp(11px, 1.5vw, 15px);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.03);

    color: #fff;

    font-size:
        clamp(12px, 1.35vw, 13.5px);

    font-weight: 400;

    line-height: 1.55;

    white-space: pre-wrap;

    word-break: break-word;

    overflow-wrap: anywhere;
}


.dai26-msg-bubble.dai26-user {
    border-top-right-radius: 6px;

    border-color:
        rgba(77, 86, 179, 0.34);

    background:
        rgba(62, 72, 165, 0.16);
}


.dai26-msg-bubble.dai26-bot {
    border-top-left-radius: 6px;
}


/* =========================================================
   TYPING
========================================================= */

.dai26-typing-dots {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 2px;
}


.dai26-typing-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.48);

    animation:
        dai26TypingBounce 1.2s
        infinite ease-in-out;
}


.dai26-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}


.dai26-typing-dots span:nth-child(3) {
    animation-delay: 0.30s;
}


@keyframes dai26TypingBounce {

    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity: 0.5;
    }

    30% {
        transform:
            translateY(-4px);

        opacity: 1;
    }

}


.dai26-typed-text {
    white-space: pre-wrap;
}


/* =========================================================
   MESSAGE IMAGE
========================================================= */

.dai26-image-bubble {
    width: min(300px, 84%);

    max-width: min(300px, 84%);

    padding: 6px;

    flex: 0 1 auto;
}


.dai26-result-image {
    display: block;

    width: 100%;

    max-width: 100%;

    max-height: 300px;

    height: auto;

    margin: 0;

    object-fit: contain;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    opacity: 0;

    transform:
        translateY(5px);

    animation:
        dai26CardIn 0.4s ease forwards;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.dai26-video-card {
    width:
        min(84%, 620px);

    max-width:
        min(84%, 620px);

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.03);

    opacity: 0;

    transform:
        translateY(6px);

    animation:
        dai26CardIn 0.45s ease forwards;
}


@keyframes dai26CardIn {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.dai26-video-head {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    padding:
        14px 16px 12px;
}


.dai26-video-head-info {
    min-width: 0;
}


.dai26-video-head h3 {
    margin: 0;

    font-family: inherit;

    font-size: 13.5px;

    font-weight: 600;

    line-height: 1.4;

    color: #fff;

    overflow-wrap: anywhere;
}


.dai26-video-head p {
    margin:
        2px 0 0;

    font-size: 11.5px;

    line-height: 1.4;

    color:
        rgba(255, 255, 255, 0.40);
}


/* =========================================================
   STATUS
========================================================= */

.dai26-status-pill {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    flex: 0 0 auto;

    padding:
        4px 10px;

    border:
        1px solid
        rgba(52, 211, 153, 0.25);

    border-radius: 100px;

    background:
        rgba(16, 185, 129, 0.15);

    color: #34d399;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}


.dai26-status-pill::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #34d399;

    box-shadow:
        0 0 6px #34d399;
}


/* =========================================================
   VIDEO FRAME
========================================================= */

.dai26-video-frame-wrap {
    display: flex;

    justify-content: center;

    width: 100%;

    padding:
        0 16px 16px;
}


.dai26-video-frame {
    position: relative;

    width: auto;

    height: min(300px, 47vh);

    max-width: 100%;

    max-height: 300px;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: 12px;

    border:
        1px solid #080916;

    background:
        #080916;
}


.dai26-video-frame.dai26-landscape {
    width: min(100%, 420px);

    height: auto;

    max-height: 300px;

    aspect-ratio: 16 / 9;
}


.dai26-video-frame video,
.dai26-video-poster {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background:
        #080916;
}


/* =========================================================
   LOADING
========================================================= */

.dai26-video-loading {
    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #080916;

    transition:
        opacity 0.25s ease;

    pointer-events: none;
}


.dai26-video-loading.dai26-hidden {
    opacity: 0;
}


.dai26-spinner {
    width: 26px;
    height: 26px;

    border:
        2.5px solid
        rgba(255, 255, 255, 0.18);

    border-top-color:
        rgba(255, 255, 255, 0.78);

    border-radius: 50%;

    animation:
        dai26Spin 0.8s linear infinite;
}


@keyframes dai26Spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   WATERMARK
========================================================= */

.dai26-video-watermark {
    position: absolute;

    z-index: 4;

    bottom: 44px;

    left: 50%;

    transform:
        translateX(-50%);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.02em;

    color:
        rgba(255, 255, 255, 0.55);

    text-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.70);

    pointer-events: none;
}


/* =========================================================
   PLAYER CONTROLS
========================================================= */

.dai26-player-controls {
    position: absolute;

    z-index: 10;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding:
        8px 8px 7px;

    background:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0)
        );
}


.dai26-player-seek {
    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    height: 3px;

    margin: 0;

    border: 0;

    border-radius: 100px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.25);

    cursor: pointer;
}


.dai26-player-seek::-webkit-slider-runnable-track {
    height: 3px;

    border-radius: 100px;

    background:
        linear-gradient(
            to right,
            #fff var(--dai26-seek-fill, 0%),
            rgba(255, 255, 255, 0.25) 0
        );
}


.dai26-player-seek::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: 10px;
    height: 10px;

    margin-top: -3.5px;

    border: 0;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 2px
        rgba(0, 0, 0, 0.20);
}


.dai26-player-seek::-moz-range-track {
    height: 3px;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, 0.25);
}


.dai26-player-seek::-moz-range-progress {
    height: 3px;

    border-radius: 100px;

    background: #fff;
}


.dai26-player-seek::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border: 0;

    border-radius: 50%;

    background: #fff;
}


.dai26-player-row {
    display: flex;

    align-items: center;

    gap: 10px;
}


.dai26-player-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    outline: none;

    background: none;

    color: #fff;

    cursor: pointer;

    opacity: 0.90;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.dai26-player-btn:hover {
    opacity: 1;
}


.dai26-player-btn:active {
    transform:
        scale(0.90);
}


.dai26-player-btn svg {
    width: 16px;
    height: 16px;
}


.dai26-player-time {
    font-size: 10.5px;

    line-height: 1;

    color:
        rgba(255, 255, 255, 0.86);

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


.dai26-player-spacer {
    flex: 1;
}


.dai26-player-icons {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   PLAY OVERLAY
========================================================= */

.dai26-play-overlay {
    position: absolute;

    inset: 0;

    z-index: 8;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0, 0, 0, 0.15);

    cursor: pointer;

    transition:
        background-color 0.2s ease;
}


.dai26-play-overlay:hover {
    background:
        rgba(0, 0, 0, 0.26);
}


.dai26-play-overlay.dai26-hidden {
    display: none;
}


.dai26-play-overlay-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.58);

    color: #fff;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.dai26-play-overlay-btn svg {
    width: 22px;
    height: 22px;

    margin-left: 2px;
}


/* =========================================================
   COMPOSER WRAP
========================================================= */

.dai26-composer-wrap {
    position: relative;

    z-index: 20;

    flex: 0 0 auto;

    width: 100%;

    padding:
        8px 16px 16px;

    background:
        linear-gradient(
            to bottom,
            rgba(6, 6, 9, 0),
            rgba(6, 6, 9, 0.84) 38%
        );
}


.dai26-composer {
    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: 720px;

    min-width: 0;

    margin: 0 auto;

    padding:
        6px 6px 6px 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            rgba(24, 25, 43, 0.92),
            rgba(8, 9, 16, 0.95)
        );

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.45),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.dai26-composer.dai26-is-focused {
    border-color:
        rgba(114, 123, 224, 0.60);

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.50),
        0 0 0 1px
        rgba(114, 123, 224, 0.08);
}


.dai26-composer-row {
    display: flex;

    align-items: flex-end;

    gap: 8px;

    width: 100%;

    min-width: 0;
}


.dai26-composer-field {
    position: relative;

    display: flex;

    align-items: center;

    flex: 1 1 auto;

    min-width: 0;

    min-height: 38px;
}


.dai26-composer-input {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    min-width: 0;

    min-height: 38px;

    max-height: 140px;

    padding: 6px 0;

    border: 0;

    outline: none;

    resize: none;

    overflow-y: auto;

    background:
        transparent;

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.5;
}


.dai26-composer-input::-webkit-scrollbar {
    width: 5px;
}


.dai26-composer-input::-webkit-scrollbar-track {
    background:
        transparent;
}


.dai26-composer-input::-webkit-scrollbar-thumb {
    border-radius: 50px;

    background:
        rgba(255, 255, 255, 0.15);
}


.dai26-composer-input:disabled {
    cursor: default;
}


/* =========================================================
   FAKE PLACEHOLDER
========================================================= */

.dai26-fake-placeholder {
    position: absolute;

    z-index: 1;

    top: 50%;

    left: 0;
    right: 10px;

    transform:
        translateY(-50%);

    max-height:
        calc(1.5em * 2);

    overflow: hidden;

    display:
        -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;

    color:
        rgba(255, 255, 255, 0.31);

    font-size: 14px;

    line-height: 1.5;

    white-space: normal;

    pointer-events: none;

    transition:
        opacity 0.25s ease;
}


/* =========================================================
   SEND BUTTON
========================================================= */

.dai26-send-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    outline: none;

    background:
        linear-gradient(
            135deg,
            var(--dai26-send-1),
            var(--dai26-send-2)
        );

    box-shadow:
        0 8px 22px
        rgba(62, 72, 165, 0.35);

    color: #fff;

    cursor: pointer;

    transition:
        transform 0.20s ease,
        background 0.20s ease;
}


.dai26-send-btn:not(:disabled):hover {
    transform:
        scale(1.04);

    background:
        linear-gradient(
            135deg,
            var(--dai26-send-hover-1),
            var(--dai26-send-hover-2)
        );
}


.dai26-send-btn:disabled {
    background:
        rgba(255, 255, 255, 0.06);

    box-shadow: none;

    color:
        rgba(255, 255, 255, 0.25);

    cursor: default;
}


.dai26-send-btn svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   FOOTNOTE
========================================================= */

.dai26-composer-footnote {
    width: 100%;

    max-width: 720px;

    margin:
        9px auto 0;

    padding:
        0 10px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.25);

    font-family: inherit;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .dai26-app-shell {
        aspect-ratio: auto;

        height:
            clamp(
                580px,
                78vw,
                690px
            );

        max-width: 100%;

        border-radius: 18px;
    }


    .dai26-chat-inner {
        max-width: 680px;
    }


    .dai26-composer {
        max-width: 680px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .dai26-app-shell {
        width: 100%;

        height:
            clamp(
                570px,
                150vw,
                680px
            );

        min-height: 570px;

        max-height:
            min(680px, 88svh);

        border-radius: 15px;
    }


    .dai26-chat-header {
        gap: 9px;

        padding:
            10px 11px;
    }


    .dai26-header-avatar {
        width: 34px;
        height: 34px;
    }


    .dai26-header-titles p {
        max-width:
            calc(100vw - 145px);
    }


    .dai26-chat-inner {
        gap: 14px;

        padding:
            16px 10px 18px;
    }


    .dai26-msg-row {
        gap: 7px;
    }


    .dai26-msg-bubble {
        max-width:
            calc(100% - 35px);

        padding:
            9px 11px;

        border-radius: 13px;

        font-size: 12px;
    }


    .dai26-msg-avatar {
        width: 27px;
        height: 27px;
    }


    .dai26-video-card {
        width:
            calc(100% - 35px);

        max-width:
            calc(100% - 35px);

        border-radius: 13px;
    }


    .dai26-image-bubble {
        width:
            min(
                270px,
                calc(100% - 35px)
            );

        max-width:
            min(
                270px,
                calc(100% - 35px)
            );
    }


    .dai26-video-head {
        gap: 7px;

        padding:
            10px 11px;
    }


    .dai26-video-head h3 {
        font-size: 12px;
    }


    .dai26-video-head p {
        font-size: 10px;
    }


    .dai26-status-pill {
        padding:
            3px 7px;

        font-size: 9px;
    }


    .dai26-video-frame-wrap {
        padding:
            0 8px 9px;
    }


    .dai26-video-frame {
        height:
            min(260px, 43vh);
    }


    .dai26-video-frame.dai26-landscape {
        width: 100%;

        height: auto;
    }


    .dai26-composer-wrap {
        padding:
            7px 8px 9px;
    }


    .dai26-composer {
        padding:
            5px 5px 5px 14px;

        border-radius: 22px;
    }


    .dai26-composer-input,
    .dai26-fake-placeholder {
        font-size: 12px;
    }


    .dai26-send-btn {
        width: 37px;
        height: 37px;
    }


    .dai26-composer-footnote {
        margin-top: 6px;

        font-size: 8.5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .dai26-app-shell {
        min-height: 550px;

        max-height:
            min(650px, 88svh);
    }


    .dai26-header-titles h3 {
        font-size: 12.5px;
    }


    .dai26-header-titles p {
        font-size: 9px;

        max-width:
            calc(100vw - 130px);
    }


    .dai26-history-btn {
        width: 32px;
        height: 32px;
    }


    .dai26-chat-inner {
        padding-left: 8px;

        padding-right: 8px;
    }


    .dai26-video-frame {
        height: 235px;
    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 360px) {

    .dai26-header-titles p {
        display: none;
    }


    .dai26-chat-header {
        padding:
            9px 10px;
    }


    .dai26-msg-bubble {
        max-width:
            calc(100% - 31px);
    }


    .dai26-video-card {
        width:
            calc(100% - 31px);

        max-width:
            calc(100% - 31px);
    }


    .dai26-image-bubble {
        width:
            calc(100% - 31px);

        max-width:
            calc(100% - 31px);
    }

}