:root{
    --bg-deep:#052224;
    --teal-900:#0a3639;
    --teal-800:#0e4448;
    --teal-700:#12545a;
    --teal-600:#166369;
    --teal-500:#1c707a;
    --teal-300:#5fb0b3;
    --teal-200:#9ed3d3;
    --mist:#eef7f6;
    --mist-dim:#dfeeec;
    --ink:#07282a;
    --ink-soft:#365a5c;
    --amber:#e8a33d;
    --amber-dark:#c67f1e;
    --white:#fbfdfc;
    --line: rgba(255,255,255,.14);
    --shadow: 0 20px 50px rgba(4,25,27,.35);
    --radius: 18px;
    --radius-lg: 26px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Tajawal', sans-serif;
    background:var(--mist);
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.6;
  }
  h1,h2,h3,h4{
    font-family:'Cairo', sans-serif;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;height:auto;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  ::selection{background:var(--amber);color:var(--ink);}

  /* ==========================================
     HEADER
     ========================================== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(6,38,40,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px; max-width:1180px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{
    width:46px; height:46px; object-fit:cover; border-radius:12px;
    border:2px solid rgba(255,255,255,.2);
  }
  .brand-text{color:var(--white); line-height:1.15;}
  .brand-text b{font-family:'Cairo'; font-weight:900; font-size:17px;}
  .brand-text span{display:block; font-size:11px; color:var(--teal-200);}
  .nav-links{display:flex; gap:26px; color:var(--mist);}
  .nav-links a{font-size:14.5px; font-weight:500; opacity:.85; transition:color .2s;}
  .nav-links a:hover{opacity:1; color:var(--amber);}
  .nav-cta{display:flex; gap:10px;}

  @media (max-width:860px){ .nav-links{display:none;} }

  /* ==========================================
     BUTTONS
     ========================================== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; border-radius:12px; font-weight:700; font-size:14px;
    font-family:'Tajawal'; cursor:pointer; border:1px solid transparent;
    transition:transform .2s ease, box-shadow .2s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-amber{
    background:linear-gradient(135deg,var(--amber),var(--amber-dark));
    color:#241300; box-shadow:0 8px 24px rgba(232,163,61,.3);
  }
  .btn-outline{
    border:1.5px solid rgba(255,255,255,.55); color:var(--white); background:transparent;
  }
  .btn-outline:hover{background:rgba(255,255,255,.1);}
  .btn-teal{
    background:var(--teal-500); color:var(--white);
    box-shadow:0 8px 24px rgba(28,112,122,.3);
  }
  .btn-sm{padding:9px 16px; font-size:13px; border-radius:10px;}

  /* ==========================================
     HERO
     ========================================== */
  .hero{
    position:relative;
    background:
      radial-gradient(ellipse at 80% 10%, rgba(28,112,122,.5), transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(232,163,61,.12), transparent 50%),
      linear-gradient(180deg, var(--bg-deep), var(--teal-900) 60%, var(--bg-deep));
    color:var(--white);
    padding:64px 0 0;
    overflow:hidden;
  }
  .hero::before {
    content:'';
    position:absolute;
    inset:0;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235fb0b3' fill-opacity='0.07'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Cpath d='M20 10v20M10 20h20' stroke='%235fb0b3' stroke-opacity='0.07' stroke-width='2'/%3E%3Ccircle cx='80' cy='40' r='14' fill='none' stroke='%23e8a33d' stroke-opacity='0.07' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
    z-index:1;
  }
  .hero-inner{
    position:relative;
    z-index:2;
    max-width:1180px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1.05fr .95fr; align-items:end; gap:30px;
  }
  .hero-copy{padding-bottom:60px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--amber); font-weight:800; font-size:13px;
    background:rgba(232,163,61,.1); border:1px solid rgba(232,163,61,.35);
    padding:7px 14px; border-radius:999px; margin-bottom:20px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);}

  .hero h1{
    font-size:clamp(30px,4.5vw,52px); font-weight:900; line-height:1.2;
    margin-bottom:18px;
  }
  .hero h1 .accent{color:var(--amber);}
  .hero p.lead{
    font-size:16.5px; color:var(--teal-200); max-width:500px; line-height:1.85; margin-bottom:32px;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px;}
  .hero-stats{display:flex; gap:32px; flex-wrap:wrap;}
  .hero-stats div b{display:block; font-family:'Cairo'; font-size:24px; font-weight:900; color:var(--white);}
  .hero-stats div span{font-size:12px; color:var(--teal-200);}

  .hero-figure{position:relative; display:flex; justify-content:center; align-items:flex-end;}
  .hero-figure .frame{
    position:relative; width:100%; max-width:360px; border-radius:20px 20px 0 0;
    overflow:hidden; box-shadow:var(--shadow);
    border:2px solid rgba(255,255,255,.12); border-bottom:none;
  }
  .hero-figure .frame img{width:100%; height:480px; object-fit:cover; object-position:top center;}
  .hero-figure .badge{
    position:absolute; top:24px; left:-14px;
    background:var(--white); color:var(--ink); border-radius:14px; padding:12px 16px;
    box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; z-index:3;
  }
  .hero-figure .badge b{font-family:'Cairo'; font-size:18px; font-weight:900; color:var(--teal-600);}
  .hero-figure .badge span{font-size:11px; color:var(--ink-soft); display:block;}

  @media (max-width:940px){
    .hero-inner{grid-template-columns:1fr; text-align:center;}
    .hero-figure{order:-1; margin-bottom:16px;}
    .hero-figure .frame{max-width:260px;}
    .hero-figure .frame img{height:320px;}
    .hero-copy{padding-bottom:32px;}
    .hero p.lead{margin-inline:auto;}
    .hero-actions{justify-content:center;}
    .hero-stats{justify-content:center;}
    .hero-figure .badge{left:50%; transform:translateX(-50%); top:-10px;}
  }

  .wave{display:block; width:100%; line-height:0;}

  /* ==========================================
     SECTION TITLES
     ========================================== */
  .section{padding:72px 0;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
  .kicker{
    display:inline-block; color:var(--teal-600); font-weight:800; font-size:13px;
    margin-bottom:10px; position:relative; padding-bottom:8px;
  }
  .kicker::after{
    content:'';position:absolute; bottom:0; right:50%; transform:translateX(50%);
    width:44px; height:3px; background:var(--amber); border-radius:2px;
  }
  .section-head h2{font-size:clamp(24px,3vw,36px); font-weight:900; color:var(--ink); line-height:1.3;}
  .section-head p{margin-top:12px; color:var(--ink-soft); font-size:15.5px;}

  /* ==========================================
     FEATURES
     ========================================== */
  .features{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .feature-card{
    background:var(--white); border-radius:var(--radius); padding:32px 24px;
    box-shadow:0 8px 24px rgba(10,60,63,.06); border:1px solid rgba(10,60,63,.05);
    position:relative; overflow:hidden; text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .feature-card:hover{transform:translateY(-6px); box-shadow:0 16px 36px rgba(10,60,63,.12);}
  .feature-card .num{
    position:absolute; top:-8px; left:12px; font-family:'Cairo'; font-weight:900;
    font-size:64px; color:rgba(28,112,122,.06);
  }
  .icon-badge{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
    margin:0 auto 18px; box-shadow:0 8px 18px rgba(28,112,122,.25);
  }
  .icon-badge svg{width:26px; height:26px; stroke:var(--white); fill:none; stroke-width:1.8;}
  .feature-card h3{font-size:18px; font-weight:800; margin-bottom:10px; color:var(--ink);}
  .feature-card p{font-size:14px; color:var(--ink-soft); line-height:1.8;}

  @media (max-width:860px){
    .features{grid-template-columns:1fr; max-width:400px; margin:0 auto;}
  }

  /* ==========================================
     ABOUT TEACHER
     ========================================== */
  .about{
    background:linear-gradient(180deg, var(--bg-deep), var(--teal-900));
    color:var(--white); position:relative;
  }
  .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;}
  .about-photo{position:relative;}
  .about-photo .ring{
    position:absolute; inset:-14px; border:1.5px dashed rgba(232,163,61,.4); border-radius:var(--radius-lg);
  }
  .about-photo img{
    width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px;
    box-shadow:var(--shadow); border:2px solid rgba(255,255,255,.12);
  }
  .about-photo .exp-tag{
    position:absolute; bottom:-18px; right:-18px; background:var(--amber); color:#241300;
    border-radius:16px; padding:14px 18px; text-align:center;
    box-shadow:0 12px 24px rgba(0,0,0,.3);
  }
  .about-photo .exp-tag b{display:block; font-family:'Cairo'; font-size:28px; font-weight:900; line-height:1;}
  .about-photo .exp-tag span{font-size:11px; font-weight:700;}
  .about-copy h2{font-size:clamp(22px,3vw,32px); font-weight:900; margin-bottom:16px;}
  .about-copy .kicker{color:var(--amber);}
  .about-copy p{color:var(--teal-200); line-height:1.9; font-size:15px; margin-bottom:14px;}
  .about-list{list-style:none; display:grid; gap:14px; margin:24px 0 28px;}
  .about-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--mist);}
  .about-list li svg{flex:none; width:20px; height:20px; stroke:var(--amber); fill:none; stroke-width:2.2;}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr; text-align:center;}
    .about-photo{max-width:280px; margin:0 auto 40px;}
    .about-list li{justify-content:center;}
  }

  /* ==========================================
     BIOLOGY GALLERY (CIRCULAR BADGES GRID)
     ========================================== */
  .bio-gallery-section {
    background: var(--bg-deep);
    position: relative;
    padding: 64px 0;
  }
  .bio-gallery-section .section-head h2 {
    color: var(--white);
    font-size: clamp(24px, 3vw, 34px);
  }
  .bio-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
    justify-items: center;
    align-items: start;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
  }

  .bio-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    transition: transform .25s ease;
  }
  .bio-badge-item:hover,
  .bio-badge-item.active-touch {
    transform: translateY(-4px);
  }

  .bio-circle-icon {
    width: 110px;
    height: 110px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    border: 3.5px solid #1c3837;
    position: relative;
    padding: 10px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .bio-circle-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  }
  .bio-badge-item:hover .bio-circle-icon,
  .bio-badge-item.active-touch .bio-circle-icon {
    box-shadow: 0 16px 36px rgba(232,163,61,0.45);
    border-color: var(--amber);
  }

  .bio-badge-label {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--teal-200);
    background: rgba(28, 112, 122, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 12px;
    border-radius: 999px;
    text-align: center;
    transition: all .25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    word-break: keep-all;
    overflow-wrap: break-word;
    display: inline-block;
  }
  .bio-badge-item:hover .bio-badge-label,
  .bio-badge-item.active-touch .bio-badge-label {
    background: var(--amber);
    color: #241300;
    font-weight: 800;
    border-color: var(--amber);
    box-shadow: 0 6px 18px rgba(232, 163, 61, 0.4);
  }

  @media (max-width: 860px) {
    .bio-badges-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 16px;
      max-width: 440px;
    }
    .bio-circle-icon {
      width: 90px;
      height: 90px;
    }
    .bio-badge-label {
      font-size: 12px;
      padding: 4px 10px;
    }
  }

  @media (max-width: 480px) {
    .bio-badges-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 12px;
      max-width: 320px;
    }
    .bio-circle-icon {
      width: 80px;
      height: 80px;
      border-width: 3px;
      padding: 8px;
    }
    .bio-badge-label {
      font-size: 11px;
      padding: 4px 8px;
    }
  }

  /* ==========================================
     COURSES CTA
     ========================================== */
  .courses-cta{background:var(--mist-dim);}
  .cta-panel{
    background:linear-gradient(120deg,var(--teal-600),var(--teal-800));
    border-radius:var(--radius-lg); padding:48px 40px; color:var(--white);
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    position:relative; overflow:hidden; box-shadow:var(--shadow);
  }
  .cta-text h3{font-size:clamp(20px,2.5vw,28px); font-weight:900; margin-bottom:10px;}
  .cta-text p{color:var(--teal-200); font-size:14.5px; max-width:440px; line-height:1.8;}
  .stage-chips{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
  .stage-chips span{
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700;
  }

  @media (max-width:760px){
    .cta-panel{flex-direction:column; text-align:center; padding:36px 24px;}
    .stage-chips{justify-content:center;}
  }

  /* ==========================================
     CONTACT
     ========================================== */
  .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;}
  .contact-card{
    background:var(--white); border-radius:var(--radius); padding:28px 20px; text-align:center;
    box-shadow:0 8px 24px rgba(10,60,63,.06); border:1px solid rgba(10,60,63,.05);
  }
  .contact-card .icon-badge{margin:0 auto 16px;}
  .contact-card h4{font-size:16px; font-weight:800; margin-bottom:6px;}
  .contact-card a{color:var(--teal-600); font-weight:700; font-size:14.5px; direction:ltr; display:inline-block;}
  .contact-card p.small{color:var(--ink-soft); font-size:12.5px; margin-top:4px;}

  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr; max-width:380px; margin:0 auto 40px;} }

  .social-row{display:flex; justify-content:center; gap:14px;}
  .social-btn{
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--teal-500); color:var(--white); box-shadow:0 6px 16px rgba(28,112,122,.2);
    transition:transform .2s ease, background .2s ease;
  }
  .social-btn:hover{transform:translateY(-3px); background:var(--amber); color:#241300;}
  .social-btn svg{width:20px; height:20px; fill:currentColor;}

  /* ==========================================
     FOOTER
     ========================================== */
  footer{background:var(--bg-deep); color:var(--teal-200); padding:40px 0 24px;}
  .footer-top{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
    gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line);
  }
  .footer-brand{display:flex; align-items:center; gap:10px;}
  .footer-brand img{width:40px; height:40px; border-radius:10px;}
  .footer-brand b{font-family:'Cairo'; color:var(--white); font-weight:900; font-size:16px;}
  footer .bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding-top:18px; font-size:12px;
  }
  footer a{opacity:.85;} footer a:hover{color:var(--amber);}

  /* Animations */
  [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
  [data-reveal].in{opacity:1; transform:none;}

  @media (max-width:480px){
    .wrap{padding:0 16px;}
    .nav{padding:10px 16px;}
    .brand img{width:38px; height:38px;}
    .brand-text b{font-size:15px;}
    .hero{padding:32px 0 0;}
    .hero h1{font-size:24px;}
    .hero p.lead{font-size:14px;}
    .btn{padding:9px 16px; font-size:12.5px;}
    .section{padding:44px 0;}
    .section-head{margin-bottom:28px;}
    .section-head h2{font-size:20px;}
    footer .bottom{flex-direction:column; text-align:center;}
  }