/* ==========================================================================
   Orama Technology Solutions — product sites
   Κοινό stylesheet για eagle.orama-tech.gr και iroad.orama-tech.gr
   Design direction: "Clarity"
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --canvas:#FFFFFF;
  --soft:#F6F8FC;
  --soft-2:#EEF2F9;
  --ink:#0B1B33;
  --ink-2:#465771;
  --ink-3:#8496AE;
  --line:#E3E9F2;
  --line-2:#D6DFEC;
  --navy:#132B4D;

  /* το accent το ορίζει το θέμα του κάθε προϊόντος, πιο κάτω */
  --accent:#D97706;
  --accent-hover:#B45309;
  --accent-soft:#FEF4E4;
  --accent-glow:rgba(217,119,6,.6);
  --accent-tint:rgba(217,119,6,.09);

  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;

  --maxw:1160px;
  --pad:24px;
  --r:9px;
  --r-lg:14px;
  --r-xl:20px;

  --sh:0 1px 2px rgba(11,27,51,.05),0 12px 28px -12px rgba(11,27,51,.14);
  --sh-lg:0 2px 4px rgba(11,27,51,.05),0 36px 70px -24px rgba(11,27,51,.26);
}

/* Τα χρώματα βγαίνουν από τα ίδια τα σήματα.
   Eagle: μπλε, τιρκουάζ και πράσινο των τριών μπαρών, με #123B4E για το
   σκούρο, ακριβώς όπως το mono-dark του πακέτου ταυτότητας.
   iRoad Assist: το πορτοκαλί της φιγούρας και το γκρι του δρόμου. */
html[data-product="eagle"]{
  --accent:#0075BE;
  --accent-hover:#005E99;
  --accent-soft:#E3F1FA;
  --accent-glow:rgba(0,117,190,.5);
  --accent-tint:rgba(0,117,190,.09);
  --navy:#123B4E;
  --brand-1:#0075BE;   /* μπλε, η πάνω μπάρα */
  --brand-2:#1E8F8F;   /* τιρκουάζ, σκουρότερο για αντίθεση σε ανοιχτό */
  --brand-3:#5E8A1E;   /* πράσινο, σκουρότερο για αντίθεση σε ανοιχτό */
}
html[data-product="iroad"]{
  --accent:#E2650C;
  --accent-hover:#BF4F06;
  --accent-soft:#FEF0E6;
  --accent-glow:rgba(226,101,12,.5);
  --accent-tint:rgba(226,101,12,.09);
  --navy:#2F343A;      /* το γκρι του δρόμου στο σήμα */
}

/* ---------------------------------------------------------------- reset -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0;letter-spacing:-.024em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:70;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(11,27,51,.05)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:30px}

.brand{display:flex;align-items:center;flex:0 0 auto}
/* Το Eagle είναι πλατύ lockup, το iRoad στοιβαγμένο, οπότε για να
   δείχνουν ισοδύναμα θέλουν διαφορετικό ύψος. */
.brand img{height:32px;width:auto}
html[data-product="iroad"] .brand img{height:52px}

.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--ink-2);font-weight:500}
.nav-links a{position:relative;padding:4px 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}

/* Διπλό CTA: στη μπάρα για desktop, μέσα στο μενού για κινητό. */
.nav-links .nav-cta{display:none}

.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;flex:0 0 auto}
.lang a{padding:4px 11px;border-radius:999px;color:var(--ink-3);transition:.2s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}

.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;cursor:pointer;color:var(--ink)}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav-toggle span+span{margin-top:4px}

/* --------------------------------------------------------------- button -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r);
  font-family:var(--display);font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer;transition:.2s;
  text-align:center;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px -6px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--soft-2)}
.nav .btn{padding:10px 18px;font-size:14px}

/* ----------------------------------------------------------------- hero -- */
.hero{padding:150px 0 0;text-align:center;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0 0 auto 0;height:660px;pointer-events:none;
  background:
    radial-gradient(660px 360px at 50% -6%, var(--accent-tint), transparent 66%),
    linear-gradient(180deg,#FBFCFE,transparent);
}
.hero-in{position:relative}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh);font-size:13.5px;color:var(--ink-2)}
/* Ρητό βάρος: το <b> θα ζητούσε 700, που δεν φορτώνουμε για τη mono,
   και ο browser θα το πάχαινε μόνος του με άσχημο αποτέλεσμα. */
.pill b{color:var(--accent);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hero h1{font-size:clamp(38px,5.4vw,66px);font-weight:800;margin:28px auto 0;max-width:17ch}
.hl{background:linear-gradient(180deg,transparent 64%,var(--accent-soft) 64%);padding:0 .08em}
.lede{margin:24px auto 0;font-size:19.5px;color:var(--ink-2);max-width:62ch}
.cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-row.left{justify-content:flex-start}
.micro{margin-top:16px;font-size:13.5px;color:var(--ink-3)}

.shot{margin:66px auto 0;max-width:1000px;position:relative}
.frame{border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--navy);box-shadow:var(--sh-lg);overflow:hidden;border:1px solid rgba(11,27,51,.2);border-bottom:none}
.frame-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.07)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.frame-bar span{margin-left:10px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5)}
.frame img{width:100%}
.shot::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--canvas));pointer-events:none}

.shot-pair{margin:60px auto 0;max-width:940px;display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:end}
.shot-pair img{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}

/* Φωτογραφία στο hero, για σελίδα που δεν δείχνει οθόνη προϊόντος. */
.hero-photo{margin:60px auto 0;max-width:1040px}
.hero-photo img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-lg)}

/* Συσκευή στο hero: mockup με διάφανο φόντο, χωρίς ψεύτικο πλαίσιο browser.
   Το .shot / .frame πιο πάνω είναι για πραγματικό screenshot εφαρμογής,
   δηλαδή για εικόνα που γεμίζει ορθογώνιο χωρίς δικό της περίγραμμα. */
.hero-device{margin:54px auto 0;max-width:330px;position:relative}
.hero-device.wide{max-width:740px}
.hero-device::before{
  content:"";position:absolute;left:50%;top:14%;width:190%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-tint),transparent 72%);
}
.hero-device img{position:relative;filter:drop-shadow(0 30px 50px rgba(11,27,51,.22))}

/* ---------------------------------------------------------------- trust -- */
.trust{padding:34px 0 72px}
.trust p{text-align:center;font-size:13.5px;color:var(--ink-3)}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 52px;margin-top:26px}
/* Τα λογότυπα πελατών είναι ήδη μονόχρωμα από το tools\normalize-logos.ps1,
   οπότε εδώ ρυθμίζουμε μόνο πόσο έντονα εμφανίζονται. */
.logos img{height:34px;width:auto;opacity:.62;transition:opacity .25s}
.logos img:hover{opacity:1}
/* Τα παλιά αρχεία έχουν ενσωματωμένο κενό γύρω από το σήμα, τα νέα είναι
   κομμένα στο περίγραμμα. Αυτά τα δύο ύψη τα φέρνουν στο ίδιο οπτικό μέγεθος. */
.logos img.lg-tall{height:38px}
.logos img.lg-wide{height:22px}

/* -------------------------------------------------------------- section -- */
section{padding:94px 0}
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:680px;margin:0 auto;text-align:center}
.shead h2{font-size:clamp(29px,3.5vw,43px);font-weight:800;margin-top:14px}
.shead p{margin-top:16px;font-size:18px;color:var(--ink-2)}
.shead.left{margin:0;text-align:left}

/* ---------------------------------------------------------------- stats -- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:#fff;padding:30px 22px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,38px);font-weight:800;color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:14.5px;color:var(--ink-2)}

/* ---------------------------------------------------------------- cards -- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh);transition:transform .28s,box-shadow .28s,border-color .28s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.card .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Οι τρεις κάρτες του "Γιατί το Eagle" παίρνουν τα τρία χρώματα των
   μπαρών του σήματος, με τη σειρά που τα έχει το σήμα. Δένει τη σελίδα
   με το σήμα χωρίς να χρειάζεται δεύτερο γραφικό. */
html[data-product="eagle"] #why .card:nth-child(1) .ico{background:rgba(0,117,190,.11);color:var(--brand-1)}
html[data-product="eagle"] #why .card:nth-child(2) .ico{background:rgba(43,175,175,.14);color:var(--brand-2)}
html[data-product="eagle"] #why .card:nth-child(3) .ico{background:rgba(140,190,63,.17);color:var(--brand-3)}

.card h3{font-size:19px;font-weight:700}
.card p{margin-top:9px;color:var(--ink-2);font-size:15.5px}
.card ul{margin:12px 0 0;padding-left:18px;color:var(--ink-2);font-size:15px}
.card li{margin-bottom:4px}
.c-6{grid-column:span 6}.c-4{grid-column:span 4}.c-3{grid-column:span 3}.c-2{grid-column:span 2}
.card.wide{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:36px}
.card.wide img{border-radius:10px;border:1px solid var(--line)}
.card.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.card.dark h3{color:#fff}
.card.dark p,.card.dark ul{color:rgba(255,255,255,.72)}
.card.dark .ico{background:rgba(255,255,255,.1);color:var(--accent)}

/* ---------------------------------------------------------------- split -- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev>*:first-child{order:2}
.split h2{font-size:clamp(27px,3.1vw,39px);font-weight:800;margin-top:14px}
.split .t{margin-top:16px;font-size:17.5px;color:var(--ink-2)}
.split-img img{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.split-img.plain img{box-shadow:none;border-radius:0}

.checks{margin-top:24px;display:grid;gap:12px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.check b{color:var(--ink);font-weight:600}
.check .tick{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;margin-top:3px;font-weight:700}

/* ------------------------------------------------------------- flowline -- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;position:relative}
.flow::before{content:"";position:absolute;top:21px;left:11%;right:11%;height:2px;background:linear-gradient(90deg,var(--line),var(--accent-soft),var(--line))}
.step{text-align:center;position:relative}
.step b{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px;font-family:var(--display);font-weight:800;font-size:16px;position:relative;z-index:1}
.step h3{font-size:17px;font-weight:700}
.step p{margin-top:7px;font-size:15px;color:var(--ink-2)}

/* ----------------------------------------------------------------- dRSA -- */
/* Το σήμα του dRSA έχει μαύρα γράμματα, οπότε θέλει ανοιχτό υπόστρωμα.
   Σε σκούρο χάνεται το «RSA». */
/* Σήμα και τίτλος στην ίδια γραμμή, με μια λεπτή κάθετη γραμμή ανάμεσα.
   Σε στενή οθόνη πάνε το ένα κάτω από το άλλο. */
.drsa-head{max-width:880px;margin:0 auto}
.drsa-title{display:flex;align-items:center;gap:32px}
.drsa-title img{width:170px;flex:0 0 auto;padding-right:32px;border-right:1px solid var(--line);box-sizing:content-box}
.drsa-title h2{font-size:clamp(25px,2.8vw,34px);font-weight:800;text-align:left}
.drsa-head>p{margin-top:20px;font-size:18px;color:var(--ink-2)}
@media (max-width:720px){
  .drsa-title{flex-direction:column;align-items:flex-start;gap:18px}
  .drsa-title img{width:150px;padding-right:0;border-right:0}
}
.drsa-note{
  max-width:740px;margin:46px auto 0;text-align:center;
  font-size:16.5px;color:var(--ink-2);
  padding-top:30px;border-top:1px solid var(--line);
}
.drsa-note b{color:var(--ink);font-weight:600}

/* ----------------------------------------------------------------- faq --- */
.faq{max-width:780px;margin:44px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 40px 24px 0;color:var(--ink-2);font-size:16.5px}

/* ------------------------------------------------------------------ cta -- */
.final{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:54px;display:grid;grid-template-columns:1fr .82fr;gap:50px;align-items:center;box-shadow:var(--sh-lg)}
.final h2{font-size:clamp(27px,3.1vw,39px);font-weight:800;margin-top:14px}
.final>div>p{color:rgba(255,255,255,.74);margin-top:16px;font-size:17.5px}
.final .info{margin-top:26px;display:grid;gap:11px;font-size:16px;color:rgba(255,255,255,.82)}
.final .info a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.final .info a:hover{border-bottom-color:var(--accent)}
.final .info span{display:inline-block;width:22px;color:var(--accent)}

/* ----------------------------------------------------------------- form -- */
.form{background:#fff;border-radius:var(--r-lg);padding:26px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea{
  width:100%;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;color:var(--ink);font-family:var(--body);font-size:15px;
}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.field input:user-invalid{border-color:#DC2626}
.form .btn{width:100%;margin-top:6px}
.form .fine{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:44px 12px;text-align:center;color:var(--ink-2)}
.form-msg b{display:block;font-family:var(--display);font-size:20px;color:var(--ink);margin-bottom:8px}
.form-err{margin-top:12px;padding:11px 13px;border-radius:var(--r);background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;font-size:14px}

/* --------------------------------------------------------------- footer -- */
footer{padding:62px 0 38px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14.5px;background:var(--soft)}
.fgrid{display:flex;gap:44px;flex-wrap:wrap}
.fgrid>div:first-child{flex:1 1 280px}
.fgrid nav{display:grid;gap:9px;align-content:start}
.fgrid nav b{color:var(--ink);font-family:var(--display);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.flogo{height:32px;width:auto;margin-bottom:16px}
html[data-product="iroad"] .flogo{height:54px}
/* Το σήμα της Orama, στο κάτω μέρος του υποσέλιδου */
.by{display:inline-flex;align-items:center;margin-top:22px}
.by img{height:38px;width:auto;transition:opacity .2s}
.by:hover img{opacity:.75}
.fgrid a:hover{color:var(--accent)}
.fbot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------------- reveal -- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:980px){
  .bento{grid-template-columns:1fr}
  .c-6,.c-4,.c-3,.c-2{grid-column:span 1}
  .card.wide{grid-template-columns:1fr}
  .split,.final{grid-template-columns:1fr;gap:38px}
  .split.rev>*:first-child{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow::before{display:none}
  .shot-pair{grid-template-columns:1fr}
  .hero{padding-top:112px}
  .final{padding:30px}
  section{padding:70px 0}

  .nav-toggle{display:block}
  .nav-links{
    position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh);
    padding:8px var(--pad) 18px;margin:0;display:none;
  }
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a::after{display:none}
  .nav.is-open .nav-links{display:flex}
  .nav-in{flex-wrap:wrap;gap:14px}
  /* Το κουμπί της μπάρας δεν χωράει σε κινητό, οπότε μπαίνει μέσα στο μενού. */
  .nav-in>.btn{display:none}
  .nav-links .nav-cta{display:flex;margin-top:16px;border-bottom:0;padding:14px 20px}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .lede{font-size:17.5px}
  .cta-row .btn{width:100%}
  .fbot{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

@media print{
  .nav,.form,.cta-row,.nav-toggle{display:none}
  body{font-size:12pt;color:#000}
  .final{background:none;color:#000;box-shadow:none}
}