.alo{
  --green:#0B3B2E; --green2:#082A21; --deep:#05211A; --gold:#C8923A; --gold2:#F0D08A;
  --cream:#F8F4EC; --ink:#14201C; --muted:#4b524e;
  --ease:cubic-bezier(.2,.7,.2,1);
  --py:100px; --px:24px; --box:1400px;           /* Desktop */
  font-family:'Manrope',sans-serif; color:var(--muted); line-height:1.85; font-size:15px;
  width:100%; max-width:100%; margin-left:0; overflow-x:clip; position:relative;
}
.alo *{box-sizing:border-box;margin:0;padding:0}
.alo h1,.alo h2,.alo h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ink);line-height:1.08;letter-spacing:-.01em}
.alo img{display:block;max-width:100%}
.alo svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* box 1400px content + side padding */
.alo .wrap{max-width:calc(var(--box) + var(--px)*2);margin:0 auto;padding-left:var(--px);padding-right:var(--px);position:relative}
.alo .eb{display:inline-flex;align-items:center;gap:12px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.alo .eb::before{content:"";width:34px;height:1px;background:var(--gold)}

/* prottek section er top/bottom spacing */
.alo .hero,.alo .story,.alo .founder,.alo .values,.alo .mv{padding-top:var(--py);padding-bottom:var(--py)}

/* ---------- reveal system ---------- */
.alo.js [data-r]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.alo.js [data-r="left"]{transform:translateX(-44px)}
.alo.js [data-r="right"]{transform:translateX(44px)}
.alo.js [data-r="zoom"]{transform:scale(.92)}
.alo.js [data-r].in{opacity:1;transform:none}
.alo.js .curtain{clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.4s var(--ease);transition-delay:var(--d,0s)}
.alo.js .curtain.in{clip-path:inset(0 0 0 0 round 18px)}
.alo.js .curtain img{transform:scale(1.25);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.alo.js .curtain.in img{transform:scale(1)}
.alo .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.alo .w>span{display:inline-block;transform:translateY(0)}
.alo.js .w>span{transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*.09s + .15s)}
.alo.js .in .w>span,.alo.js .w.in>span{transform:none}

/* ---------- HERO ---------- */
.alo .hero{background:radial-gradient(1200px 600px at 15% 20%,#0f4a3a 0%,var(--green2) 55%,var(--deep) 100%);color:#e7ece9;position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center}
.alo .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,30%) var(--my,40%),rgba(200,146,58,.14),transparent 60%);pointer-events:none;transition:background .15s}
.alo .arcs{position:absolute;left:-220px;top:-120px;width:760px;height:760px;opacity:.55;pointer-events:none}
.alo .arcs circle{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:6 10;transform-origin:center;animation:spin 90s linear infinite}
.alo .arcs circle:nth-child(2){animation-duration:140s;animation-direction:reverse;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.alo .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2;width:100%}
.alo .hero h1{font-size:clamp(40px,6vw,76px);color:#fff;margin:22px 0 24px}
.alo .shine{background:linear-gradient(90deg,var(--gold) 0%,var(--gold2) 40%,var(--gold) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite;font-style:italic}
@keyframes shine{to{background-position:-220% 0}}
.alo .hero p.lead{max-width:520px;font-size:16px;color:#cfd9d4}
.alo .stats{display:flex;gap:0;margin-top:44px;flex-wrap:wrap}
.alo .stat{display:flex;align-items:center;gap:14px;padding:0 30px;border-left:1px solid rgba(200,146,58,.35)}
.alo .stat:first-child{padding-left:0;border-left:0}
.alo .stat .i{font-size:30px;color:var(--gold)}
.alo .stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:30px;color:#fff;line-height:1;font-weight:600}
.alo .stat small{font-size:12px;color:#b9c7c0;letter-spacing:.04em}
.alo .hero-img{position:relative;height:520px;border-radius:200px 200px 22px 22px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(200,146,58,.35)}
.alo .hero-img img{width:100%;height:118%;object-fit:cover;animation:kb 18s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.1) translateY(-2%)}}
.alo .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,33,26,.55))}
.alo .badge{position:absolute;left:-34px;bottom:46px;z-index:3;background:rgba(8,42,33,.85);backdrop-filter:blur(10px);border:1px solid rgba(200,146,58,.5);color:#fff;padding:16px 22px;border-radius:14px;display:flex;gap:12px;align-items:center;animation:float 6s ease-in-out infinite}
.alo .badge .i{font-size:26px;color:var(--gold)}
.alo .badge b{font-family:'Cormorant Garamond',serif;font-size:22px;display:block;line-height:1}
.alo .badge small{font-size:11px;color:#b9c7c0;letter-spacing:.08em;text-transform:uppercase}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.alo .dot{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0;animation:rise linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-640px);opacity:0}}
.alo .scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;z-index:3}
.alo .scroll::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

/* ---------- MARQUEE ---------- */
.alo .marq{background:var(--gold);color:var(--deep);overflow:hidden;padding:16px 0;white-space:nowrap}
.alo .marq .t{display:inline-flex;gap:46px;animation:mq 38s linear infinite;padding-right:46px}
.alo .marq span{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;display:inline-flex;align-items:center;gap:46px}
.alo .marq span::after{content:"◆";font-size:10px}
@keyframes mq{to{transform:translateX(-50%)}}
.alo .marq:hover .t{animation-play-state:paused}

/* ---------- STORY ---------- */
.alo .story{background:var(--cream);position:relative}
.alo .story::before{content:"2012";position:absolute;right:-20px;top:20px;font-family:'Cormorant Garamond',serif;font-size:260px;font-weight:700;color:rgba(200,146,58,.07);line-height:1;pointer-events:none}
.alo .two{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.alo .story h2{font-size:clamp(34px,4.4vw,56px);margin:18px 0 26px}
.alo .story p{margin-bottom:16px}
.alo .btn{display:inline-flex;align-items:center;gap:12px;margin-top:14px;background:var(--gold);color:#fff;font-weight:600;font-size:14px;text-decoration:none;padding:16px 28px;border-radius:8px;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.alo .btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .8s}
.alo .btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(200,146,58,.4)}
.alo .btn:hover::before{left:130%}
.alo .btn .i{transition:transform .4s var(--ease)}
.alo .btn:hover .i{transform:translateX(6px)}
.alo .collage{position:relative;height:560px}
.alo .c1{position:absolute;left:0;top:0;width:78%;height:340px;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(8,42,33,.25)}
.alo .c2{position:absolute;left:-26px;bottom:20px;width:46%;height:240px;border-radius:18px;overflow:hidden;border:6px solid var(--cream);box-shadow:none;filter:drop-shadow(0 24px 30px rgba(8,42,33,.28));z-index:2;isolation:isolate;background:var(--cream)}
.alo .c1 img,.alo .c2 img{display:block;width:100%;height:112%;object-fit:cover;backface-visibility:hidden}
.alo .qcard{position:absolute;right:0;top:130px;width:46%;background:linear-gradient(160deg,var(--green),var(--deep));color:#d4dfd9;border-radius:20px;padding:34px 30px;z-index:3;box-shadow:0 40px 80px rgba(5,33,26,.45);font-size:13px;line-height:1.75;animation:float 7s ease-in-out infinite}
.alo .qcard .i{font-size:30px;color:var(--gold);margin-bottom:10px}
.alo .qcard h3{color:#fff;font-size:30px;margin-bottom:10px}

/* ---------- FOUNDER ---------- */
.alo .founder{background:linear-gradient(180deg,var(--green),var(--green2));color:#d4dfd9;position:relative;overflow:hidden}
.alo .founder::after{content:"";position:absolute;right:-200px;bottom:-200px;width:600px;height:600px;border-radius:50%;border:1px solid rgba(200,146,58,.25);box-shadow:0 0 0 60px rgba(200,146,58,.04),0 0 0 120px rgba(200,146,58,.03);pointer-events:none}
.alo .founder .two{gap:70px}
.alo .fimg{position:relative;border-radius:18px;overflow:hidden;height:440px;box-shadow:0 40px 80px rgba(0,0,0,.45);border:1px solid rgba(200,146,58,.3)}
.alo .fimg img{width:100%;height:100%;object-fit:cover}
.alo .fimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,33,26,.9))}
.alo .sig{position:absolute;left:28px;bottom:22px;z-index:2;color:#fff}
.alo .sig i{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;display:block;line-height:1}
.alo .sig small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold2)}
.alo .founder h2{color:#fff;font-size:clamp(34px,4.4vw,56px);margin:18px 0 6px}
.alo .nameline{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.alo .nameline em{font-style:normal;color:#fff;font-size:16px;white-space:nowrap}
.alo .nameline span{height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left;transition:transform 1.6s var(--ease) .5s}
.alo.js .nameline span{transform:scaleX(0)}
.alo.js .in .nameline span,.alo.js .nameline.in span{transform:scaleX(1)}
.alo .founder p{margin-bottom:16px}

/* ---------- VALUES ---------- */
.alo .values{background:var(--cream);text-align:center}
.alo .values h2{font-size:clamp(32px,4.2vw,54px);margin:18px 0 14px}
.alo .values .sub{max-width:560px;margin:0 auto 60px}
.alo .vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:left}
.alo .v{padding:10px 32px 24px;border-left:1px solid rgba(11,59,46,.14);position:relative;transition:transform .5s var(--ease)}
.alo .v:first-child{border-left:0}
.alo .v::before{content:"";position:absolute;left:32px;top:-10px;height:2px;width:0;background:var(--gold);transition:width .6s var(--ease)}
.alo .v:hover{transform:translateY(-8px)}
.alo .v:hover::before{width:56px}
.alo .ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:var(--green);background:#e5e9e2;position:relative;margin-bottom:22px;transition:background .4s,color .4s}
.alo .ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed var(--gold);opacity:0;transform:scale(.8);transition:all .5s var(--ease)}
.alo .v:hover .ring{background:var(--green);color:var(--gold)}
.alo .v:hover .ring::after{opacity:1;transform:scale(1);animation:spin 12s linear infinite}
.alo .v h3{font-size:25px;margin-bottom:10px}
.alo .v p{font-size:14px;line-height:1.75}

/* ---------- MISSION / VISION ---------- */
.alo .mv{position:relative;color:#d4dfd9;overflow:hidden;background:linear-gradient(120deg,#0a2a22 0%,#0b3b2e 60%,#0f4d3b 100%)}
.alo .mv::before{content:"";position:absolute;inset:-40%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px);animation:drift 30s linear infinite;pointer-events:none}
@keyframes drift{to{transform:translateX(60px)}}
.alo .mvg{display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative}
.alo .mvg::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.alo .m{display:flex;gap:24px;align-items:flex-start}
.alo .mi{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:var(--gold);background:rgba(200,146,58,.12);border:1px solid rgba(200,146,58,.4);position:relative}
.alo .mi::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.alo .m h3{font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.alo .m p{font-size:16px;color:#e6eee9}

/* ---------- RESPONSIVE: spacing ---------- */
@media(max-width:1366px){.alo{--py:80px;--px:30px}}   /* Laptop */
@media(max-width:1024px){.alo{--py:70px;--px:25px}}   /* Tab */
@media(max-width:767px){.alo{--py:50px;--px:20px}}    /* Phone */

/* ---------- RESPONSIVE: layout ---------- */
@media(max-width:960px){
  .alo .hero{min-height:0}
  .alo .hero-grid,.alo .two,.alo .mvg{grid-template-columns:1fr;gap:50px}
  .alo .founder .two{gap:50px}
  .alo .hero-img{height:420px;max-width:420px;margin:0 auto}
  .alo .badge{left:10px}
  .alo .collage{height:520px}
  .alo .vgrid{grid-template-columns:1fr 1fr;row-gap:40px}
  .alo .v:nth-child(3){border-left:0}
  .alo .mvg::before{display:none}
  .alo .stat{padding:0 18px}
  .alo .scroll{display:none}
}
@media(max-width:560px){
  .alo .vgrid{grid-template-columns:1fr}
  .alo .v{border-left:0;border-top:1px solid rgba(11,59,46,.14);padding-top:28px}
  .alo .stats{gap:22px}
  .alo .stat{border-left:0;padding:0}
  .alo .collage{height:470px}
  .alo .qcard{width:62%;top:150px;padding:24px 20px}
  .alo .story::before{font-size:140px}
}
@media(prefers-reduced-motion:reduce){
  .alo *,.alo *::before,.alo *::after{animation:none!important;transition:none!important}
  .alo.js [data-r],.alo.js .curtain,.alo.js .w>span,.alo.js .curtain img{opacity:1!important;transform:none!important;clip-path:none!important}
}