:root{ /* Palette: A2EAD0, 339D84, F7FDFC */
    --bg:#F7FDFC; --fg:#0c1f18; --muted:#546c63; --accent:#339D84; --accent-soft:#A2EAD0; --card:#ffffff; --line:#e6f2ef;
  }
  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
  a{ color:var(--accent); text-decoration:none }
  a:hover{ text-decoration:underline }
  .container{ max-width:1100px; margin:0 auto; padding:0 20px }
  header{ position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:rgba(247,253,252,.8); border-bottom:1px solid var(--line); z-index:10 }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:70px }
  .brand{ display:flex; align-items:center; gap:10px }
  .brand img{ height:34px; width:34px }
  .brand .name{ font-family:"Baloo 2", system-ui; font-weight:700; font-size:20px; letter-spacing:.2px }
  .links{ display:flex; gap:18px; align-items:center }
  .action{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:linear-gradient(180deg,#fff, #f2fbf8); color:var(--fg); padding:10px 14px; border-radius:12px; font-weight:600 }
  
  /* Burger menu - hidden by default */
  .burger{ display:none; flex-direction:column; cursor:pointer; padding:8px; }
  .burger span{ display:block; width:24px; height:2px; background:var(--fg); margin-bottom:4px; transition:all 0.3s ease; }
  .burger.active span:nth-child(1){ transform:rotate(45deg) translate(5px, 5px); }
  .burger.active span:nth-child(2){ opacity:0; }
  .burger.active span:nth-child(3){ transform:rotate(-45deg) translate(7px, -6px); }
  .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:linear-gradient(180deg,#fff, #f2fbf8); color:var(--fg); padding:10px 14px; border-radius:12px; font-weight:600 }
  .btn:hover{ border-color:#cbe7df }
  .ghost{ background:transparent }
  .hero{ padding:70px 0 32px; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center }
  .hero h1{ font-family:"Baloo 2", system-ui; font-size:48px; line-height:1.06; margin:0 0 12px; letter-spacing:.2px }
  .hero h1 .light{ color:var(--accent) }
  .hero p.lead{ font-size:18px; color:var(--muted); margin:0 0 18px }
  .creator-block{ margin-top: 20px; display:flex; flex-direction:column; gap:10px; }
  .creator-block h2{ margin:0; }
  .tag{ display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); background:#fbfffe }
  .card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px }
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
  section{ padding:36px 0 }
  h2{ font-size:26px; margin:0 0 16px }
  .pill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:var(--accent-soft); color:#0b3d32; font-size:12px; font-weight:600 }
  .list{ display:flex; flex-direction:column; gap:8px; padding-left:18px }
  .timeline{ position:relative; padding-left:22px }
  .timeline:before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--line) }
  .t-item{ position:relative; margin:10px 0; padding-left:10px }
  .t-item:before{ content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--accent) }
  .footer{ padding:30px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px }
  img.heroimg{ width:100% }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0 }
  .muted{ color:var(--muted) }
  .lang{ border:1px solid var(--line); padding:6px 10px; border-radius:999px }
  
  /* Mobile devices (up to 900px) */
  @media (max-width: 900px) {
    .hero{ grid-template-columns:1fr; }
    .grid-3{ grid-template-columns:1fr; }
    .grid-2{ grid-template-columns:1fr; }
    
    /* Tiny screens: scrollable nav */
    @media (max-width: 560px) {
      .links{ 
        overflow-x:auto; 
        white-space:nowrap; 
        -webkit-overflow-scrolling:touch; 
        gap:14px 
      }
      .links::-webkit-scrollbar{ display:none }
      .links a{ padding:6px 2px }
    }
    
    /* Small mobile devices */
    @media (max-width: 500px) {
      .container{ padding:0 16px }
      .nav{ height:64px; justify-content:space-between; }
      
      /* Mobile navigation */
      .links{ 
        display:none; 
        flex-direction:column; 
        position:absolute; 
        top:64px; 
        left:0; 
        width:100%; 
        background:rgba(247,253,252,.95); 
        backdrop-filter:saturate(140%) blur(8px);
        padding:20px; 
        height:100vh; 
        gap:16px;
        border-top:1px solid var(--line);
      }
      .links.active{ display:flex; }
      .links a{ padding:12px 0; border-bottom:1px solid var(--line); width:100%; text-align:center; }
      .burger{ display:flex; }
      .action{ padding:9px 12px; border-radius:10px; font-size:14px; display: inline; }
      
      .hero{ grid-template-columns:1fr; padding:16px 0 20px }
      .hero h1{ font-size:32px }
      .hero p.lead{ font-size:16px }
      .creator-block{ margin-top:16px; gap:8px; }
      .creator-block h2{ font-size:22px }
      .tag{ font-size:11px; padding:4px 8px }
      .btn{ padding:9px 12px; border-radius:10px; font-size:14px }
      .chips{ gap:6px; margin:8px 0 0 }
      .pill{ font-size:11px; padding:4px 8px }
      .heroimg{ display:none; }
    }
  }

  /* Tablet devices (768px - 1024px) */
  @media screen and (min-width:768px) and (max-width:1024px) {
    .container{ max-width:720px }
    
    /* Portrait orientation */
    @media (orientation:portrait) {
      .hero{ grid-template-columns:1fr; padding:64px 0 24px }
      .hero h1{ font-size:40px }
      .grid-3{ grid-template-columns:1fr }
      .grid-2{ grid-template-columns:1fr }
      .creator-block{ margin-top:24px }
    }
    
    /* Landscape orientation */
    @media (orientation:landscape) {
      .container{ max-width:980px }
      .hero h1{ font-size:44px }
      .grid-3{ grid-template-columns:repeat(2,1fr) }
      .grid-2{ grid-template-columns:repeat(2,1fr) }
    }
  }