@font-face{
    font-family:'Gotham';
    src:url('fonts/GothamLight.ttf') format('truetype');
    font-weight:300;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamBook.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamBookItalic.ttf') format('truetype');
    font-weight:400;
    font-style:italic;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamMedium.otf') format('opentype');
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamBold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamBoldItalic.ttf') format('truetype');
    font-weight:700;
    font-style:italic;
    font-display:swap;
  }
  @font-face{
    font-family:'Gotham';
    src:url('fonts/GothamBlack.otf') format('opentype');
    font-weight:800;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Brodies';
    src:url('fonts/Brodies.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --purple:#9146fe;
    --black:#080708;
    --white:#fefffe;
    --dim:rgba(254,255,254,0.6);
    --line:rgba(254,255,254,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--black);
    color:var(--white);
    font-family:'Gotham','Helvetica Neue',Arial,sans-serif;
    overflow-x:hidden;
    position:relative;
  }
  a{color:inherit;text-decoration:none;}

  canvas#fx{
    position:fixed;
    inset:0;
    z-index:0;
  }

  .blob{
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    pointer-events:none;
    opacity:0.55;
    will-change:transform;
  }
  .blob-1{
    width:520px;height:520px;
    background:var(--purple);
    top:-10%;left:-10%;
    animation:float1 16s ease-in-out infinite;
  }
  .blob-2{
    width:420px;height:420px;
    background:var(--purple);
    bottom:-15%;right:-10%;
    animation:float2 20s ease-in-out infinite;
    opacity:0.35;
  }
  @keyframes float1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(80px,60px) scale(1.15);}
  }
  @keyframes float2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-60px,-40px) scale(1.1);}
  }

  .cursor-glow{
    position:fixed;
    width:380px;height:380px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(145,70,254,0.25) 0%, transparent 70%);
    pointer-events:none;
    z-index:1;
    transform:translate(-50%,-50%);
    transition:opacity .3s;
    will-change:left,top;
  }

  main{
    position:relative;
    z-index:2;
  }

  .hero-section{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:28px 6vw;
  }

  header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
  }
  .logo{
    font-weight:700;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo img{
    height:40px;
    width:auto;
  }
  .mark-bg{
    position:fixed;
    top:50%;left:50%;
    width:min(70vw,720px);
    height:min(70vw,720px);
    transform:translate(-50%,-50%);
    background:url('images/izon_logo.jpg') center/contain no-repeat;
    mix-blend-mode:screen;
    opacity:0.06;
    z-index:0;
    pointer-events:none;
    animation:spin 60s linear infinite;
  }
  @keyframes spin{
    from{transform:translate(-50%,-50%) rotate(0deg);}
    to{transform:translate(-50%,-50%) rotate(360deg);}
  }
  .header-links{
    display:flex;
    align-items:center;
    gap:28px;
  }
  .header-link{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    font-weight:500;
    color:var(--dim);
    transition:color .25s;
  }
  .header-link svg{color:var(--purple); flex-shrink:0;}
  .header-link:hover{color:var(--white);}
  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    color:var(--white);
    background:none;
    cursor:pointer;
    flex-shrink:0;
    transition:border-color .25s;
  }
  .menu-btn:hover{border-color:var(--purple);}

  .subtitle{
    font-size:clamp(1.05rem,1.6vw,1.3rem);
    font-weight:500;
    max-width:640px;
    opacity:0;
    animation:rise .8s ease forwards .32s;
  }
  .subtitle .accent{color:var(--purple);}

  .flags{
    display:flex;
    gap:18px;
    justify-content:center;
    opacity:0;
    animation:rise .8s ease forwards .8s;
  }
  .flag-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(254,255,254,0.06);
    border:1px solid var(--line);
    font-size:1.3rem;
    overflow:hidden;
  }

  .hero{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:22px;
    padding-top:40px;
  }
  .eyebrow{
    font-size:0.75rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--purple);
    opacity:0;
    animation:rise .8s ease forwards .1s;
  }
  h1{
    font-size:clamp(2rem, 5.2vw, 3.6rem);
    font-weight:800;
    line-height:1.08;
    max-width:920px;
    opacity:0;
    animation:rise .8s ease forwards .25s;
  }
  .accent{
    color:var(--purple);
  }
  .desc{
    font-size:1.05rem;
    line-height:1.75;
    color:var(--dim);
    max-width:620px;
    opacity:0;
    animation:rise .8s ease forwards .48s;
  }
  .desc .accent{color:var(--purple);}
  @keyframes rise{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }

  .cta{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:rise .8s ease forwards .55s;
  }
  .btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    padding:13px 28px;
    border-radius:999px;
    font-size:0.9rem;
    font-weight:600;
    overflow:hidden;
    transition:transform .25s;
  }
  .btn svg{flex-shrink:0;}
  .btn:hover{transform:translateY(-3px);}
  .btn-primary{
    background:var(--purple);
    color:var(--white);
    box-shadow:0 0 0 rgba(145,70,254,0.5);
    animation:glow 2.5s ease-in-out infinite;
  }
  @keyframes glow{
    0%,100%{box-shadow:0 0 18px rgba(145,70,254,0.35);}
    50%{box-shadow:0 0 34px rgba(145,70,254,0.65);}
  }
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--white);
  }
  .btn-ghost:hover{border-color:var(--purple);}

  .contacts{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:rise .8s ease forwards .7s;
  }
  .chip{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:0.82rem;
    color:var(--dim);
    transition:border-color .25s, color .25s, transform .25s;
    backdrop-filter:blur(6px);
  }
  .chip:hover{
    border-color:var(--purple);
    color:var(--white);
    transform:translateY(-3px) scale(1.03);
  }
  .chip b{color:var(--white); font-weight:600;}
  .chip:hover b{color:var(--purple);}
  .chip svg{color:var(--purple); flex-shrink:0; transition:color .25s, filter .25s;}
  .chip:hover svg{filter:drop-shadow(0 0 6px rgba(145,70,254,0.7));}

  .services{
    position:relative;
    z-index:2;
    padding:60px 6vw 100px;
    max-width:1280px;
    margin:0 auto;
    text-align:center;
  }
  .services .eyebrow{
    position:static;
    opacity:1;
    animation:none;
    margin-bottom:14px;
  }
  .services h2{
    font-size:clamp(1.5rem,2.8vw,2.1rem);
    font-weight:700;
    max-width:760px;
    margin:0 auto 48px;
  }
  .cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .card{
    text-align:left;
    padding:28px 24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(254,255,254,0.02);
    backdrop-filter:blur(6px);
    transition:border-color .25s, transform .25s, background .25s;
  }
  .card:hover{
    border-color:var(--purple);
    transform:translateY(-6px);
    background:rgba(145,70,254,0.06);
  }
  .card svg{
    color:var(--purple);
    margin-bottom:16px;
  }
  .card h3{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:10px;
    line-height:1.3;
  }
  .card p{
    font-size:0.88rem;
    color:var(--dim);
    line-height:1.55;
  }

  footer{
    position:relative;
    z-index:2;
    text-align:center;
    font-size:0.78rem;
    color:var(--dim);
    padding:40px 6vw 36px;
    border-top:1px solid var(--line);
  }
  footer img{
    height:26px;
    width:26px;
    margin-bottom:18px;
    mix-blend-mode:screen;
  }
  footer .legal{
    margin-bottom:6px;
  }

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

  @media(max-width:640px){
    .hero-section{min-height:auto; padding:24px 6vw 40px;}
    .header-link span{display:none;}
    .hero{gap:16px;}
    .services{padding:40px 6vw 70px;}
    .cards{grid-template-columns:1fr;}
  }