:root{

--bg:#081a57;
--bg-soft:#0d246d;

--bg-card:rgba(255,255,255,0.08);
--bg-card-strong:rgba(255,255,255,0.14);

--bg-header:rgba(7,22,76,0.85);

--text:#ffffff;
--text-soft:rgba(255,255,255,0.82);

--primary:#1ea7ff;
--primary-dark:#117cc2;

--accent:#ff8a3d;

--border:rgba(255,255,255,0.12);

--shadow:0 18px 45px rgba(0,0,0,0.25);

--radius:22px;

--container:1380px;

}

/* RESET */

*{
box-sizing:border-box;
}

body{

margin:0;

font-family:Verdana,Arial,sans-serif;

background:
radial-gradient(circle at top right, rgba(30,167,255,0.15), transparent 25%),
linear-gradient(180deg,#0a1f66,#081a57);

color:var(--text);

}

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

a{
color:var(--primary);
text-decoration:none;
transition:0.25s;
}

a:hover{
color:var(--accent);
}

.container{
width:min(calc(100% - 32px),var(--container));
margin:auto;
}

/* HEADER */

.site-header{

position:sticky;
top:0;

z-index:1000;

background:var(--bg-header);

backdrop-filter:blur(10px);

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

}

.header-inner{

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

padding:10px 0;

gap:16px;

}

.brand-logo{

height:42px;

}

/* MENU */

.main-nav{

display:flex;
align-items:center;

gap:10px;

flex-wrap:nowrap;

}

.main-nav a{

color:#fff;

font-size:0.9rem;

font-weight:600;

padding:10px 14px;

border-radius:12px;

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

border:1px solid rgba(255,255,255,0.05);

white-space:nowrap;

}

.main-nav a:hover{

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

}

.main-nav a.active{

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

pointer-events:none;

}

/* HERO */

.hero{
padding:80px 0 50px;
}

.hero-grid{

display:grid;

grid-template-columns:1.1fr 0.9fr;

gap:40px;

align-items:center;

}

.hero h1{

font-size:3rem;

margin:0 0 15px;

}

.hero-lead{

font-size:1.2rem;

line-height:1.7;

color:var(--text-soft);

}

.hero-buttons{

margin-top:25px;

display:flex;

gap:12px;

flex-wrap:wrap;

}

/* BUTTONS */

.btn{

padding:14px 22px;

border-radius:12px;

font-weight:bold;

display:inline-flex;

align-items:center;

justify-content:center;

border:none;

cursor:pointer;

}

.btn-primary{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:white;

}

.btn-secondary{

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

color:white;

}

/* BADGE */

.badge{

display:inline-block;

background:rgba(30,167,255,0.18);

color:#bfe7ff;

padding:8px 16px;

border-radius:30px;

font-weight:bold;

margin-bottom:16px;

}

/* HERO IMAGE */

.hero-card{

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

padding:24px;

border-radius:24px;

border:1px solid rgba(255,255,255,0.15);

}

/* SECTIONS */

.section{

padding:40px 0;

}

.section-alt{

padding:40px 0;

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

}

.section-title-row{

margin-bottom:20px;

}

.section-title-row h2{

margin:0 0 10px;

font-size:2rem;

color:#8fd6ff;

}

.section-title-row p{

color:var(--text-soft);

}

/* CARDS */

.cards{

display:grid;

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

gap:24px;

}

.cards-projects{

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

}

.card{

background:var(--bg-card);

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

border-radius:22px;

padding:26px;

box-shadow:var(--shadow);

transition:0.25s;

}

.card:hover{

transform:translateY(-6px);

background:var(--bg-card-strong);

}

/* TABLE */

.feature-table{

width:100%;

border-collapse:collapse;

}

.feature-table th{

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

padding:14px;

text-align:left;

}

.feature-table td{

padding:14px;

border-top:1px solid rgba(255,255,255,0.08);

}

/* INFO BOX */

.info-box{

background:var(--bg-card);

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

border-radius:22px;

padding:30px;

box-shadow:var(--shadow);

}

/* TOOLS */

.tools-grid{

display:grid;

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

gap:22px;

}

.tools-grid-two{

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

}

.tool-card{

background:var(--bg-card);

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

border-radius:22px;

padding:24px;

box-shadow:var(--shadow);

text-align:center;

transition:0.25s;

}

.tool-card:hover{

transform:translateY(-6px);

background:var(--bg-card-strong);

}

.tool-image{

max-width:220px;

margin:auto;

border-radius:14px;

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

padding:10px;

}

/* ========================= */
/* TEST IM QUESTIONS */
/* ========================= */

.im-questions-list{

display:grid;

grid-template-columns:1fr;

gap:12px;

}

.im-question{

width:100%;

text-align:left;

border:1px solid rgba(255,255,255,0.12);

border-radius:14px;

padding:14px 16px;

font-size:1rem;

line-height:1.5;

cursor:pointer;

transition:0.2s ease;

color:#ffffff;

font-weight:600;

box-shadow:0 6px 14px rgba(0,0,0,0.12);

}

.im-question.actif{

background:#18306f;

color:#ffffff;

}

.im-question.actif:hover{

background:#22408f;

}

.im-question.gain{

background:#ff8a3d;

color:#ffffff;

border:1px solid rgba(255,255,255,0.18);

}

.im-question.gain:hover{

background:#ff9a57;

}

/* ACTION BUTTONS */

.im-actions{

display:flex;

gap:14px;

justify-content:center;

flex-wrap:wrap;

margin-top:24px;

}

/* RESULTS */

.im-results-table input{

width:60px;

padding:8px 10px;

border-radius:10px;

border:none;

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

color:#fff;

text-align:center;

}

.im-results-table progress{

width:180px;

height:18px;

}

.im-mini-icon{

width:42px;

}

.im-result-note{

display:flex;

align-items:flex-start;

gap:18px;

}

.im-ok-icon{

width:72px;

}

/* FOOTER */

.site-footer{

padding:30px 0;

text-align:center;

color:rgba(255,255,255,0.7);

}

/* RESPONSIVE */

@media(max-width:1100px){

.cards{
grid-template-columns:repeat(2,1fr);
}

.tools-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:850px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.main-nav{
flex-wrap:wrap;
justify-content:center;
}

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

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

}                    .im-results-layout{
  align-items:start;
}

.im-radar-canvas{
  width:100%;
  max-width:420px;
  height:auto;
  margin:0 auto;
  display:block;
  background:rgba(255,255,255,0.04);
  border-radius:18px;
  padding:10px;
}

.im-ranking-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.im-ranking-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
}

.im-ranking-pos{
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ff8a3d;
  color:#fff;
  font-weight:700;
  flex:0 0 32px;
}

.im-ranking-icon{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 42px;
}

.im-ranking-text{
  color:#fff;
  line-height:1.4;
}

.im-summary p{
  color:var(--text-soft);
  line-height:1.7;
}

@media (max-width: 980px){
  .im-results-layout{
    grid-template-columns:1fr;
  }
}                   .im-ai-box{

background:linear-gradient(
135deg,
rgba(255,138,61,0.15),
rgba(30,167,255,0.12)
);

border:1px solid rgba(255,255,255,0.15);

}

.im-ai-box h2{

color:#ffb27d;

}                                                    .maths-media-layout{
  align-items:start;
}

.video-wrapper{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:18px;
}

.video-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:18px;
}

.clean-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.clean-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-weight:700;
}

.clean-links a:hover{
  background:rgba(255,255,255,0.16);
  color:#fff;
}

.scratch-wrapper{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  height:410px;
}

.scratch-wrapper iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:18px;
}

@media (max-width: 980px){
  .maths-media-layout{
    grid-template-columns:1fr;
  }

  .scratch-wrapper{
    height:360px;
  }
}