/* ============================================================
   Fikra Studio — landing page
   Built from DESIGN.md (Figma: "fikra studio landing page").
   Geometry is matched to the 1444px design frame.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Tosh A";
  src:url("../fonts/TRYToshA-wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tosh B";
  src:url("../fonts/TRYToshB-wght.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* colour — values taken verbatim from the Figma variables */
  --page:#1e1d1d;
  --page-2:#1e1e1e;
  --surface:#232022;
  --surface-2:#3d393b;
  --ink-vibrant:#1a1a1a;

  --blue:#230cf2;
  --blue-deep:#1a09b5;
  --brand-100:#eeecff;
  --brand-400:#8178ff;

  --lime:#c6f705;
  --lime-bright:#d3fa32;
  --lime-eyebrow:#b9fd50;
  --lime-600:#a8d300;
  --lime-700:#86a800;
  --lime-900:#394800;
  --ink-lime:#111204;

  --muted:#9593a4;
  --white:#ffffff;

  /* type */
  --font:"Tosh A","Tosh B",system-ui,sans-serif;
  --font-ar:"Tosh B","Tosh A",system-ui,sans-serif;

  /* radii */
  --r-sm:9px;
  --r-md:16px;
  --r-btn:23px;
  --r-bar:25px;
  --r-nav:47px;
  --r-toggle:67px;

  /* containers — measured off the design frame */
  --shell:1228px;        /* content 1148 -> x 148..1296 */
  --shell-wide:1277px;   /* content 1197 -> x 124..1321 */
  --shell-hero:1332px;   /* content 1252 -> x 96..1348 */
  --shell-plans:1023px;  /* pricing grid */
  --shell-footer:1256px; /* content 1176 */
  --gut:clamp(20px,4vw,40px);

  --slant:5.9vw;         /* hero bottom fall: 85px at 1444 */
  --slant-foot:2.77vw;   /* footer top rise: 40px at 1444 */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  -webkit-text-size-adjust:100%;
  background:var(--page);
}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:24px;
  background:var(--page);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:var(--font-ar)}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell--hero{max-width:var(--shell-hero)}
.shell--wide{max-width:var(--shell-wide)}
.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}

/* ---------- Type scale (Figma tokens) ---------- */
.t-display  {font-size:56px;line-height:64px;font-weight:700;letter-spacing:-.02em}
.t-display-2{font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.015em}
.t-display-3{font-size:40px;line-height:48px;font-weight:700;letter-spacing:-.015em}
.t-display-4{font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.01em}
.t-headline {font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.0025em}
.t-title    {font-size:20px;line-height:28px;font-weight:500}
.t-body-lg  {font-size:18px;line-height:28px;font-weight:400}
.t-body     {font-size:16px;line-height:24px;font-weight:400}
.t-label    {font-size:14px;line-height:20px;font-weight:500}
.t-caption  {font-size:12px;line-height:18px;font-weight:500}

.eyebrow{
  display:block;
  font-size:14px;line-height:20px;font-weight:500;
  color:var(--lime-eyebrow);
}
.eyebrow--lime{color:var(--lime)}
.eyebrow--blue{color:var(--blue)}

/* Lime highlight behind a word, as in "a simple FIKRA".
   The design tilts the chip (and the word inside it) by the same angle as the
   service marquee. */
.mark{
  display:inline-block;
  padding:3px 10px 0;
  margin-block-start:-3px;
  background:var(--lime);
  color:var(--ink-lime);
  border-radius:20px;
  margin-inline-end:-5px;
  transform:rotate(-4.3deg);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:56px;padding:8px 24px;
  border-radius:var(--r-btn);
  font-size:16px;line-height:24px;font-weight:500;
  border:1.5px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lime{background:var(--lime);color:var(--ink-lime)}
.btn--lime:hover{background:var(--lime-bright)}
.btn--dark{background:var(--surface);color:var(--white)}
.btn--outline{border-color:var(--lime-600);color:var(--surface)}
.btn--outline:hover{background:var(--lime);border-color:var(--lime)}
.btn--sm{min-height:56px;font-size:14px;line-height:20px;padding:8px 14px}
.btn--block{width:100%}

/* A lime button sitting on a dark offset plate (the "Comming soon!" chip) */
.btn-stack{position:relative;display:inline-block}
.btn-stack::before{
  content:"";position:absolute;inset:5px -4px -5px 4px;
  background:var(--surface);border-radius:var(--r-btn);
}
.btn-stack>*{position:relative}

/* ============================================================
   HEADER
   Design: pill at y=48, 791x53, right edge 68px from the frame.
   ============================================================ */
.header{
  position:fixed;top:48px;left:0;right:0;z-index:60;
  transition:top .28s ease;
  pointer-events:none;
}
.header.is-stuck{top:14px}
.header__inner{
  width:100%;max-width:1444px;margin-inline:auto;
  padding-inline:clamp(20px,6.65vw,96px) clamp(20px,4.71vw,68px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  pointer-events:none;
}
.header__inner>*{pointer-events:auto}

.brand{position:relative;display:inline-flex;align-items:center}
.brand img{width:177px;height:53px;object-fit:contain;transition:opacity .3s ease}
/* the blue lockup is stacked on the white one and crossfaded in when the
   header scrolls over one of the white bands */
.brand__ink{position:absolute;inset:0;opacity:0}
.header.is-on-light .brand__ink{opacity:1}
.header.is-on-light .brand>img:first-child{opacity:0}

.nav{
  display:flex;align-items:center;gap:32px;
  height:53px;padding:0 8px 0 25px;
  background:var(--surface);
  border-radius:var(--r-nav);
}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a{
  font-size:20px;line-height:28px;font-weight:500;
  color:var(--white);transition:color .16s ease;
}
.nav__links a:hover,
.nav__links a.is-active{color:var(--lime)}

/* EN / AR switch — track #394800, active chip #c6f705 */
.lang{
  display:flex;align-items:center;gap:28px;
  padding:4px 8px 4px 6px;
  background:var(--lime-900);
  border-radius:var(--r-btn);
}
.lang button{
  height:29px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:35px;
  font-size:16px;line-height:24px;font-weight:500;
  color:var(--white);
  transition:background .16s ease,color .16s ease;
}
.lang button.is-active{padding:0 18px;background:var(--lime);color:var(--surface)}

.nav__toggle{display:none}

/* ============================================================
   HERO
   Blue block, 980px tall, bottom edge slanted 85px down-to-left.
   ============================================================ */
.hero{
  position:relative;
  background:var(--blue);
  padding-top:258px;
  padding-bottom:155px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%);
  overflow:hidden;
  text-align:center;
}
.hero__glow{
  position:absolute;left:50%;top:120px;width:830px;height:617px;
  transform:translateX(-50%);
  background:var(--surface);
  border-radius:50%;
  filter:blur(160px);
  opacity:.42;
  pointer-events:none;
}
.hero .shell{position:relative;z-index:2}

.hero h1{
  font-weight:700;letter-spacing:-.02em;
  font-size:56px;line-height:64px;
}
.hero h1 .lead{
  display:block;
  font-size:96px;line-height:92px;
}
.hero__sub{
  max-width:542px;margin:29px auto 0;
  font-size:18px;line-height:28px;font-weight:400;
  color:rgba(255,255,255,.8);
}
.hero .btn{margin-top:37px;width:149px;padding-inline:14px}

/* stickers — each one drifts on its own loop so the hero never sits still.
   --rot keeps the sticker's resting tilt while the float animation runs. */
.sticker{
  position:absolute;z-index:3;pointer-events:none;
  animation:float var(--dur,7s) ease-in-out var(--delay,0s) infinite;
  will-change:transform;
}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%    {transform:translate3d(0,var(--rise,-14px),0) rotate(var(--tilt,var(--rot,0deg)))}
}
.sticker--bubble{left:calc(50% - 482px);top:151px;width:197px;--dur:7.5s;--rise:-16px;--tilt:-2deg}
.sticker--badge{left:calc(50% + 471px);top:267px;width:79px;--dur:6.2s;--delay:-1.4s;--rise:-13px;--tilt:4deg}
/* the stars are nudged clear of the headline, the bubble and the button so
   nothing sits on top of anything else */
.sticker--star-lg{left:calc(50% + 318px);top:143px;width:103px;--dur:8s;--delay:-2.6s;--rise:-18px;--tilt:8deg}
.sticker--star-sm{left:calc(50% + 196px);top:512px;width:22px;--dur:5.4s;--delay:-.8s;--rise:-10px;--tilt:12deg}
.sticker--star-xs{left:calc(50% - 288px);top:538px;width:18px;--dur:6.8s;--delay:-3.2s;--rise:-9px;--tilt:-14deg}

/* WORKED FOR */
.worked{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:68px;
}
.worked span{font-size:18px;line-height:26px;font-weight:500}
.worked i{display:block;width:23px;height:2px;background:var(--lime)}

/* client logo bar — 1253x104, radius 25, gap 75, padding 0 59 */
.clients{
  position:relative;z-index:2;
  margin-top:35px;
  height:104px;
  padding:0 59px;
  background:var(--surface);
  border-radius:var(--r-bar);
  display:flex;align-items:center;justify-content:space-between;gap:75px;
}
.clients img{height:42px;width:auto;object-fit:contain}
.clients img.is-tall{height:60px}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative}
.split{
  display:grid;
  grid-template-columns:606px 488px;
  justify-content:space-between;
  gap:40px;
}
/* the design drops the right-hand column 51px below the heading column */
.split>*+*{margin-top:51px}
.lede{font-size:18px;line-height:28px;font-weight:400}
/* body copy on the dark ground is white at 80% in the design */
.split p{color:rgba(255,255,255,.8)}
.lede--muted{color:var(--muted)}

/* --- What we do --- */
.whatwedo{padding-top:52px}
.split h2{margin-top:19px}

/* --- Process --- */
.process{padding-top:157px}
.process__grid{
  margin-top:37px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,283px));
  justify-content:space-between;
  row-gap:56px;
}
.pcard__icon{
  display:grid;place-items:center;
  width:93px;height:93px;
  background:var(--blue-deep);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
}
.pcard__icon img{width:48px;height:48px;object-fit:contain}
.pcard h3{margin-top:38px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.0025em}
.pcard p{margin-top:24px;font-size:16px;line-height:24px;color:rgba(255,255,255,.8)}

/* --- Service tape --------------------------------------------------------
   One exported bitmap ("Asset 16@3x 1"): both crossed bands, their shadows and
   the type, exactly as the file draws them. In the 1444 frame it spans the full
   width at y 2000, 1444 x 352, and the white band starts at its lower edge, so
   the box below is that geometry as a ratio of the frame width (IoU 0.993
   against the 1:1 render). */
.ticker{
  position:relative;
  margin-top:70px;
  aspect-ratio:1444 / 220;
  overflow:hidden;
  pointer-events:none;
}
.ticker__tape{
  position:absolute;left:0;top:0;
  width:100%;height:auto;
  transform:translateY(-13.92%);   /* -49 / 352 of the tape's own height */
}

@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* In RTL the track is anchored to the container's right edge and runs off to
   the left, so it has to travel the other way to keep feeding chips into view
   instead of emptying the row. */
@keyframes slide-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* --- Our beautiful works (white band) --- */
.works{
  position:relative;
  background:var(--white);
  color:var(--surface);
  text-align:center;
  padding:62px 0 43px;
}
/* The white bands carry a fine graph-paper grid: 1px #f0f0f0 rules on a
   30 x 31 cell, measured off the design frame. It is drawn with gradients
   rather than the exported PNG, which was a flat wash with no lines in it. */
.works::before,
.pricing::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(to right,#f0f0f0 1px,transparent 1px),
    linear-gradient(to bottom,#f0f0f0 1px,transparent 1px);
  background-size:30px 31px;
  background-position:50% 0;
  pointer-events:none;
}
/* The grid has to run all the way into the white arc that flows down into the
   dark CTA, with no seam. Phase-locking both layers to their horizontal centres
   lines the columns up whatever the arc's width, and anchoring the pricing
   grid to its own bottom edge — which is exactly where the arc's box starts —
   makes the rows line up too. */
.pricing::before{background-position:50% 100%}
/* the bands drop a soft shadow onto the top-left of the white band */
.works::after{
  content:"";position:absolute;inset:0 0 auto 0;height:60px;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.46) 0,rgba(0,0,0,.14) 45%,rgba(0,0,0,0) 100%);
  -webkit-mask:linear-gradient(to right,#000 0%,rgba(0,0,0,.30) 21%,rgba(0,0,0,.04) 40%,transparent 55%);
  mask:linear-gradient(to right,#000 0%,rgba(0,0,0,.30) 21%,rgba(0,0,0,.04) 40%,transparent 55%);
  pointer-events:none;
}
.works .shell{position:relative;z-index:2}
.works h2{font-size:40px;line-height:48px;font-weight:700;letter-spacing:-.015em;color:var(--ink-lime)}
.works p{max-width:462px;margin:26px auto 0;color:rgba(35,32,34,.86)}
.works .btn-stack{margin-top:36px}
.works .btn{width:184px;min-height:64px}

/* --- Capabilities --- */
.capabilities{padding-top:35px;text-align:center}
.capabilities h2{margin-top:17px;font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.015em}

.chips{margin-top:44px;overflow:hidden}
.chips__row{display:flex;gap:25.7px;width:max-content;margin-inline-start:-56px;animation:slide 68s linear infinite}
.chips__row--b{animation-duration:86s;animation-direction:reverse;margin-top:18px}
.chip{
  flex:0 0 auto;
  padding:11px 10px 12px;min-width:180px;
  text-align:center;
  background:var(--blue);
  border-radius:var(--r-btn);
  font-size:16px;line-height:24px;font-weight:500;
}
.chip--ghost{background:transparent;border:1.5px solid var(--blue)}

/* --- Why fikra --- */
.why{padding-top:120px;padding-bottom:76px;position:relative;z-index:1}
.why .btn{margin-top:20px;width:149px;padding-inline:14px}
.why__grid{
  counter-reset:why;
  position:relative;
  margin:68px auto 0;
  max-width:var(--shell-wide);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  /* the design's rules sit at x 386/778 and y 259/535 of the 1197x790 frame */
  grid-template-columns:386fr 392fr 419fr;
}
/* 8 grey markers on the frame's corners and edge midpoints */
.why__grid::before{
  content:"";position:absolute;inset:-4px;pointer-events:none;
  background-image:
    linear-gradient(#d9d9d9,#d9d9d9),linear-gradient(#d9d9d9,#d9d9d9),
    linear-gradient(#d9d9d9,#d9d9d9),linear-gradient(#d9d9d9,#d9d9d9),
    linear-gradient(#d9d9d9,#d9d9d9),linear-gradient(#d9d9d9,#d9d9d9),
    linear-gradient(#d9d9d9,#d9d9d9),linear-gradient(#d9d9d9,#d9d9d9);
  background-size:8px 8px;
  background-repeat:no-repeat;
  background-position:0 0,50% 0,100% 0,0 50%,100% 50%,0 100%,50% 100%,100% 100%;
}
.wcard{
  padding:44px 26px 30px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.wcard:nth-child(-n+3){padding-top:24px}
.wcard:nth-child(3n){border-right:0}
.wcard:nth-child(n+7){border-bottom:0}
.wcard__icon{display:block;height:40px}
.wcard__icon img{height:40px;width:auto}
.wcard h3{margin-top:23px;font-size:20px;line-height:28px;font-weight:500;counter-increment:why}
.wcard h3::before{content:counter(why) ".";margin-inline-end:12px}
.wcard p{margin-top:9px;font-size:16px;line-height:24px;color:var(--muted);max-width:292px}

/* ============================================================
   CURVED TRANSITIONS
   The Figma file draws these with 2183 x 613 ellipses. Each arc is
   rendered inside the section it flows into and clipped to it, so it
   never covers the section above.
   ============================================================ */
.curved{position:relative;overflow:hidden}
.curved>.shell{position:relative;z-index:2}
.curved::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:151.2%;min-width:2183px;height:613px;
  border-radius:50%;
  z-index:1;
}
.curved--white::after{top:-541px;background:var(--page-2)}
/* 531 - 17 x 31 = 4, so a 4px offset puts these rows back on the pricing
   section's row phase */
.curved--dark::after{
  top:-531px;
  background:
    linear-gradient(to right,#f0f0f0 1px,transparent 1px) 50% 4px/30px 31px,
    linear-gradient(to bottom,#f0f0f0 1px,transparent 1px) 50% 4px/30px 31px,
    var(--white);
}

/* ============================================================
   PRICING (white)
   ============================================================ */
.pricing{
  background:var(--white);
  color:var(--surface);
  text-align:center;
  padding:229px 0 212px;
}
.pricing .shell{position:relative}
/* the Figma file centres the pricing header 26px left of the plan grid below it */
.pricing__head{padding-inline-end:52px}
.pricing h2{margin-top:17px;font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.015em}
.pricing__sub{max-width:790px;margin:18px auto 0;font-size:18px;line-height:28px}

/* Segmented toggle — track radius 67, active segment radius 55.
   Both segments keep the same padding so nothing reflows when you switch;
   the blue pill is a separate element that slides between them. */
.tabs{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  margin-top:80px;padding:4px;
  background:var(--ink-vibrant);
  border-radius:var(--r-toggle);
}
.tabs__pill{
  position:absolute;left:0;top:4px;
  height:56px;width:0;
  border-radius:55px;
  background:var(--blue);
  transition:transform .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.tabs button{
  position:relative;z-index:1;
  height:56px;padding:0 24px;
  border-radius:55px;
  font-size:14px;line-height:20px;font-weight:500;
  color:var(--white);
  transition:color .3s ease,opacity .3s ease;
}
.tabs button:not(.is-active){opacity:.45}
.tabs button.is-active{color:var(--brand-100)}
/* before the pill has been measured (no JS, or first paint) the active tab
   still reads as selected */
.tabs__pill:not(.is-ready)~button.is-active{background:var(--blue)}

.plans{
  display:grid;
  /* The middle card's shadow plate sits inside the right-hand gap, so that gap
     carries the plate's 18px overhang on top of the 21px the design leaves
     between cards. Both gaps then read the same width. Spacer tracks rather
     than a uniform `gap`, so the three cards stay equal and fluid. */
  grid-template-columns:minmax(0,1fr) 21px minmax(0,1fr) 39px minmax(0,1fr);
  row-gap:27px;
  max-width:var(--shell-plans);
  margin:101px auto 0;
  text-align:start;
}
.plans>.plan:nth-child(1){grid-column:1}
.plans>.plan:nth-child(2){grid-column:3}
.plans>.plan:nth-child(3){grid-column:5}
.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:40px 29px 29px;
  background:var(--white);
  border:1px solid var(--surface);
  border-radius:var(--r-md);
}
/* the design lifts the middle card 23px without changing its height */
.plan--featured{top:-23px}
/* The offset plate behind the middle card is a solid box-shadow rather than a
   z-index:-1 pseudo-element. A negative z-index child only sits behind its
   parent's background while the parent creates no stacking context, and the
   scroll reveal animates opacity, which creates one — so the plate used to
   cover the card in black for the length of the transition. A box-shadow is
   always painted beneath the background. Offsets reproduce the same edges:
   18px right and 9px down, measured from the border box. */
.plan--featured{box-shadow:18px 9px 0 0 var(--surface)}
.plan__badge+.plan__name{margin-top:10px}
.plan__badge{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--lime-700)}
.plan__name{margin-top:0;font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.01em}
.plan__desc{margin-top:10px;font-size:14px;line-height:20px;font-weight:400}
/* the Figma text boxes are 288 wide inside a 321 card, which pushes them past
   the right padding; they are left to the card's own content width instead so
   the gutters match on both sides */
.plan__name,.plan__desc,.plan__price{width:auto}
.plan--featured .plan__desc{font-size:12px;line-height:18px}
.plan__price{
  margin-top:10px;
  font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;
}
/* the unit scales with the number so a long total can be shrunk to fit */
.plan__price small{font-size:.5556em;line-height:28px;font-weight:500;letter-spacing:0}
.plan--featured .plan__price{color:var(--lime-700)}
.plan__rule{margin:17px 0 0;border:0;border-top:1px solid rgba(35,32,34,.35)}

.plan__list{margin-top:22px;display:grid;row-gap:17px}
.plan__list li{
  position:relative;
  padding-inline-start:37px;
  font-size:12px;line-height:18px;font-weight:500;
}
.plan__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:1px;
  width:15px;height:16px;
  background:var(--plan-accent,var(--lime-700));
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M3.59894%200.84675C3.89848%20-0.282001%205.50044%20-0.281999%205.79998%200.846752L6.19108%202.32051C6.2924%202.70229%206.58435%203.00429%206.96249%203.11847L8.58941%203.60969C9.66874%203.93559%209.66874%205.46383%208.58941%205.78972L6.96249%206.28095C6.58435%206.39512%206.2924%206.69712%206.19108%207.07891L5.79998%208.55266C5.50044%209.68142%203.89848%209.68141%203.59894%208.55266L3.20784%207.07891C3.10653%206.69712%202.81458%206.39512%202.43644%206.28095L0.80952%205.78972C-0.269812%205.46383%20-0.269814%203.93559%200.809517%203.60969L2.43644%203.11847C2.81458%203.00429%203.10653%202.70229%203.20784%202.32051L3.59894%200.84675Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M3.59894%200.84675C3.89848%20-0.282001%205.50044%20-0.281999%205.79998%200.846752L6.19108%202.32051C6.2924%202.70229%206.58435%203.00429%206.96249%203.11847L8.58941%203.60969C9.66874%203.93559%209.66874%205.46383%208.58941%205.78972L6.96249%206.28095C6.58435%206.39512%206.2924%206.69712%206.19108%207.07891L5.79998%208.55266C5.50044%209.68142%203.89848%209.68141%203.59894%208.55266L3.20784%207.07891C3.10653%206.69712%202.81458%206.39512%202.43644%206.28095L0.80952%205.78972C-0.269812%205.46383%20-0.269814%203.93559%200.809517%203.60969L2.43644%203.11847C2.81458%203.00429%203.10653%202.70229%203.20784%202.32051L3.59894%200.84675Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.plan__addon{
  display:flex;align-items:center;gap:12px;
  margin-top:12px;padding:11px 0;
  font-size:18px;line-height:26px;font-weight:500;
  cursor:pointer;
}
/* The add-on control is the Figma checkbox — a 20px rounded square that is
   grey when off and lime when on. Off it shows a "+", and ticking it spins the
   square a full turn as the fill goes green and the tick takes over. */
.plan__addon input{
  appearance:none;-webkit-appearance:none;
  position:relative;
  width:20px;height:20px;flex:0 0 20px;margin:0;
  border-radius:5px;background:#d9d9d9;
  cursor:pointer;
  transition:background .3s ease .14s,transform .52s cubic-bezier(.34,1.32,.5,1);
}
.plan__addon input::before,
.plan__addon input::after{content:"";position:absolute;left:50%;top:50%;transition:opacity .18s ease}
/* the "+" */
.plan__addon input::before{
  width:10px;height:10px;margin:-5px 0 0 -5px;
  background:
    linear-gradient(#3f3c3e,#3f3c3e) center/10px 2px no-repeat,
    linear-gradient(#3f3c3e,#3f3c3e) center/2px 10px no-repeat;
}
/* the tick */
.plan__addon input::after{
  width:10px;height:5px;margin:-4px 0 0 -5px;
  border-inline-start:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(-45deg);
  opacity:0;
}
.plan__addon input:checked{background:var(--lime-600);transform:rotate(360deg)}
.plan__addon input:checked::before{opacity:0;transition-duration:.1s}
.plan__addon input:checked::after{opacity:1;transition-delay:.26s}
.plan__cta-wrap{margin-top:auto;padding-top:13px;display:block;text-align:center}

/* Creative & Content plans use the deep brand blue for the featured price,
   the bullet stars and the plan buttons. UI/UX & App Development keeps lime. */
#panel-creative{--plan-accent:var(--blue-deep)}
#panel-creative .btn--outline{border-color:var(--blue-deep);color:var(--blue-deep)}
#panel-creative .btn--outline:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--white)}
#panel-creative .btn--lime{background:var(--blue-deep);color:var(--white)}
#panel-creative .btn--lime:hover{background:var(--blue)}
#panel-creative .plan--featured .plan__price{color:var(--blue-deep)}
#panel-creative .plan__badge{color:var(--blue-deep)}

/* UI/UX & App Development lists three equal offers: none is featured, they sit
   on the same line, and each carries the same offset plate. Every gap therefore
   holds the plate plus the 10px of white the design leaves beside it, and the
   container reserves the trailing plate's width so the block stays centred. */
#panel-product .plans{
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;
  max-width:1041px;
  padding-inline-end:18px;
}
#panel-product .plans>.plan{grid-column:auto}
#panel-product .plan{box-shadow:18px 9px 0 0 var(--surface)}
#panel-product .plan__price{color:var(--lime-700)}

.plan .btn{width:227px;min-height:64px;margin-inline:auto}

/* the price counts up and down when the add-on is toggled */
.plan__price{transition:color .3s ease}
.plan__price.is-counting{color:var(--lime-600)}
#panel-creative .plan__price.is-counting{color:var(--blue)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{
  text-align:center;
  padding:168px 0 91px;
  background:var(--page-2);
}
.cta h2{font-size:56px;line-height:64px;font-weight:700;letter-spacing:-.02em}
.cta p{max-width:723px;margin:70px auto 0;font-size:18px;line-height:28px}
.cta .btn{margin-top:51px;min-height:63px;width:226px}

.footer{
  position:relative;
  background:var(--blue);
  padding:122px 0 73px;
  color:var(--brand-100);
  /* the footer inherits Tosh A (Tosh B in Arabic) like the rest of the page */
  clip-path:polygon(0 0,100% var(--slant-foot),100% 100%,0 100%);
  margin-top:calc(var(--slant-foot) * -1);
}
.footer .shell{max-width:var(--shell-footer)}
.footer__top{display:flex;justify-content:space-between;gap:60px}
.footer__brand img{width:128px;height:38px;object-fit:contain}
.footer__about{margin-top:11px;max-width:311px;font-size:16px;line-height:24.5px}
.footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer__contact a{display:flex;align-items:center;gap:12px;font-size:16px;line-height:24px;letter-spacing:.5px}
.footer__contact a img{width:20px;height:20px;object-fit:contain}
.socials{display:flex;gap:15px;margin-top:10px}
/* the icons lift like a button on hover and press back down on click */
.socials a{
  display:block;border-radius:8px;
  transition:transform .2s cubic-bezier(.32,.72,0,1),filter .2s ease;
}
.socials a:hover,
.socials a:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 5px 6px rgba(0,0,0,.32))}
.socials a:active{transform:translateY(0);filter:none;transition-duration:.08s}
.socials img{width:24px;height:24px}
.footer__rule{margin:106px 0 0;border:0;border-top:1px solid rgba(238,236,255,.35)}
.footer__bar{
  margin-top:23px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  font-size:16px;line-height:26px;
}
.footer__bar nav{display:flex;gap:32px}

/* --- FAQ (not in the Figma frame; nav links to it) --- */
.faq-section{
  background:var(--page-2);
  padding:172px 0 0;
  text-align:center;
}
.faq-section h2{font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.015em;margin-top:29px}
.faq{max-width:860px;margin:44px auto 0;text-align:start}
.faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;
  font-size:20px;line-height:28px;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 14px;width:14px;height:14px;
  border-inline-end:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-4px,-4px)}
.faq details p{padding:0 0 24px;color:var(--muted);font-size:16px;line-height:24px;max-width:720px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .chips__row{animation:none}
  .sticker{animation:none}
  .plan__addon input:checked{transform:none}
  .btn:hover{transform:none}
}

/* ============================================================
   RESPONSIVE
   The design is a fixed 1444px frame; below that everything
   reflows rather than scaling, so the page stays readable.
   ============================================================ */
@media (min-width:1300px){
  .why__grid{grid-template-rows:259px 276px 255px}
  /* the design's process grid is 1160 wide from x=148, 12px past the text column */
  .process__grid{grid-template-columns:repeat(3,283px);column-gap:155.5px;justify-content:start;width:1160px}
}

@media (max-width:1300px){
  :root{--shell-hero:100%;--shell-wide:100%;--shell-footer:100%}
  .hero h1 .lead{font-size:clamp(56px,7.4vw,96px);line-height:1.28}
  .clients{gap:40px;padding:0 40px}
}

@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:28px}
  .process__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:60px;row-gap:64px}
  .process{padding-top:150px}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .wcard:nth-child(3n){border-right:1px solid rgba(255,255,255,.12)}
  .wcard:nth-child(2n){border-right:0}
  .wcard:nth-child(n+7){border-bottom:1px solid rgba(255,255,255,.12)}
  .why__grid::before,.why__grid::after{display:none}
  .plans,#panel-product .plans{grid-template-columns:1fr;max-width:420px;gap:44px;padding-inline-end:0}
  .plans>.plan{grid-column:auto}
  .plan--featured{top:0}
  .plan__name,.plan__desc,.plan__price{width:auto}
  .plan--featured{box-shadow:9px 9px 0 0 var(--surface)}
  .cta{padding:120px 0}
  .pricing{padding-top:180px}
}

@media (max-width:860px){
  .header{top:14px}
  .header__inner{gap:12px}
  .brand img{width:132px;height:40px}
  .nav{
    position:fixed;inset:0 0 auto;top:0;
    flex-direction:column;align-items:stretch;gap:0;
    height:auto;padding:96px 24px 32px;border-radius:0 0 24px 24px;
    transform:translateY(-102%);transition:transform .32s ease;
  }
  body.menu-open .nav{transform:none}
  .nav__links{flex-direction:column;align-items:flex-start;gap:8px}
  .nav__links a{font-size:24px;line-height:44px}
  .lang{align-self:flex-start;margin-top:16px}
  .nav__toggle{
    display:grid;place-items:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--surface);position:relative;z-index:80;
  }
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after{
    content:"";display:block;width:20px;height:2px;background:var(--white);
    transition:transform .24s ease,opacity .24s ease;
  }
  .nav__toggle span::before{position:absolute;transform:translateY(-6px)}
  .nav__toggle span::after{position:absolute;transform:translateY(6px)}
  body.menu-open .nav__toggle span{background:transparent}
  body.menu-open .nav__toggle span::before{transform:rotate(45deg)}
  body.menu-open .nav__toggle span::after{transform:rotate(-45deg)}

  .hero{padding-top:180px;padding-bottom:90px}
  .hero h1{font-size:clamp(30px,5.6vw,56px);line-height:1.14}
  .hero h1 .lead{font-size:clamp(44px,9vw,96px)}
  .sticker--star-lg,.sticker--star-sm,.sticker--star-xs,.sticker--badge{display:none}
  .sticker--bubble{left:12px;top:120px;width:92px}
  .clients{
    height:auto;flex-wrap:wrap;justify-content:center;
    gap:28px 40px;padding:28px 24px;
  }
  .clients img{height:30px}
  .clients img.is-tall{height:42px}
  .worked{margin-top:48px}

  .process__grid{grid-template-columns:1fr;row-gap:48px}
  .ticker{margin-top:40px}

  .works{padding:48px 0 64px}
  .works h2,.capabilities h2,.pricing h2{font-size:clamp(28px,6.4vw,48px);line-height:1.14}
  .capabilities{padding-top:56px}
  .why{padding-top:80px}
  .why__grid{grid-template-columns:1fr}
  .wcard{border-right:0!important;min-height:0}
  .cta h2{font-size:clamp(30px,6.4vw,56px);line-height:1.14}
  .cta p{margin-top:32px}
  .footer{padding:90px 0 48px}
  .footer__top{flex-direction:column;gap:36px}
  .footer__rule{margin-top:48px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:18px}
  .footer__bar nav{flex-wrap:wrap;gap:18px}
  .curve__shape{height:320px}
  .curve--to-white .curve__shape,.curve--to-dark .curve__shape{top:-280px}
  .pricing{padding-top:120px}
}

/* ============================================================
   RTL — the Arabic frame ("home arabic")
   It keeps the page's left-to-right frame: the header, the service tape, the
   pricing grid and the footer sit exactly where they do in English, and only
   the sections that read as prose mirror. Text inside every one of them is
   still Arabic, so direction is restored on the parts that hold copy.
   ============================================================ */
html[dir="rtl"] .hero{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slant)))}
html[dir="rtl"] .chips__row{animation-name:slide-rtl}
html[dir="rtl"] .footer{clip-path:polygon(0 var(--slant-foot),100% 0,100% 100%,0 100%)}

html[dir="rtl"] .header__inner,
html[dir="rtl"] .nav,
html[dir="rtl"] .clients,
html[dir="rtl"] .lang,
html[dir="rtl"] .tabs,
html[dir="rtl"] .plans,
html[dir="rtl"] .footer__top,
html[dir="rtl"] .footer__contact a,
html[dir="rtl"] .footer__bar,
html[dir="rtl"] .footer__bar nav,
html[dir="rtl"] .socials{direction:ltr}
html[dir="rtl"] .plan,
html[dir="rtl"] .footer__about,
html[dir="rtl"] .footer__bar nav a,
html[dir="rtl"] .tabs button{direction:rtl}
html[dir="rtl"] .footer__about{text-align:right}
html[dir="rtl"] .footer__contact{align-items:flex-start}

/* the Arabic hero sets both lines at 64/1.6 rather than the English 96 + 56 */
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero h1 .lead{font-size:64px;line-height:1.6}
html[dir="rtl"] .hero{padding-top:230px}
/* display-5: 40/51 in the Arabic type scale */
html[dir="rtl"] .split h2{line-height:51px}